# Zoom-In Product Photo Script



## spiros_saf (Aug 25, 2009)

I have seen some people requesting for a script that will let the user Zoom-In the photo of a product so as to see the product's details clearly.

So, Here it is!

Click HERE to see a demo

And click HERE to download the project's files and source code!

Tested at:
Opera 10, Firefox 3.0.15, Safari 4.0.3 and IE 8.0.6

Here are the installation instructions contained at the ReadMe.txt file which is in the project-files folder:

1) In order to make the script work enter the following to the HEAD of your page and set the variables as explained by the comments:


```
//Needed Variables
var small_images_width = 116; //Enter value in pixels
var small_images_height = 136; //Enter value in pixels
var small_images_name = 'images/small.jpg'; //Enter filename with path

var big_images_width = 427; //Enter value in pixels
var big_images_height = 500; //Enter value in pixels
var big_images_name = 'images/big.jpg'; //Enter filename with path
```
2) Make Sure that zoom_in.js is in the same folder as your html scripts.

3) Make a div with the following code:


```

```
4) Position the div wherever you want the photo to be displayed in your website

5) Enjoy!

If there will be a decent number of people showing interest in this script, I may extend it a little bit so as to be able to add more than one "zoomable" photo on each page.

You don't have to leave any copyright notices if you don't want to, but at least let me know where you've used it!


----------

