X-Cart forums

[acrotech]

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.

[intel352]

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

[acrotech]

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

[gotpump]

Didn't work for me

[acrotech]

What is the problem you are having?

[gotpump]

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

[acrotech]

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.