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

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Detailed Image(s) Popup 2.1 [3.4.x-4.0.x] (https://forum.x-cart.com/showthread.php?t=8460)

Trying to work this code in 3.5.11 and just keep getting page not found error in the popup. I have reverted back to reinstalling the original code from page 1 of this mod in my clients site, still, http 404 error page not found.

Any suggestions?

I think I followed the directions precisely...

I have gone over it over and over agian, but it didn't seem to do anything, my Detail page still come up instead of the popup window, all the files are there but changes to the product.tpl don't seem to effect the outcome.

Any ideas what I could be doing wrong?

-Eric

I've applied the mod to 3.5.x sites before using the same code snippets and instructions from this post. I'm not sure why it would cause a 404 page, unless the javascript popup window isn't pointing to the proper location of the php. 8O :?

Boomer, I wasn't able to get the mod working. ???

so I reverted back to stock detailed images.

I'm really confused.

Got it to work kind off...

I want to place the popups on the products.tpl, not the product.tpl and I would like it to just pull the thumbnail image, instead of the detail image, thats because the thumbnails are already quote large and they are just beeing downsampled on the product.tpl page. Can anyone modify the existing script with these changes?

I am finding SMARTY code to be difficuly for non-smarty people. 8O

-Eric

Oh I guess I should say I got it working...

I got it working, for what it was suppose to do, but I need help modifying it cause I need it on products.tpl and I need it to pull the thumbnail not the large image. Tried just copying the code from product to products but that didn't work and all the images came up as Missing.

-Eric

8O

anyone any idea how I would have this option active ONLY if there is more than 1 detailed image?

so I'm presuming this line:

Code:

{if $active_modules.Detailed_Product_Images ne "" && $images}

would change - but am not sure what to :D

thanks in advance

Hi Boomer,

Your mod works great on 4.04. I was wondering if it is possible to have the first detailed image show up in place of the thumbnail image (when in the product details page) and when you select see larger view(your mod) the pop-up window would show only the second detailed image.

Awesome mod Boomer!

btw, i found a small bug-

When a detailed image is disabled in the admin control panel (product---> detailed images---> availability), it still shows up in the detailed images popup.

Oops all the query needs added to it is WHERE avail='Y' or such, can't really stop and take a look. I'll try and update it once I get a chance. Thanks for pointing the bug out though, it seems I forget about that with some other mods in the past too.

Thanks. :wink:

Great mod. I've managed to get it working fine, but does anyone know how to turn off the transition effects between detailed images?

I'm getting an error when I click the view details link where my pictures should be...

Parse error: parse error, unexpected T_STRING in /home/bercbl2/public_html/store/product_detailed_images.php on line 20

line 20 from the php file is:

foreach($v as $kk=>$vv) {

Hi,

Again, I'm not able to get thinks working :? . I've walked trought each step exactly, I get no error masages, but it just doesn't work. Can someone take a look, please :D

http://hobbyhandig.webfontein.nl/product.php?productid=16193&cat=0&page=1

OK, I've got the 'View details' displaying, but it doesn't link to anything.

I saw code was using product id, but I'm not working with id's I use my own product codes. Can someone take a look at what I'm doing wrong?

Around the javascript function call in product.tpl you'll need to add " " around the values as your using letters and numbers not just an integer (number). You may also need to adjust the SQL query in the php file in order for it to pull up properly based off the SKU.

:?: :oops:
I'm sorry, but I didn't get that. Here's the code involving detailed images in my product.tpl.

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.productcode});">{/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 ***}

And I have no idea what you mean by:

Quote:

You may also need to adjust the SQL query in the php file in order for it to pull up properly based off the SKU.

I'm really sorry, but I'm no programmer.

The basic jest: replace all productid or $productid with productcode or $productcode, and within the javascript call on the thumbnails use this instead:

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.productcode}');">{/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 ***}

If you can't get this to work I can offer my services to do such customizations for you.

Quote:

If you can't get this to work I can offer my services to do such customizations for you.

How much? I would like the following:

