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).

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 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

There is actually a tooltip on both the overlay and the image itself with usage instructions.

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!

The interaction style that Harald put into Remooz is spot-on. Especially the zoom in/out cursors, placement of loading spinner, and zoom effect.

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).

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!

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.