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

Detailed Image(s) Popup 2.1 [3.4.x-4.0.x]

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 07-14-2004, 02:51 PM
  B00MER's Avatar 
B00MER B00MER is offline
 

X-Guru
  
Join Date: Sep 2002
Location: Keller, TX (Cart-Lab.com)
Posts: 3,165
 

Default Detailed Image(s) Popup 2.1 [3.4.x-4.0.x]

8/17/04: Initial cetner popup removed. Orderby column now used in the sql query. Images larger than users screen will push the window to only go as large as screen.width and screen.height will allow. Also next and previous buttons added to top of popup as well. Code has also been cleaned up of typos and other errors.

8/11/04: Added Center initial popup, as well as looping around images, so next image and previous image always display something new to the viewer instead of stopping at the end.

UPDATE: Added this script to cart-lab.com for those who need a demo of the script in action:
http://www.cart-lab.com/lab/customer/product.php?productid=43

Since the release of X-Cart 4.0, I decided to redo my detailed images popup mod adding some new features along the way. Some new features include auto window resizing to fit each detailed image associated with a particular product.

Written with X-Cart 3.5.9 this code SHOULD Work with X-Cart 4.0, I've not tested it so anyone who wants feel free to post your findings.

This mod has been tested on IE6.0 SP2, Latest Mozilla FireFox v0.8 and Netscape 7.1.

However there are transations that are in effect for IE5.5+ users. You can see this in action here:
http://dynamicdrive.com/dynamicindex14/dhtmlslide.htm

Step 1) Save the below file to xcart/customer/product_detailed_images.php
Code:
<?php # # Detailed Images Popup # Version 2.1 # http://www.cart-lab.com # info@cart-lab.com # (C)opyright 2003-2004 CartLab, all rights reserved. # Full license at: http://www.cart-lab.com/license.php # require "./auth.php"; # # Collect product images # $images = func_query("select * from $sql_tbl[images] where productid='$productid' order by orderby,imageid"); # Find max width and total height of all collected images (currently not used) foreach($images as $k=>$v) { foreach($v as $kk=>$vv) { if($kk=="image_x") { if($maxwidth >= $previous_maxwidth) { $maxwidth=$vv; } $previous_maxwidth=$vv; } elseif($kk=="image_y") { if($maxheight >= $previous_maxheight) { $maxheight=$vv; } $previous_maxheight=$vv; } } } $smarty->assign("winw",$maxwidth); $smarty->assign("winh",$maxheight); $smarty->assign("images",$images); $smarty->display("customer/main/product_images.tpl"); ?>

Step 2) Save the below file as xcart/skin1/detailed_popup_js.tpl

Code:
{*** # Detailed Images Popup # Version 2.1 # http://www.cart-lab.com # info@cart-lab.com # (C)opyright 2003-2004 CartLab, all rights reserved. # Full license at: http://www.cart-lab.com/license.php ***} {if $active_modules.Detailed_Product_Images ne "" && $images} {literal} <SCRIPT language=JavaScript1.2> <!-- function productimagedetail(product_id) { var w = 120; var h = 120; var center = ',left = 387,top = 309'; window.open('{/literal}{$catalogs.customer}{literal}/product_detailed_images.php?productid='+product_id,"detailedproduct","width="+w+",height="+h+",resizable,scrollbars=yes,status=no'"); } --> </SCRIPT> {/literal} {/if}

Step 3) Save the below code as: xcart/skin1/customer/main/product_images.tpl

