ImgZoom 0.1

Here’s yet another jQuery plugin made by yours truly. ImgZoom creates a smooth zoom effect for thumbnailed images by doing a graceful transition from the thumbnail to the full-size image. Feel welcome to take a look at the live demo.

There are already a few jQuery plugins that do this, but as far as I know they all achieve the zoom effect by gradually changing the dimensions of HTML image elements. ImgZoom, on the other hand, utilizes the vector graphics capabilities found in browsers (including Internet Explorer), which results in really smooth animation and allows for additional effects to be incorporated into the process.

I’m releasing the plugin a bit early, as it only has about half of the functionality that I intend to implement. My long-term evil plan is to make the plugin a viable alternative to Lightbox et al, with prev/next links, keyboard support and such. Anyway, I’ll be happy to get some feedback on this premature 0.1 release — let me know if you like the plugin, whether you think it would be useful, and what features you would like to see in future versions.

7 Responses to “ImgZoom 0.1”

  1. Ian says:

    Very nice, smooth plugin – I just wish there was a way to add a caption to the image. (like fancyzoom)

  2. Michal Wojciechowski says:

    @Ian: This will surely be added in the next version, along with a number of other features. I just need some more spare time to work on it.

  3. Ashish says:

    hello Michal!
    I find the zoom effects really outstanding! Great Work.
    1. Wish to know if the effects can be achieved using mouseover instead of the click. If yes, could you tell me how?
    2. May I use your plugin on my site/s commercial in nature? If yes, do I have to pay? I tried reading into the license but could never find a simple ‘yes’ or ‘no’ for an answer to my question.

  4. Michal Wojciechowski says:

    @Ashish:
    As for 1, it is possible using some API calls:

    $('img').hover(
        function () {
            if (!$.imgZoom.animating)
                $(this).imgZoom({ instance: true }).zoomIn();
        },
        function () {
            if (!$.imgZoom.animating)
                $(this).imgZoom({ instance: true }).zoomOut();
        });


    I need to update the documentation to include these API calls.

    For 2, the short answer is “yes” :-) You can use the plugin in a commercial website, and you don’t have to pay anything.

  5. Ashish says:

    That’s great, Michal!
    Thanks you for the great response to both of my questions!!
    Now I am doubly happy!!

  6. Ashish says:

    Michal,

    For now I am using the script as is i.e. on click, as I discovered that it is difficult for my knowledge level to work with API calls. Could you provide the “on-mouseover” version in the solution just the way you have provided for “on-click” version? It will be of great help.

    Also, could you develop a version wherein a thumbnail image on click opens a DIV with the same effect (instead of openeing a larger image on click of the samller thum?)? (For my requirement), the DIV could contain a flash which starts playing in full size on click of the smaller thumnail image.

    Awaiting your response!

  7. Michal Wojciechowski says:

    @Ashish:
    I’ll think about adding the alternative mouseover behavior in the next version.

    As for your second request, I imagine it could be implemented with a thumbnail image of the flash animation, i.e. you would actually zoom in the thumbnail to get the full-size image, then when the zoom-in animation completes, the flash object would be placed on top of the image. However, this requires the use of some callback functions that would be fired when the zoom animation finishes (like onZoomIn and onZoomOut), and these are not implemented yet (but they will surely be added in the next version).

    By the way, sorry for the late response — I’ve had much too much real-life work in the last few days. Oh, the joys of running your own business…

Leave a Reply