X-Cart forums - Zoom into a image javascript mod for product.tpl

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:

Code:

// 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:

Code:

<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:

Code:

<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:

Code:

<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.