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