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>
  • http://www.scribd.com/doc/19000244/Mcdonalds-Coupons mcdonalds coupons

    Thank you much for this great entry.

  • http://www.review-finder.com Jane

    Good read, thanks. Always looking out for weird and wonderful stuff to read :)

  • Pingback: AnythingZoomer jQuery Plugin | 崔凯,关注网站设计、前端开发

  • Pingback: AnythingZoomer jQuery Plugin | 崔凯,关注网站设计、前端开发

  • http://www.eliseusb.com Eliseusb

    Hi, thanks for this post, i like 2webvideo, sorry my english, im portuguese designer.[]´s

    • Partha

      Thanks very much. If you or your friends have needs for web video, you’re most welcome to let us know.

      Partha

    • http://filmy-polskie.blogspot.com/ Asia

      Bardzo interesujący wpis zapraszam do odwiedzenia mojej strony :).

      • partha

        Dziękuję. Czy odwiedzenia witryny, gdy czas pozwoli ..

  • Pingback: Best jQuery Image Zoom and Techniques | denbagus blog

  • Pingback: Best jQuery Image Zoom and Techniques | denbagus blog

  • Onur

    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);
    });

  • http://ironstop.com pradeep

    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

  • SF

    High Resolution jQuery Image Viewer – http://www.ajax-zoom.com

  • http://hajkigokamnta.com Rhett Olson

    Hello, really good entry, I was always wondering if it is true. Finally I know it, thanks to you :) PS Really nice blog template is it “homemade” or free? :D

  • Jason

    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?

  • Pingback: CSS / Jquery / Flowplayer Small Project - ScriptLance Programming Project