[ShishaPipeUK]

OK I wanted to have a ZOOM IN icon near the product image, so that you can see a larger image of the product.

You can see a picture below:

http://www.shisha.co.uk/images/zoom_in.jpg

The zoom in image is provided here for you http://www.shisha.co.uk/shopcart/skin1/images/zoom1.gif right click this image and save this in your shopcart/skin1/images/zoom1.gif

I decided to use javascript and I used a file called zoombox.js and saved this at shopcart/skin1/zoombox.js - Below is the Java script:

// Zoom into the picture - Save as /shopcart/skin1/zoombox.js 
// To use, call this at the bottom of the shopcart/skin1/customer/main/product.tpl body section.
// Just before the table end - <script language="JavaScript" src="{$SkinDir}/zoombox.js"></script > </TABLE>


var maxW,maxH,fromX,fromY,toX,toY,adjX,adjY,zBox,zStep=0,zLink,zNew;

function zoomBox(evt,zlink,maxw,maxh,tox,toy) {
	if (arguments.length > 2) zNew=1;
	scrollH=(window.pageYOffset!=null)?window.pageYOffset:document.body.scrollTop;
	maxW=maxw?maxw:window.innerWidth?innerWidth:document.body.clientWidth;
	maxH=maxh?maxh:window.innerHeight?innerHeight:document.body.clientHeight;
	toX=tox?tox:0;
	toY=(toy?toy:0)+scrollH;
	fromX=evt.pageX?evt.pageX:evt.clientX;
	fromY=(evt.pageY?evt.pageY:evt.clientY)+(document.all?scrollH:0);
	adjX=toX+evt.screenX-fromX;
	adjY=toY+evt.screenY-fromY;
	if (document.createElement && document.body.appendChild && !zBox) {
		zBox=document.createElement("div");
		zBox.style.position="absolute";
		document.body.appendChild(zBox);
	} else if (document.all && !zBox) {
		document.all[document.all.length-1].outerHTML+="<div id=zBoxDiv style=position:absolute></div>";
		zBox=document.all.zBoxDiv;
	} else if (document.layers && !zBox) {
		zBox=new Layer(maxW);
		zBox.style=zBox;
	}
	zLink=zlink;
	doZoom();
}

function doZoom() {
zStep+=1;
zPct=(10-zStep)/10
	if (document.layers) {
		zBox.moveTo(toX+zPct*(fromX-toX),toY+zPct*(fromY-toY));
		zBox.document.open();
		zBox.document.write("<table width="+maxW*(1-zPct)+" height="+maxH*(1-zPct)+" border=2 cellspacing=0><tr><td></td></tr></table>");
		zBox.document.close();
		} else {
		zBox.style.border="2px solid #999999";
		zBox.style.left=toX+zPct*(fromX-toX);
		zBox.style.top=toY+zPct*(fromY-toY);
		zBox.style.width=maxW*(1-zPct);
		zBox.style.height=maxH*(1-zPct);
	}
	zBox.style.visibility="visible";
	if (zStep < 10) setTimeout("doZoom("+fromX+","+fromY+","+toX+","+toY+")",30);
	else {
		zBox.style.visibility="hidden";
		zStep=0;
		if (zLink && !zNew) location.href=zLink.href;
		else if (zLink && zNew) {
			var w=window.open(zLink.href,"","width="+maxW+",height="+maxH+",left="+adjX+",top="+adjY+",No,resizable");
			zNew=null;
		}
	}
}

Then I needed to call this code in the body section of the product.tpl file at shopcart/skin1/main/product.tpl - I placed the code just before the last </table> at the end of the file:

<script language="JavaScript" src="{$SkinDir}/zoombox.js"></script>

</TABLE>

Also in the same file shopcart/skin1/main/product.tpl near the top you will find:

<TD valign="top" align="left">
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail"}
</TD>

Replace this with:

<TD valign="top" align="left">
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail"}

[img]{$ImagesDir}/zoom1.gif[/img]
				  
</TD>

I like the way that this opens up to view the file.

The page can be viewed at www.shisha.co.uk/shopcart/product.php?productid=16139&cat=265&page=1

Thanks, regards Paul.