Rbista Zoom

Instructions :

Reference the CSS ( RbZoom.css ) and Javascript ( RbZoom.js ) files in the <head> of your page.
Zoom an image by linking your small image to your zoom image with the CSS class of "RbZoom". See the example HTML below

Your code should look something like this :

<html>

<head>

<title>Rbista Zoom</title>

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

<script type="text/javascript" src="RbZoom.js"></script>

</head>

<body>

<a href="zoom-image.jpg" class="RbZoom"><img src="small-image.jpg"/></a>

</body>

</html>

Customization :

Zoomed area position

Change the position of the zoomed area to either top/right/bottom/left by adding the rel attribute to your <a> tag. The default position is right. Example code :

Add Products Thumbnails

You can display different images of a product by adding the id of Thumbnails block to the rel attribute of the main image link. Example code :

<a href="zoom-image-1.jpg" rel="small-image-1.jpg"> <img src="thumb-image-1.jpg" alt=""/> </a>

<a href="zoom-image-2.jpg" > rel="small-image-2.jpg"> <img src="thumb-image-2.jpg" alt=""/> </a>

</div>

Notice : you can add the thumbs an position to the rel attribute of the main image link . Exemple rel="position:bottom ; thumbs:ThumbsBlockId"

Js Configuration :

var zoomAreaWidth = '300px'; // Zoom Area Width in pixel !

var zoomAreaHeight = '300px'; // Zoom Area Height in pixel ! ;

var loadingImg = 'images/loading.gif'; // Zoom Loading Image

var thumbFadeSpeed = 9; // Thumbnails fading Speed (1 ~ 10)

Thank you for purchasing our product.Enjoy !