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.
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?
enjoy the image zoom with jQuery 🙂 🙂 🙂
12 thoughts on “Image Zoom Plugin with jQuery”
Heyyy….Can you just explain me the hack you have done with CSS…
its fantastic
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 🙂 🙂
That worked super fine, do you have any idea how to implement this asp.net mvc?
Its pure html and Js you can implement it in any coding. 🙂
thnx for the help guys… very very thnks..
hey that was pure awesome work bro. that hacking part. thank you for share
Pls tell me how to install it,after downloading from your site,wether i have to modify it.
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.
ThanksDude…
Always welcome, Friend..
I liked the fiinal point of “css hack code” you are simply superb. thank you so much. I liked it alot.
Thanks for your responds Rahiem.