jQuery picture zoom

How to make jQuery picture zoom effect in a simple way. This jQuery image zoom effect you can easy add to your web or maybe to blogger's post. On this blog you can find more useful jscript effect tutorials.

Let's first take a look how jQuery picture zoom look like:

So when visitor hover a mouse over small picture zoom portion of that image appeared on right side with help of jQuery. On mouseover, image is zoomed! I believe that this is one of the simplest implementation of picture zoom effect you can find on Internet.

To accomplish picture zoom with jQuery like in demo you need to add this code on your web page:

<script src="[PathToJqueryFile]" type="text/javascript"></script>

<script src="[PathTojqzoomFile]" type='text/javascript'></script>

<script type="text/javascript">

    $(function () {
        var options =
{
    zoomWidth: 275,
    zoomHeight: 275
}
        $(".jqzoom").jqzoom(options);

        var options2 =
{
    zoomWidth: 275,
    zoomHeight: 275,
    zoomType: 'reverse'
}

        $(".jqzoom2").jqzoom(options2);

    });
</script>
<!--JQZOOM-STOPS-HELP@-http://bloggerstop.net-->

<a href="[PathToBiggerImage]" class="jqzoom" style="" title="Paris">

  <img src="[PathToSmallerImage]"  title="kawasakigreen" style="border: 1px solid #666;"><br />
</a>

You can copy code above and replace green words with real values:

• [PathToJqueryFile] - path to jquery-1.3.2.min.js file. You must have this file to implement any jQuery functionality on your web site. You can download this file here.


• [PathTojqzoomFile] - path to jquery.jqzoom1.0.1.js file. This file is needed for zoom functionality. You can download this file here.


• [PathToBiggerImage] - path to image that will be displayed as a zoomed part of picture (in example it is zoomed portion of image which appear on the right side of the screen)


• [PathToSmallerImage] - path to image that will be displayed as a image that you can move cursor over it (in example this is left picture)

In the end, here is some real code that works but please use it just for testing purpose. If you want to implement jquery picture zoom fuctionallity on you page, please, do not use paths you find on demo code below but download jqury files and upload them somewhere.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://nikofer.opendrive.com/files/54142960_wVVW5/jquery.jqzoom1.0.1.js" type='text/javascript'></script>

<script type="text/javascript">

    $(function () {
        var options =
{
    zoomWidth: 275,
    zoomHeight: 275
}
        $(".jqzoom").jqzoom(options);

        var options2 =
{
    zoomWidth: 275,
    zoomHeight: 275,
    zoomType: 'reverse'
}

        $(".jqzoom2").jqzoom(options2);

    });
</script>
<!--JQZOOM-STOPS-HELP@-http://bloggerstop.net-->

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8KHDSFc9LUf7Z8GIo920lA6j_EjMvQOCvQcT5puVzZoH3-i_MYjha2w4Siej9wd2utJSwagutC5UHGDvYZcV2dgGq0kI8dn5GsF1PPpYakYosgenP59zW69JohD-Ai3e-Zws-w46YYE/s800/SealSmall.jpg" class="jqzoom" style="" title="Paris">

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KDEWmLwz2Mx5wo-3cBnjNn-4e_HPYx6xzeMAikXolzag2JN7SJcO21oMpe-R_k9pW_wIusC1YjgnrLHPn74FHrspa1DpeSs-QKgF4nKkRli8dMH7V-mxipLbY95SMVgcIeXqJng0Tnk/s144/SealBig2.JPG"  title="kawasakigreen" style="border: 1px solid #666;"><br />
</a>