aseemk / zoomit-lightbox Goto Github PK

Zoom.it-powered Lightbox — an infinitely better experience for hi-res images.

Home Page: http://aseemk.github.io/zoomit-lightbox/test/gallery.html

License: MIT License

JavaScript 69.60% CSS 5.13% HTML 25.27%

zoomit-lightbox's Introduction

Zoom.it Lightbox
================

FIXME: This library relied on Zoom.it exposing its viewer JS.
Zoom.it is now ZoomHub, and it now uses OpenSeadragon:

- http://zoomhub.net/
- https://openseadragon.github.io/

So this library needs to be updated to use OpenSeadragon.
This library is currently broken until that happens.

====

Zoom.it Lightbox is a Lightbox variant powered by Zoom.it.
This makes it perfect for high-resolution images.

Before proceeding, it helps to know what Lightbox and Zoom.it are:
- http://www.huddletogether.com/projects/lightbox2/
- http://zoom.it/

The easiest way to understand it is to see it in action:
- http://aseemk.github.com/zoomit-lightbox/test/gallery.html

Compare this with the standard Lightbox2 on the same images:
- http://aseemk.github.com/zoomit-lightbox/test/gallery-lightbox2.html

Or with Lightbox+, the best existing variant I could find for hi-res images:
- http://aseemk.github.com/zoomit-lightbox/test/gallery-lightboxplus.html
- http://serennz.sakura.ne.jp/toybox/lightbox/

The key differences are:
- Zoom.it Lightbox streams images instantly, regardless of size.
- Zoom.it Lightbox gives a fluid viewer for zooming into those images.

This is an initial commit from the stable state I reached in Nov 2010.
I hope to continue improving it based on your feedback.

Let me know if you use this and how you like it!

Aseem Kishore
- https://github.com/aseemk

zoomit-lightbox's People

Contributors

Stargazers

Watchers

zoomit-lightbox's Issues

Get throbber image working

It should show up if we don't have the DZI for the image and we begin loading the raw image. It should disappear when the raw image is loaded.

Make this beautiful! Rounded corners, drop shadows, etc.

We need to add some design goodness to this sweet functionality! Rounded corners are a start, drop shadows are even better, and who knows what else.

Auto-init immediately, and support refreshing

Right now, we only support "initializing" once, so to be safe (in case this script is included in the <head>), we wait to auto-init until window.onload (since ondomready isn't trivial to implement and we don't want to take a dependency on jQuery, etc.).

This is really suboptimal though, because if you have a lot of images on your page, we won't init until all of them have loaded -- which could be super delayed.

So we should auto-init immediately -- optimizing for the recommended best practice of including the script at the bottom of <body> -- and support "refreshing" (updating) both manually and automatically on window load.

Support pressing Esc to close Lightbox

Right now Esc only exits full-page if you're in it -- this is baked into Seadragon Ajax directly. We should add our own listener for Esc that also closes the Lightbox.

Prefetch prev/next group images?

If you're viewing an image in a group, and the DZIs of any of the prev/next images in that group aren't ready yet (or failed), we should consider pre-fetching the raw images.

Variable height for caption

If the caption is long and overflows into a second line (or more), the bottom part of the Lightbox should stretch to accommodate. Right now it doesn't.

Silverlight viewer doesn't work in Mac Safari

Seadragon.ComboViewer.create() never calls the callback. This could presumably be the same bug as in Mac Firefox, but unlike Firefox, Safari's console doesn't show any uncaught error... The symptom is the same -- the Lightbox doesn't work at all.

Silverlight viewer doesn't work in Mac Firefox

Zoom.it's combo viewer throws a "sender is undefined" error in onPluginLoad(). It unfortunately happens in Silverlight's "load" event, not an "error" event, so we don't catch it and fallback to Ajax. The result is that the Lightbox doesn't work at all.

Use/pass DZI JSON directly instead of parsing DziTileSource manually

Right now we parse the returned DZI JSON into a DziTileSource manually, because there used to be no other option. Now Seadragon Ajax supports taking DZI JSON directly (see update), so we should now let it.

This would not only simplify our code, it would also let Seadragon Ajax know the DZI URL (which gets lost if you instantiate a DziTileSource yourself), and knowing the DZI URL may be crucial to Silverlight support.

Automated build (concatenation + minification)

We should have an automated build in this project that generates the needed lightbox-min.js and lightbox-min.css files. The JS should have the viewer (ideally Seadragon Ajax; see issue 3), Zoomit.js API wrapper library and the Lightbox code all concatenated together.

We should also add a test page that uses this built output, or alternately, change our existing gallery test page to use it, and add a new one that uses the raw source code for development.

Keep polling images that aren't ready

Right now we only ask the Zoom.it API if a DZI is available for a given image once, at the beginning. If an image isn't ready but is in progress, we should keep polling. This way, the next time the user views that image (which may be his/her first time), they'll get a better experience.

This depends on Zoomit.js implementing polling support, but once that's there, we should make sure to use it.

HTML should use unique IDs instead of classes?

Right now we give our overall container a unique ID (#zoomit-lightbox), but all the elements inside it have generic (though semantic) classnames (like background, foreground, info, etc.). This means there's a potential chance for collision and CSS conflicts. Should we make all those unique IDs too? (E.g. #zoomit-lightbox-background, etc.)

Remove dependency on Zoom.it combo viewer; use Seadragon Ajax instead

Right now, Zoom.it Lightbox uses the undocumented hosted Zoom.it combo viewer. This was initially done because it was my hope that we could publicly release this Lightbox officially hosted on Zoom.it. With the disbanding of Live Labs, though, that's not going to happen. And worse, the combo viewer is now stagnant; it's not possible for us to fix bugs or improve it as needed.

So we should switch the viewer to use Seadragon Ajax instead, which is both public and official and allows us to continue improving the viewing experience as needed. Two things we're going to miss from the Zoom.it combo viewer, though, are the Silverlight support and the Zoom.it branding. See these two work items to add these features into Seadragon Ajax:

Use batch API w/ DZI endpoint

This depends on implementing batch API support in Zoomit.js, but once that's done, we should make sure to use it -- and to switch to using the DZI endpoint for faster responses, since we don't need or use the extra info.

Move throbber image into CSS

Right now (previously?), the throbber image location is hardcoded into the JS. Originally I figured this could be a JS config, but I think now it should be in the CSS.