Hi,
We have recently installed a Mod, and are having a few issues with the positioning of the thumbnail images.
I have attached two images to the thread. 'Pic1' is currently what is shown, and 'Pic2' is what we're after. The coding that we currently have at 'skins/{OUR SKIN}/styleTemplates/content/viewProd.tpl' is below.
Could someone quickly confirm what we need to change. I believe it be in the coding in bold. It would be much appreciated.
Regards,
DJC Ltd
<!-- BEGIN: view_prod -->
<!-- start mod - Product Images with Javascript Preview, by Estelle -->
<script language="javascript" type="text/javascript"><!--
function change_preview_image(file_name) { document.images['preview'].src = file_name; }
//--></script>
<!-- end mod - Product Images with Javascript Preview, by Estelle -->
<!-- BEGIN: prod_true -->
<form action="{CURRENT_URL}" method="post" name="addtobasket" target="_self">
<h1>{TXT_PRODTITLE}</h1>
<strong>{LANG_DIR_LOC}</strong> {CURRENT_DIR}
<table width="100%" border="0" cellpadding="0" cellspacing="2" style="margin-bottom:20px;">
<tr>
<td valign="top" style="width:200px;"><img id="preview" src="{IMG_SRC}" alt="{TXT_PRODTITLE}" width="200" border="1" title="{TXT_PRODTITLE}" class="image" />
<!-- BEGIN: more_images -->
<div style="text-align: center;"><a href="javascript:openPopUp('extra/prodImages.php?productId={PRODUCT_ID}', 'images', 548, 455, 0);" class="txtDefault">{LANG_MORE_IMAGES}</a></div>
<!-- END: more_images --></td>
<!-- start mod - Product Images with Javascript Preview -->
<!-- by Estelle - -->
<!-- BEGIN: more_images_2 -->
<div style="text-align: center; margin-top: 10px; margin-bottom: 5px;">{LANG_MORE_IMAGES_2}</div>
<div style="text-align: left;">
<!-- BEGIN: repeat_thumbs -->
<a href="javascript:change_preview_image('{VALUE_SRC}')"><img src="{VALUE_THUMB_SRC}" {VALUE_THUMB_WIDTH} alt="{TXT_PRODTITLE}" title="{TXT_PRODTITLE}" border="0" style="margin: 5px; vertical-align: top;" /></a>
<!-- END: repeat_thumbs -->
</div>
<!-- END: more_images_2 -->
<!-- end mod - Product Images with Javascript Preview -->
<td valign="top" style="padding:10px 0 10px 0;">
<ul class="cats">
<li>{LANG_PRICE} <strong><span id="currprice">{TXT_PRICE}</span></strong> <span class="txtSale"><strong>{TXT_SALE_PRICE}</strong></span></li>
{TXT_RRP}
<li>{LANG_PRODCODE} <strong>{TXT_PRODCODE}</strong></li>
<li>{TXT_INSTOCK} <span class="txtOutOfStock"><strong>{TXT_OUTOFSTOCK}</strong></span></li>
<li><a href="index.php?act=taf&productId={PRODUCT_ID}" target="_self">{LANG_TELLFRIEND}</a></li>
</ul>
{INCPACK}
<!-- BEGIN: prod_opts -->
<h3>{TXT_PROD_OPTIONS}</h3>
<table border="0" cellspacing="0" cellpadding="3">
<!-- BEGIN: repeat_options -->
<tr>
<td></td>
<td>
<!-- BEGIN: repeat_values -->
<input name="productOptions[]" onclick="showHide();" type="checkbox" value="{VAL_ASSIGN_ID}" id="centre" value="true" /> {VAL_VALUE_NAME}
<!-- BEGIN: repeat_price -->
({VAL_OPT_SIGN}{VAL_OPT_PRICE} per item)
<!-- END: repeat_price -->
<br />
<!-- END: repeat_values -->
</td>
</tr>
<!-- END: repeat_options -->
</table>
<span class="diver"></span>
<!-- END: prod_opts -->
<span style="display:none"><input type="checkbox" checked="checked" name="productOptions[]" id="y" value="0" /> Exclude Retail Packaging</span>
<script type="text/javascript"><!--
function showHide() {
trueFalse = document.addtobasket.centre.checked;
document.addtobasket.y.disabled = trueFalse;
}
//-->
</script>
<!-- BEGIN: buy_btn -->
<div class="addbkt">{LANG_QUAN}
<input name="quan" type="text" value="{TXT_MIN_QUANTITY}" size="2" class="textbox" style="text-align:center;" {BLUR} />
<a href="javascript:submitDoc('addtobasket');" class="txtButton">{BTN_ADDBASKET}</a>
</div>
<!-- END: buy_btn -->
<input type="hidden" name="add" value="{PRODUCT_ID}" />
<!-- start mod - Product Pricing and Individual Quantity Discounts - by Estelle -->
<!-- BEGIN: quantity_pricing -->
<div id="buyquan"></div>
<script language="JavaScript">
function valid(form){
var input=0;
input=document.addtobasket.quan.value;
<!-- BEGIN: repeat_quantity -->
{VAL_QUAN}
<!-- END: repeat_quantity -->
}
window.onload = function() {
valid(this.form);
}
</script>
<!-- END: quantity_pricing -->
<!-- end mod - Product Pricing and Individual Quantity Discounts - by Estelle -->
</td>
</tr>
</table>
<h1>{LANG_PRODINFO}</h1>
<div class="content"> {TXT_DESCRIPTION}</div>
</form>
<!-- END: prod_true -->
<!-- BEGIN: prod_false -->
<p>{LANG_PRODUCT_EXPIRED}</p>
<!-- END: prod_false -->
<!-- END: view_prod -->
