Changing position of extra images on product pages

[DJC Ltd]

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&amp;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 -->

[bsmither]

The code you cite above is from either CubeCart 3 or CubeCart 4, so it would be bettr if we discussed this at www.cubecartforums.org.

 

But generally, to move a row in a table, you would take everything between the <tr> and </tr> tags and place all of it where you need them (between other rows, not nested inside).