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}&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.
__________________
xcart classic
4.7.12 Platinum
php 7.x
|