As a front-end developer, minimizing your images is important. Compressed images load faster and take less time to download. However, most current tools that can do that are comman…
Fancyzoom image gallery functionality
Fancyzoom is pretty cool in a lot of ways, like it’s amazing zoom functionality modelled after OS X. The only thing missing was next and previous links for gallery functionality, so I implemented those.
How it works
This version is an edit of the original Fancyzoom, available at http://www.fancyzoom.com.
For next and previous links to work we need to know which images are next and previous, and even if there is a next or previous image. So on initialisation I compose an array of ‘candidate images’. When you then open an image, it checks the position of the current image in the array, and adds or hides the previous/next links accordingly. The first image doesn’t get a previous, the last image doesn’t get a next, everything in between gets both links.
When displaying the links, I add the corresponding image number to the previous and next links (current image number minus one for previous, and plus one for next). When you click either of the links, it finds the image in the array, sets up an onload event, and displays the loading spinner. Once the image is loaded, I remove the spinner and update the previous and next links.
Now, one of the cool things of Fancyzoom is it’s keystrokes.
esc closes the image overlay,
alt are click-throughs (no overlay, just open the image). Like in OSX you can press shift while clicking to make the zoom effect go really slow. Since I was adding next and previous links, I wanted the arrow keys to work as well.
I started with PPK’s key reference page to see which charcode I had to use. PPK then gave me a smart tip: “Use keydown, not keypress. Saves you a lot of hassle.”. Fancyzoom used keypress, which indeed make things more annoying to do cross-browser. I changed it to keydown, and it worked without having to change any of the other code. In the end it worked so well that for kicks I also added the spacebar as a way to go to the next image.
Fancyzoom exists out of two files, and I added a third CSS file to it (which you can just copy/paste into your own css file)
License: this is free for personal use. For all other uses, refer to the full license in the fancyzoom.js file.
You can see it in action on the numerous software pages on Wakoopa, for example the Safari page or the Openoffice page.
Let me know what you think, and if you have improvements I’d love to hear them!
Derek Powazek recently described a method of cleverly hiding a copyright message embedded in the image itself by using it as a background on a div and clipping the message at the b…