Fresh from the jQuery UI Lab comes the Photoviewer widget. As described on its planning wiki page:
An alternative to Lightbox and its various clones, with the sole purpose of displaying images: One or more thumbnails point at the full resolution image, and instead of displaying that image on a new page, its displayed, above an overlay, on the current page.
When a group of anchors with thumbnails is selected, the user can navigate with mouse and keyboard to rotate through the images.
The result is this:
There’s another demo showing how the widget can resize images that don’t fit into the browser window, as well as customizing animations.
Worth mentioning about the current implementation:
- A “canvas” element is used to render the shadow. This allows a lot of flexibility in terms of positioning, color and size of the shadow; if a browser doesn’t support canvas (IE without excanvas) the shadow simply isn’t rendered
- You can click anywhere to close the viewer, or press Escape
- Cursor keys, mousewheel as well as mouse navigation buttons (previous/next buttons on some models) can be used to rotate through an image gallery
- By using the mousewheel to rotate images, there is no need to emulate fixed positioning or similar hacks, though you need to include the mousewheel plugin
- When the last image is reached, the first is displayed, and the other way round; that way its more obvious that you reached the end of a gallery (“I’ve seen that one already” instead of “Why isn’t anything happening?”)
- A loading indicator is displayed when loading takes more then 250ms. That way you won’t see it most of the time, just in those cases where you’d otherwise wonder if anything is happening at all
- The jQuery UI “drop'” effect is used by default to rotate images in a gallery, giving the slight illusion of a slide-projector, therefore giving the viewer a more natural/human feel
- Images that are too big are resized to fit into the browser window; that also happens when the browser window is resized while the viewer is open
- The markup is very simply, therefore easy to style: There is one element for the overlay (currently buggy in IE6), one container element containing the canvas-shadow element as well as the actual image (by default styled with 15px rounded white borders)
I’d like to hear your feedback! Post a comment here, send me an email, or participate on the planning wiki page.
Looking good! However, I’m not sure the mousewheel navigation is going to be intuitive to most users–I think expectations is that they see some kind of Next/Previous links.
Even when I initially looked at the demo I thought there was no navigation between images when I saw no Next/Previous buttons. It wasn’t until reading the features that I saw that the mousewheel works.
Jörn, GREAT! I always prefer tu use the built-in plugins over a third party one. I looking for something like that and found some cool samples:
http://www.nixboxdesigns.com/demos/jquery-image-flyout.php
http://orderedlist.com/demos/fancy-zoom-jquery/
http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/
and my favorite:
http://www.addfullsize.com/
addfullsize is my favorite mainly because of the markut. I _really_ like the approach of using the traditional img tag, but with the “new” attribute fullsize, wich is very handy.
Btw, great work!
Nice work! I like the transitions. I don’t see the next/previous buttons mentioned in the instructions, but the arrow keys work fine. It would definitely require some instruction on the page to make users realize that the arrow keys or scroll wheel will work for this purpose, but I like the idea because 1) it’s a nice way to navigate, and 2) it prevents people from scrolling the page behind the overlay unless they really mean to, which was always visually strange for me.
@Dan and Paul: I’d like to keep the interface as light as possible; currently its probably too light.
There is actually a tooltip on both the overlay and the image itself with usage instructions. A developer looking at the plugin doesn’t notice that, a normal user of the plugin may have better odds. Anyway, that needs some more testing and experimentation.
I’ve thought about a fixed navigation element, eg. in the lower right corner, with next/prev buttons and a close button. Maybe half transparent unless hovered, again with tooltips mentioning the mousewheel/cursor alternatives. That would still be much better then the always moving navigation elements that similar implemenations use. If any, then at a fixed position.
@Diego: Thanks for the reference. I really like to highlight/zoom effect when opening/closing the viewer. I’ve actually experimented with that already, but gave up due to conflicts with the current resizing method. Need to investigate that some more.
I like the hover-icon of the fullsize images, though a magnifier icon would probably be a better choice. There also no point in having to click the icon, instead of using the full thumbnail as a click target (no progressive enhancement either).
Very classy. Good call on using canvas. One feature I’d demand of this would be the transfer effect we see in fancyzoom.
The interaction style that Harald put into Remooz is spot-on. Especially the zoom in/out cursors, placement of loading spinner, and zoom effect.
A good UI shouldn’t need instructions.
However you do it, you definitely need a visually obvious “next/previous” option.
Meanwhile, well done for keeping it so light!
Hi Jörn,
I really like it! Navigation with keyboard and the mouse wheel support is really a plus, but having some visible UI navigation controls which are displayed when the mouse is over the image would help a lot to have a self explaining UI.
Thanks for your efforts
Patrick
I wonder, why You have made FancyBox (http://fancy.klade.lv/) clone ? 🙂
Hi Janis,
I’ve worked with Fancybox and wasn’t happy with a lot of the details. The image-based shadow produces too many http requests; the click-on-image navigation doesn’t work well when a gallery contains images of different sizes (the hitbox for the next image is always at a different position), the fade-to-white-to-next transition is annoying. No builtin mousewheel support (the easiest thing to fix). I don’t need other content then images for a photoviewer.
All in all enough reasons for a new project, right? Also gave me the chance to experiment with alternative navigation schemes (more ideas in the pipe) as well as using Canvas for shadow rendering.
I’m sorry but the biggest problem with this solution is the mousewheel. it was the first problem I ran into and it’s pretty bad, imo. I was using the site with a 1280×800 screen resolution and as you probably know, that doesn’t leave me much of screen estate. Now imagine me clicking one of the photos that wasn’t completely in view. This opens the image in that current scrollable element and then proceeds to hijack the mousewheel control instead of letting me scroll up so that I can see the whole image.
Lightbox/whatever would’ve centered the image on the screen, so in that sense this is far far less ideal solution.
I understand wanting to make this easier to use, but people aren’t used to using mousewheel or keys like that… and it goes against all of that they’ve learned in the past (mousewheel scrolls the page).