Creating Product Catalog With jQuery Zoom-In

One of the ways to convince buyers about your online product is to let him/her have a close look at it. This means you need to provide a more detailed image of the product which a potential buyer can see upon clicking a link, which most probably is a smaller image of the same product.

A refined way of showing bigger image of a product can be achieved by jQuery zoom-in effect, whereby as you hover mouse on the smaller image, the bigger image comes to view in an adjacent space on the same webpage.

To understand the concept, look at the following 2 examples. In each there is an image of Kawasaki motor-cycle in the left box whose specs are given in the right box.

Now, just hover your mouse on the left image, and as you do it observe that in the right the specs are replaced by a larger image of the one on the left. Move your mouse out, and the specs come back again. Scroll the image horizontally for better viewing if necessary.

 

 


The jQuery zoom-in example shown here is courtesy jQZoom Evolution by Engineer Renzi Marco of Mind-Projects. Renzi has documented the details of his creation in his site along with the free download of the script.

If you wish to see another similar zoom-in example in a product catalog, click here.

A different way – but perhaps slightly less attractive – of making catalog can be seen in our article on jquery online catalog.

Okay, let us now first turn to the video tutorial below, followed by the how-to-do steps.

 

How To Do It For Your Website

Like our previous example of zoom-in effect, here too you’ll need 2 images – one smaller, the other bigger – of the same item. The smaller one is shown on the webpage, while the bigger one comes in only when a visitor hovers mouse on the smaller image.

