Main menu
WalkswithMejQueryImage Zoom Plugin with jQuery

Image Zoom Plugin with jQuery

Simple image zoom plugin with jQuery is a cloud zoom plugin. There are two versions of cloud zoom plugins are available one is older version 1.0.2 and latest version of cloudzoom v3.0 The older version of image zoom plugin have no trail concept, but the latest version have a trial message on the image. Here i just explain how we can remove or hack the trail message of cloud zoom version 3.0 and integration of both version.

sample_zoom

Image zoom plugin with jQuery

First of all we can discuss older version v1.0.2 create a file with index.html then have the following codes on its head section.


<link rel="stylesheet" href="css/cloud_zoom_old.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/colud_zoom_old.js"> </script>

And the integration is easy and only few lines of codes inside your html body section. The zoom image should inside you “a” tag and smaller image as img src.


<div>
<a onclick="javascript:;" href='images/large/image1.jpg' class ='cloud-zoom' id='zoom1' rel="zoomWidth: 421, zoomHeight: 285, adjustX: 16, adjustY:-4">
<img src="images/small/image1.jpg"  alt="" />
</a>
</div>

Its done you have integrated the cloud zoom v1.0.2 now you need a gallery too. simple follow the codes.


<div style="margin-top:10px">
<a title="sample" href="images/large/image1.jpg" rel="useZoom: 'zoom1', smallImage: 'images/small/image1.jpg'"><img  onclick="" alt="" src="images/small/image1.jpg" width="64"></a>
<a title="sample" href="images/large/image2.jpg" rel="useZoom: 'zoom1', smallImage: 'images/small/image2.jpg'"><img  onclick="" alt="" src="images/small/image2.jpg" width="64"></a>
<a title="sample" href="images/large/image3.jpg" rel="useZoom: 'zoom1', smallImage: 'images/small/image3.jpg'"><img  onclick="" alt="" src="images/small/image3.jpg" width="64"></a>
</div>

Now how to integrate image zoom plugin with jQuery or cloud zoom v3.0


<head>
<title>Cloud Zoom</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Include jQuery. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<!-- Include Cloud Zoom CSS. -->
<link rel="stylesheet" type="text/css" href="css/cloudzoom.css" />
<!-- Include Cloud Zoom script. -->
<script type="text/javascript" src="js/cloudzoom.js?v=59"></script>
<!-- Call quick start function. -->
<script type="text/javascript">
CloudZoom.quickStart();
</script>
</head>

and the body section have the following codes.


<body>
<img id="zoom1" class = "cloudzoom" src = "images/small/image1.jpg"
data-cloudzoom = "zoomImage: 'images/large/image1.jpg'" />
<div style="margin-top:10px">
<a href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg">
<img width="64" data-cloudzoom="
useZoom:'#zoom1',
image:'images/small/image1.jpg',
zoomImage:'images/large/image1.jpg'" alt="Cloud Zoom thumb image" title="Product Name" src="images/small/image1.jpg">
</a>
<a href="images/large/image2.jpg">
<img width="64" data-cloudzoom="
useZoom:'#zoom1',
image:'images/small/image2.jpg',
zoomImage:'images/large/image2.jpg'" alt="Cloud Zoom thumb image" title="Product Name" src="images/small/image2.jpg">
</a>
<a href="images/large/image3.jpg">
<img width="64" data-cloudzoom="
useZoom:'#zoom1',
image:'images/small/image3.jpg',
zoomImage:'images/large/image3.jpg'" alt="Cloud Zoom thumb image" title="Product Name" src="images/small/image3.jpg">
</a>
</div>
</body>

Hack for removing Trial Version Message !

All done after the integration you will see a message on the image this is a trial version how to remove this message ? simple just add css style with following codes.


/* Hack for the trail message */
.cloudzoom-lens + div{
display:none;
visibility:hidden;
z-index:-1;
opacity:0;
filter:  alpha(opacity=0);/* For IE fix */
}

This hacks will work IE7 and above + all modern browsers. Would you like a demo?

demo_image   enjoy the image zoom with jQuery  :):):)

Download1577 downloads

 

13 thoughts on “Image Zoom Plugin with jQuery

  1. Hello, I just like to say your tutorial is really great! I really love it! I like to ask if it’s possible to larger the zoom window and even the image window? I really don’t know how to do it, please give me instructions how I can change it.
    Thanks so much in advance!

    1. This is simple hack bro.

      from Css these are simple things.
      display : none hide the demo version message. (But in faact from JS code they are activating it again so this line alone will not work)
      visibility also do the same thing but from JS they also do the same stuff :(.

      So here is the tricky part.
      z-index: -1 and opacity: 0 ,
      z-index: -1 means the message div just place just below the image layer.
      opacity 0 means the element is not visible in the page even if exist.

      so all these line will just make sure hack is perfect :) :)

    1. This is a demonstration of the jQuery cloud zoom plugin you can download and use it any where you want , Integration is upto you. If you are using Joomla + VM shop then you can try my Virtuemart Zoom plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

FacebookTwitterGoogle+RSS