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

cbslimport · #61 01-15-2005, 03:09 AM

Fantastic Boomer

We have implemented the script and ity works very nice. We only would like to make the popup a little bit bigger so the complete pictures are shown, how to do that.

many thanks again!

See it at: http://www.svenskagolfbutiken.com/cart/

//Stefan Lundmark

Quote:

Originally Posted by B00MER

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

Danielle · #62 01-15-2005, 08:24 AM

This mod works great, but is there a way to change it like this...

I would like to leave thumbnail images on the product page, and when a customer clicks on the picture itself, a large version of the pic appears in a popup window. Can this be done?

Also, is it possible to have labels for detailed images? With or without this mod. The alt tag helps, but it would be much better if I could have a title under each picture. I am using it to show fabric swatches, so each one needs to be identified so the customer can advise us which one they want.

Thanks!

BarryN · #63 01-15-2005, 09:29 PM

Quote:

Originally Posted by cbslimport

Fantastic Boomer

We have implemented the script and ity works very nice. We only would like to make the popup a little bit bigger so the complete pictures are shown, how to do that.

many thanks again!

See it at: http://www.svenskagolfbutiken.com/cart/

//Stefan Lundmark

I have noticed that in IE, the popup is just a tiny bit smaller than the image, but in FireFox it is perfect.

Jerrad · #64 01-19-2005, 06:28 AM

I'm trying to get this (great) mod working with thumbnails of the Detailed Images, instead of the Product thumbnail. But regardless which of the thumbnails I click, it always opens a popup of the first detailed image. After that I can click on next to see the other images, but it would be nicer (and make more sence) if the popup starts with the detailed image of correspondensing thumbnail.

Here's the code of my skin1/modules/Detailed_Product_Images/product_images.tpl :

Code:

{* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}
{if $images ne ""}
{capture name=dialog}
<DIV align="LEFT" width="100%">
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
{/if}
{/if}

{*** 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} 
{if $active_modules.Detailed_Product_Images ne "" && $images}[img]{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}&tmp=y[/img]
{*** Detailed Image Popup mod by www.cart-lab.com ***}


{/if}
{/section}
</DIV>
{/capture}
{if $smarty.capture.dialog ne ""}
{include file="dialog_new.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%" }
{/if}
{/if}

Second problem I have, is that the popup window not aligns in the center of the screen, but always in the upper leftcorner.

I really hope that somebody can help me with the above.
Many thanks in advance!

jkirkpatrick · #65 01-24-2005, 11:45 AM

I would love to get this working on my site. I tried following the instructions but no luck

It shows the thumbnail of the product but it's not clickable.

Perhaps the problem is because I installed X-Cart in the root directory of my site?

What about how I created the new .tpl files. I just used notepad and saved them. They show up fine in the X-Cart admin area so I assumed it worked.

Any advice would be appreciated.

Thanks,
Jennifer

sstillwell@aerostich.com · #66 01-25-2005, 08:03 AM

Quote:

Originally Posted by BarryN

I have noticed that in IE, the popup is just a tiny bit smaller than the image, but in FireFox it is perfect.

That is because they have two different philosophies of what the windows size should be. In FF its the size of the viewable area, in IE its the size of the window as a whole.

Which one is right? Hmmm...

TL408 · #67 01-25-2005, 08:57 PM

I followed the exact step-by-step here, but it doesn't work

The page is still shows the detail image on there, instead of the thumb nail. Please let me know what I missed. I appreciate your help.

Thanks
-Tuan

Quote:

Originally Posted by B00MER

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

jkirkpatrick · #68 01-27-2005, 10:35 AM

I was able to get this working for 4.0.9 but now I'd like to turn off the transitions. Has anyone sucessfully done this?

I deleted...

function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()

... and although that turns off the transitions, you have to press the "Next" button twice before it moves. I'm worried my visitors will only click it once and think there are no more images.

Any help would be greatly appreciated...

Thanks,
Jennifer

B00MER · #69 01-27-2005, 11:10 AM

applyeffect and playaffect function calls in the forward and backward functions, simply // comment out

jkirkpatrick · #70 01-27-2005, 11:41 AM

I commented out those sections and it didn't help. Still when I click the "Next" button the first time (and only the first time), nothing happens.

Any other ideas?

Thanks,
Jennifer