Code:
{*** # Detailed Images Popup # Version 2.1 # http://www.cart-lab.com # info@cart-lab.com # (C)opyright 2003-2004 CartLab, all rights reserved. # Full license at: http://www.cart-lab.com/license.php ***} {if $images ne ""} { config_load file="$skin_config" } <html> <head> <title>Detailed Image(s) - {$lng.txt_site_title}</title> {include file="meta.tpl"} <link rel="stylesheet" href="{$SkinDir}/{#CSSFile#}"> <SCRIPT language=JavaScript1.2> <!-- // Initial Resize var h = {$images[0].image_y}+{if $images[1].imageid ne ""}85{else}40{/if}; var w = {$images[0].image_x}+30; // make sure size isn't bigger than users screen {literal} if(h>=screen.height) { h=screen.height-30; } if(w>=screen.width) { w=screen.width; } {/literal} window.resizeTo(w,h); // Vars var photos=new Array() var photos_width=new Array() var photos_height=new Array() var which=0 // Images {section name=image loop=$images} photos[{%image.index%}]="{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}" photos_width[{%image.index%}]="{$images[image].image_x}" photos_height[{%image.index%}]="{$images[image].image_y}" {/section} {literal} var preloadedimages=new Array() for (i=0;i<photos.length;i++){ preloadedimages[i]=new Image() preloadedimages[i].src=photos[i] } function applyeffect(){ if (document.all && photoslider.filters){ photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23) photoslider.filters.revealTrans.stop() photoslider.filters.revealTrans.apply() } } function playeffect(){ if (document.all && photoslider.filters) photoslider.filters.revealTrans.play() } function backward(){ if (which>0){ which-- } else { which=photos.length-1; } applyeffect() document.images.photoslider.src=photos[which] newWidth=parseInt(photos_width[which])+30; newHeight=parseInt(photos_height[which])+85; if(newHeight>=screen.height) { newHeight=screen.height-30; } if(newWidth>=screen.width) { newWidth=screen.width; } window.resizeTo(newWidth,newHeight) playeffect() } function forward(){ if (which<photos.length-1){ which++ } else { which=0; } applyeffect() document.images.photoslider.src=photos[which] newWidth=parseInt(photos_width[which])+30; newHeight=parseInt(photos_height[which])+85; if(newHeight>=screen.height) { newHeight=screen.height-30; } if(newWidth>=screen.width) { newWidth=screen.width; } window.resizeTo(newWidth,newHeight) playeffect() } //--> </script> {/literal} </head> <body LEFTMARGIN=0 TOPMARGIN=0 RIGHTMARGIN=0 BOTTOMMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> <TABLE WIDTH="100%" HEIGHT="100%" CELLPADDING=0 CELLSPACING=0 BORDER=0><TR><TD align="center" class="VertMenuBorder"> <table border="0" cellspacing="0" cellpadding="0"> {if $images[1].imageid ne ""} <tr class="VertMenuBox"> <td width="50%" height="21" onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;" onMouseOver="'"><p align="left">[img]{$ImagesDir}/larrow.gif[/img] Previous</td> <td width="50%" height="21" onClick="javascript:forward();return false;" style="cursor:pointer;cursor:hand;"><p align="right">Next [img]{$ImagesDir}/rarrow.gif[/img]</td> </tr> {/if} <tr> <td width="100%" colspan="2" height="22" align="center"><center><A HREF="javascript:window.close();"> {literal} <script> document.write('[img]'+photos[0]+'[/img]') </script> {/literal} </center></a></td> </tr> {if $images[1].imageid ne ""} <tr class="VertMenuBox"> <td width="50%" height="21" onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;" onMouseOver=""><p align="left">[img]{$ImagesDir}/larrow.gif[/img] Previous</td> <td width="50%" height="21" onClick="javascript:forward();return false;" style="cursor:pointer;cursor:hand;"><p align="right">Next [img]{$ImagesDir}/rarrow.gif[/img]</td> </tr> {/if} </table> </TD></TR></TABLE> </body> </html> {else} No Image(s) Found! {/if}

Step 4) Edit xcart/skin1/customer/main/product.tpl and locate the following code:

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}

Replace it with the following code snippet:

Code:
{*** Detailed Image Popup mod by www.cart-lab.com ***} {include file="detailed_popup_js.tpl"} {if $active_modules.Detailed_Product_Images ne "" && $images}{strip}<A HREF="javascript: productimagedetail({$product.productid});">{/strip}{/if} {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} {if $active_modules.Detailed_Product_Images ne "" && $images}{strip} <CENTER>[img]{$ImagesDir}/preview.gif[/img]View Details</CENTER></A>{/strip}{/if} {*** Detailed Image Popup mod by www.cart-lab.com ***}

