Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Zoom into a image javascript mod for product.tpl

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 04-01-2006, 06:43 PM
  ShishaPipeUK's Avatar 
ShishaPipeUK ShishaPipeUK is offline
 

Senior Member
  
Join Date: Jul 2005
Location: London, England.
Posts: 118
 

Default 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.
__________________
Apache/2.0.55 (Red Hat) & MYSQL Server: 5.0.24
PERL: 5.008005 / PHP: 4.4.4 - 4.3.1 X-CART

Shop carts at
http://www.nightscene.co.uk/shop/home.php
http://www.theshisha.net/shopcart/home.php
http://www.system-maintenance.com/maint/home.php
http://www.tabac4u.com
Reply With Quote
  #2  
Old 04-01-2006, 10:31 PM
 
Lionel Lionel is offline
 

Senior Member
  
Join Date: Dec 2005
Posts: 199
 

Default

consider the TelaFirma mod to that and more ...
__________________
X-Cart Gold 4.0.17 [unix]
X-Cart Gold 4.0.18 [unix]
Reply With Quote
  #3  
Old 04-02-2006, 05:51 AM
 
cotc2001 cotc2001 is offline
 

X-Man
  
Join Date: Feb 2003
Location: Shrewsbury, UK
Posts: 2,351
 

Default

Also yours triggers my popup blocker in firefox.

AS above said try teleafirmas or what im doing is getting x-cart to quote for implementing zoomify into our site

www.zoomify.com
__________________
x-cart 4.0.5 (live and heavily modded)
Server: freebsd
Reply With Quote
  #4  
Old 04-06-2006, 03:33 PM
  ShishaPipeUK's Avatar 
ShishaPipeUK ShishaPipeUK is offline
 

Senior Member
  
Join Date: Jul 2005
Location: London, England.
Posts: 118
 

Default

Thanks for the advice.

Just to let you know i found the correct line i needed to correct., i have also changed the 1st post as well to reflect this.

Code:
{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]
__________________
Apache/2.0.55 (Red Hat) & MYSQL Server: 5.0.24
PERL: 5.008005 / PHP: 4.4.4 - 4.3.1 X-CART

Shop carts at
http://www.nightscene.co.uk/shop/home.php
http://www.theshisha.net/shopcart/home.php
http://www.system-maintenance.com/maint/home.php
http://www.tabac4u.com
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 11:47 AM.

   

 
X-Cart forums © 2001-2020