Detailed images on click
 

Hi All,

this is my first contribution to xcart, so please be gentle.
This module allows to show detail images as thumbnail on right and shows the large image only when the user clicks without reloading the page.

Installation -
Just change the skin1\modules\Detailed_Product_Images\product_imag es.tpl to the following code -
============
{* $Id: product_images.tpl,v 1.16.2.1 2006/05/18 08:02:40 max Exp $ *}
{literal}
<SCRIPT language="JavaScript" type="text/javascript">
<!--
function showlarge(imagename)
{
this.document.images['largeimage'].src = imagename;
// this.document.images['largeimage'].width = "260";
var image_anchor = this.document.getElementById('viewimage');
if (image_anchor)
{
image_anchor.focus();
}

// alert(cat_anchor);
}
-->
</SCRIPT>
{/literal}
{if $images ne ""}
{capture name=dialog}
<table width="100%"><tr>
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
{assign var="imgsrc" value=$images[image].tmbn_url}
{else}
{assign var="imgsrc" value=$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D}
{/if}
{/if}
{if %image.first%}
<td align="center" valign="center"><img id="largeimage" name="largeimage" src="{$imgsrc}"><br><A HREF="#" name="viewimage" id="viewimage"></A></td>
<td align="center" width="135"><img src="{$imgsrc}" alt="{$images[image].alt|escape}" style="padding-bottom: 10px;" width="120" onClick="javascript: showlarge('{$imgsrc}')" />
{else}
<br><img src="{$imgsrc}" alt="{$images[image].alt|escape}" style="padding-bottom: 10px;" width="120" onClick="javascript: showlarge('{$imgsrc}')" />
{/if}
{/section}
<br><img src="{$ImagesDir}/zoom_image.gif" alt="{$lng.lbl_click_to_enlarge|escape}" />{$lng.lbl_click_to_enlarge|escape}<br>
</td></tr></table>
{/capture}
{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra='width="100%"'}
{/if}


============
Any suggestions are welcome.

Re: Detailed images on click
 

to avoid any issues with your posted code, it's best to wrap your code with [code] tags (one beginning, one ending)

in case you weren't already aware, there's a mod available that does this in a slick js fashion (but I can understand if you prefer your method, just didn't know if you weren't aware). The module is called Dynamic Images, it's free. In the default package, it doesn't offer a pop-up for detailed images, but this how-to extends Dynamic Images further: Extend Dynamic Images module to use Lytebox for displaying larger images

Regardless, congrats on your modification, it's always good to see someone else getting their hands dirty :-)

Re: Detailed images on click
 

Thanks for the feedback. I will note to include [code] tags.

I did look at the other module you mentioned, but I just wanted a way to display images in the page itself. Where can I download the dynamic thumbnail generation code from?

Thanks

Re: Detailed images on click
 

Didn't work for me :(

Re: Detailed images on click
 

What is the problem you are having?

Re: Detailed images on click
 

It didn't do anything. Looks the same as before.

Re: Detailed images on click
 

Did you change the correct file?
skin1\modules\Detailed_Product_Images\product_imag es.tpl

Make sure that detailed images module is turned on and you have detailed images for a product. This mod will show all the detailed images on the right as small images in the detailed image panel and will show the large image when you click the small detail image.