Step 5) You will need to remove the following code from the same product.tpl file to keep the detailed images from showing up on the details page:

Code:
{if $active_modules.Detailed_Product_Images ne ""} {include file="modules/Detailed_Product_Images/product_images.tpl" } {/if}

Either remove it or {* comment *} it out.

If you find this mod useful please feel free to donate:
http://www.cart-lab.com/lab/customer/help.php?section=about
__________________
Cart-Lab - 100+ Social Bookmarks for X-Cart.
Reply With Quote
  #2  
Old 07-15-2004, 01:11 AM
 
funkydunk funkydunk is offline
 

X-Man
  
Join Date: Oct 2002
Location: Cambridge, UK
Posts: 2,210
 

Default

good work Boomer - nice code and thanks
__________________
ex x-cart guru
Reply With Quote
  #3  
Old 07-16-2004, 09:50 AM
  DataViking's Avatar 
DataViking DataViking is offline
 

eXpert
  
Join Date: Jan 2003
Location: Las Vegas, NV
Posts: 361
 

Default

very nice, thank you
__________________
Web Design Web Design and Custom X-Cart Projects

http://www.dataviking.com

Mention the forums for discounts!
x-cart Version 4.1.8
Reply With Quote
  #4  
Old 07-16-2004, 11:02 AM
 
laureon laureon is offline
 

Senior Member
  
Join Date: Oct 2003
Posts: 171
 

Default

I was about to hack through version 1 of this mod! - Thanks very much BOOMER
__________________
X-Cart Gold Version: 4.0.17
X-Configurator
X-AOM
X-FancyCategories
X-RMA
X-Offers
Reply With Quote
  #5  
Old 07-16-2004, 11:40 AM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

Default

I tried it as-is on v4, and got this error:

Code:
Fatal error: Smarty error: [in customer/main/product.tpl line 13]: syntax error: mismatched tag {/if}. expected {/strip} (opened line 13). (Smarty_Compiler.class.p in C:\Inetpub\wwwroot\pathtoxcart\Smarty-2.6.3\Smarty.class.php on line 1082
Reply With Quote
  #6  
Old 07-16-2004, 04:23 PM
  B00MER's Avatar 
B00MER B00MER is offline
 

X-Guru
  
Join Date: Sep 2002
Location: Keller, TX (Cart-Lab.com)
Posts: 3,165
 

Default

I updated the initial posting with a new product.tpl bit of code, let me know if it does the trick, you can always try and remove the {strip} and {/strip} tags to see if it helps.
__________________
Cart-Lab - 100+ Social Bookmarks for X-Cart.
Reply With Quote
  #7  
Old 07-17-2004, 03:25 AM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

Default

That works Boomer, but you have to put the product_detailed_images.php file in the xcart root, not xcart/customer.

The inital popup window isn't auto-resized, but if you manually re-size the window and click 'Next Image' it does auto-resize the next window.
Reply With Quote
  #8  
Old 07-20-2004, 07:33 AM
 
MOC MOC is offline
 

Senior Member
  
Join Date: Oct 2002
Posts: 171
 

Default

Using it in 3.5.9 VERY NICE MOD !!!

Reply With Quote
  #9  
Old 07-20-2004, 08:38 AM
  B00MER's Avatar 
B00MER B00MER is offline
 

X-Guru
  
Join Date: Sep 2002
Location: Keller, TX (Cart-Lab.com)
Posts: 3,165
 

Default

Quote:
Originally Posted by PhilJ
The inital popup window isn't auto-resized, but if you manually re-size the window and click 'Next Image' it does auto-resize the next window.

What browser are you using? the initial resize Works in IE, FireFox and Nutscrape. Opera?
__________________
Cart-Lab - 100+ Social Bookmarks for X-Cart.
Reply With Quote
  #10  
Old 07-20-2004, 08:49 AM
  adpboss's Avatar 
adpboss adpboss is offline
 

X-Man
  
Join Date: Feb 2003
Location: Ontario, Canada
Posts: 2,389
 

Default

Quote:
Originally Posted by B00MER
Nutscrape
LMAO
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 05:32 PM.

   

 
X-Cart forums © 2001-2020