In products_t.tpl I would like the thumbnail to give a Detailed Pop-up, with a link beneath it saying: Click image to enlarge.
Beneath that I want a link to the product itself.
At the product itself I want again the thumbnail to give the Detailed Pop-up.

I don't think I have more than one detailed image per product.

Can you give me an additional price if Detailed Pop-up can contain text (i.e. "this is the upper right corner of the product" or "size 12 x 13").

Hope you can help me with this.

Thanks,

Hobbyhandig[/quote]

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

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:
:arrow: 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:
:arrow: 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:
:arrow: http://www.cart-lab.com/lab/customer/help.php?section=about

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!

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

Quote:

Originally Posted by cbslimport

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

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!

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

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

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

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

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

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:
:arrow: http://www.cart-lab.com/lab/customer/help.php?section=about

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

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

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

Quote:

Originally Posted by B00MER

If you can't get this to work I can offer my services to do such customizations for you.

How much do you charge to get this module working on X-cart 4.0.11 ?

Thanks.

Works Great in 4.0.11

Detailed Popup Window works great in 4.0.11 also.

Thanks bunches - I needed that. I used it in 3.5.4 and it worked then too.

Got it working in 4.0.11

BOOMER~~~~~~

thanks..great mod... got it working in 4.0.11 nicely

originally did not work..but i re-read the entire topic and found the entry about the product_detailed_images.php file having to be in the cart root directory in Version 4.xx..
moved it there and whoop-de-doo it worked.

thanks Boomer et al...
adds a little pinache to an otherwise boring process....

Very nice mod BOOMER! I do appreciate you sharing it. Thank you.

Anyone know how to work the detailed image's "Alternative text" into this mod? In some cases, it would be useful to display this text under the image, so the customer knows exactly what they are looking at.

Here is what I did to get the ALT text to show at the top of the image. May not be the best implementation but oh well.

This is for 4.x

skin1/customer/main/product_images.tpl

Added photo_alt array in javascript

Code:

{/literal}

window.resizeTo(w,h);



// Vars

var photos=new Array()

var photos_width=new Array()

var photos_height=new Array()

var photos_alt=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}"

photos_alt[{%image.index%}]="{$images[image].alt}"

{/section}

{literal}

Added " document.all.photosalt.innerHTML=photos_alt[which]; "

Code:

  applyeffect()

   document.images.photoslider.src=photos[which];

   document.all.photosalt.innerHTML=photos_alt[which];   

   newWidth=parseInt(photos_width[which])+50;

   newHeight=parseInt(photos_height[which])+100;

In both the forward and backward functions

for the HTML

Change the top part to

Code:

{if $images[1].imageid ne ""}

  <tr>

    <td width="20%" height="21" onClick="javascript:backward();return false;" style="cursor:pointer;cursor:hand;" onMouseOver="'"><p align="left">[img]{$ImagesDir}/larrow.gif[/img] Previous</td>

    <td align="center"><div id="photosalt"><script>document.write(photos_alt[0])</script></div></td>

    <td width="20%" height="21" onClick="javascript:forward();return false;" style="cursor:pointer;cursor:hand;"><p align="right">Next [img]{$ImagesDir}/rarrow.gif[/img]</td>

  </tr>

{/if}

Hello all, i'm getting this error in the popup page

Quote:

Warning: main(./auth.php): failed to open stream: No such file or directory in /home/httpd/vhosts/vtec.com/httpdocs/retail/customer/product_detailed_images.php on line 10

this is line 10 on the product_detailed_image.php

Code:

require "./auth.php";

when i changed it to the absolute path
/home/httpd/vhosts/vtec.com/httpdocs/retail/auth.php

it worked sorta but then it gave me another error message
it said:

Quote:

ERROR: Can not initiate application! Please check configuration.

What gives?

the version of x-cart i have is 4.0.4

Thank you for your help

ah! nevermind
i just read someone's post about product_detailed_images.php has to be in the base directory for 4.0.x

thanks!
it works great now!

Anyone sucessful getting this to run with v4.0.9?

I have it working in quite a few different versions of 4.0 including 4.0.9.

Thanks this script was exactly what I was looking for. I think you deserve a donation or something.