The steps to accomplish the zoom-in effect are as under:

  1. Download the jQZoom Evolution script from Mind-Projects website, and unzip it. Among the files unzipped, 3 are going to be used. They are the 2 JavaScript files – the jQuery library and the Renzi Marco’s jQZoom – and the jQZoom CSS file.
  2.  

  3. For every product to be displayed you need to have 2 images from the source, one smaller, the other bigger.
  4.  

  5. Make changes in ‘jQZoom.js’ as necessary. For the reverse zoom-in above, I’ve made the changes highlighted below:
    {
            var settings = {
                zoomType: 'reverse', //standard/reverse/innerzoom
                zoomWidth: 300,  //zoomed width default width
                zoomHeight: 215,  //zoomed div default width
                xOffset: 10,  //zoomed div default offset
                yOffset: 1,
                position: "right" ,   //zoomed div default position;
                lens:true, //zooming lens over image, default is 1;
    			lensReset : false,
    			imageOpacity: 0.2,
    			title : false,
    			alwaysOn: false,
    			showEffect: 'show',
    			hideEffect: 'hide',
    			fadeinSpeed: 'fast',
    			fadeoutSpeed: 'slow',
    			preloadImages :true,
    			showPreload: true,
    			preloadText : '',
    			preloadPosition : 'center' //bycss
    };
  6.  

  7. The ‘jQZoom.css’ will also change as below:
    .jqZoomPup
    {
    		overflow:hidden;
    		background-color: #fff;
    		-moz-opacity:0.6;
    		opacity: 0.6;
    		filter: alpha(opacity = 60);
    		z-index:10;
    		border-color:#fff;
    		border-style: solid;
    		border:0;
    		cursor:crosshair;
    }
    
    .jqZoomPup img
    {
    	border: 0px;
    }
    
    .preload{
    	-moz-opacity:0.8;
    	opacity: 0.8;
       filter: alpha(opacity = 80);
    	color: #333;
    	font-size: 12px;
    	font-family: Tahoma;
       text-decoration: none;
    	border: 0px solid #CCC;
       /*background-color: white;*/
       padding: 8px;
    	text-align:center;
       background-image: url(zoomloader.gif);
       background-repeat: no-repeat;
       background-position: 43px 30px;
    	width:90px;
    	* width:100px;
    	height:43px;
    	*height:55px;
    	z-index:10;
    	position:absolute;
    	top:3px;
    	left:3px;
    
    }
    
    .jqZoomWindow
    {
    	border: 0px solid #d0d0d0;
    	background-color: #FFF;
    }
  8.  

  9. Now, write the HTML code. Remember when the small images is hovered on, the magnified image will simply replace whatever is there on the right, separated by 10px as selected in the jQZoom JavaScript file. The HTML code as used for reverse zoom-in is given below for reference.
  10.  

  11. Finally, upload 6 files to your server – 2 JS, 2 images, 1 CSS, and the HTML file.


The HTML Code

<html><head>

<title>Product Catalog With Reverse Zoom-In Using jQZoom Evolution</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.jqzoom1.0.1.js" type="text/javascript"></script>

<link rel="stylesheet" href="jqzoom.css" type="text/css">


<script type="text/javascript">

$(function() {
	$(".jqzoom").jqzoom();
});
</script>


</head>

<body style="margin:0; padding:0;">

<h2 style="margin:5px 0; font:normal 17px calibri,verdana,arial; color:#984B06;">
Product Catalog With <strong>Reverse</strong> jQuery Zoom-In</h2>


<div id="content" style="margin-top:5px;margin-left:0px;">

<a href="kawasakigreen.jpg" class="jqzoom">
<img src="kawasakigreen_small.jpg" style="border:1px solid #d0d0d0;">
</a>

<div style="position:absolute;left:309px;top:0px;width:300px;height:215px;background:#efe;border:1px solid #d0d0d0;">

<center><h2 style="width:170px; margin:5px auto 15px; text-align:center; font:normal 19px calibri,verdana,arial; color:#990; border-bottom:1px dashed #660;">
Kawasaki Motor Cycle</h2></center>

<p style="margin:0 10px 10px; font:normal 14px calibri,tahoma,arial; text-align:justify;">
<strong>Brand:</strong> Kawasaki 1000</p>

<p style="margin:0 10px 10px; font:normal 14px calibri,tahoma,arial; text-align:justify;">
<strong>Color:</strong> Lemon Green</p>

<p style="margin:0 10px 10px; font:normal 14px calibri,tahoma,arial; text-align:justify;">
<strong>Warranty:</strong> Depends on location</p>

<p style="margin:0 10px 10px; font:normal 14px calibri,tahoma,arial; text-align:justify;">
<strong>Price:</strong> Negotiable >> <a href="">Buy Now!</a></p>

<p style="margin:0 10px 10px; font:normal 14px calibri,tahoma,arial; text-align:justify;">
<strong>Hover mouse on the left image</strong> to view more details of the motor cycle. For any query, don't hesitate to contact us.
</p>

</div>

</div>


</body></html>

Comments

  1. Onur says

    Hi,
    thanks for video about jqzoom.
    I have a problem about using it. I want to make an image gallery with thumbnails. I have 3 sizes of images.
    1. small for thumbnail
    2. normal for main image area
    3. big for jqzoom
    when user clicks to thumbnail then main image will change and then when mouse over it then jqzoom will work and make zoom.
    But I tried many things but could not be successful. I don’t know jquery. Just can you give me an idea about how can I change jqzoom image in runtime ? I tried that codes :

    $(document).ready(function(){
    var options = {
    zoomWidth: 300, zoomHeight: 250,
    xOffset: 0, yOffset: 0,
    position: “right”
    };
    $(“.thumbnails li img”).click(function(){
    window.status = $(this).attr(“src”);
    document.getElementById(“MYCLASS”).href = $(this).attr(“buyuk”);
    $(‘.MYCLASS’).jqzoom().remove();
    $(‘.MYCLASS’).jqzoom(options);
    });

  2. says

    i have small doubt…..
    if i click on the image it should be show full image with pop up… is it possible then how to do that …… i am developer i want to impalement this in our site

  3. Jason says

    One issue with this…
    It works great with standard and reverse but not with innerzoom. I just need to change to zoomtype and it should work right?

Leave a Reply

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