ThemeForest, one of Envato’s marketplaces, has just launched a “JavaScript” category and within it my new JavaScript component, “Zoomer“. As the description states, “‘Zoomer’ enables your users to closely inspect images by hovering their cursor over them. It’s been built as a robust, unobtrusive and highly customizable jQuery plugin.” Here’s a brief overview of its key features:
- A fully customizable zoomer for use with any image
- Works in all modern browsers (including IE6 )
- This is a progressive enhancement; images will still be viewable when JavaScript is not available.
- The Zoomer itself is highly customizable.
- The Zoomer requires NO images – the shadows/gradients are dynamically generated by JavaScript (using VML /Canvas technologies)
- In-depth documentation including two videos and an FAQ !
It’s customizable!
Almost every aspect of the zoomer is customizable, here’s a preview of the jQuery options:
$.zoomer.defaultOptions = { zoomerClass: '_zoomer', zoomSrc: '', height: 150, width: 150, mousewheelZoom: true, defaultZoom: 2, maxZoom: 5, minZoom: 1, feedback: function(x,y,zoom){}, onOver: function(){}, onOut: function(){}, zoomerOverlay: { className: '_zoomer-overlay', shadowWidth: 10, shadowOpacity: 0.5, /* Must be in "rgb(r,g,b)" format */ shadowColor: 'rgb(0,0,0)', radialOpacity: 0.4, /* Must be in "rgb(r,g,b)" format */ radialColor: 'rgb(0,0,0)' } }; |
Even the shadow beneath the Zoomer is customizable – this is possible thanks to canvas/VML technologies.
Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!
Very nice!
How does this work? Do you just stretch the image or are you using a high resolution image for the zoomer?
@Jan, if a larger image is provided in the options (“zoomSrc”) then it will be used, otherwise the image will just be stretched.
Doesnt work with Opera 9.64 =(.
@Flashr, Really? I just tested it with 9.63, 9.64 and 10 – works perfectly in all.
Hmmm, very nice plugin, although I’m never a big fan of pay-to-play scripts.
Nicely, though, it’s only a Lincoln.
A few issues in 3.5rc1, if you mouseoff the image then back over there is a strange effect where the zoom keeps flickering
ooops I forgot to say FF 3.5rc1 (but I’m sure you know that!)
Love it! Would like to see a screencast on how you made it as well some day 😀
Hi James,
great plug-in (& blog in general)! I really like the way you’ve incorporated the grey scaling stuff from your previous post, it’s a nice touch.
Have you considered using custom events instead of callbacks, as an example:
http://www.trisis.co.uk/blog/?p=235
I think it would make your widget more scalable:
Nice plugin. I see there’s a way to turn of mousewheel zoom, but if I want to use it and set it true, is there any way to stop it manually?
What I really need is user comes to site, can zoom in the picture, use the mousewheel too, but then, he would have to manually sroll down the page. Can he/she click a key or something to deactivate the mousewheel zoom, so they can naturally use the mousewheel to scroll down the page?