The number input type provides a nice way for to deal with numbers. You can set bounds with the min and max attributes and users can press up and down to go add or remove 1, or if you add the step attribute, go up or down by a step. But what if we want…
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!
My goal with Polypane is improving the workflow for developers and designers. The main focus is of course developing an excellent browser for developers and designers, but I’m also developing online tools that help out during development. Two of them online now are a CSS specificity calculator, and a color contrast checker. Both of them…
One term that keeps coming up in the design community as a stand-in for layout is “box model”, for example in “Why don’t design tools have the box model?” The CSS Box model is a well-defined term though, and it does not do layout. If we keep referring to our imaginary perfect layout system in design…