Wondering if one of you wonderful guys can help us out a little please,
See here for an example:
http://www.codetoad.com/dhtml_thumbnail_eg.asp
As you can see you click on a thumbnail and it is moved / loaded into a frame on the right.
See here for an example of the site i am trying to do this on.
http://diffusionkids.com/product.php?xP ... 46&xSec=14
As you can see I have the Main Image and the secondary images i would like to try and load the secondary images when clicked in the main image frame.
And when you move your mouse over the main image you get a nice Zoom Feature
Now how to go about this,
Here is the original Source of my product page
Code: Select all
<#set:path.endText#>{product.name}<#/set#>
<#include:includes/top.html#>
<div id="main-content">
<#include:includes/breadcrumb.html#>
<h1>
<#if:sendtofriend.allowed:eq:Y#>
<div class="send-friend">
»<a href="javascript:jss_openWindow('{sendtofriend.link}');">{labels.send2friend.sendLink}</a>
</div>
<#/if#>
{product.name}
</h1>
<form name="{product.form.name}" action="{product.form.action}" method="post" onsubmit="{product.form.onsubmit}">
<div>
<tr><td width="150" height="200">
<a href="{product.mainimage}" class="MagicZoom" rel="zoom-fade:true; smoothing-speed:17" title="Fade in/out effect with slow motion"><img src="{product.mainimage}" alt="{product.name}" alt="" width="250" height="250"></td></tr>
<script src="admin/trackit/magiczoom/magiczoom.js" type="text/javascript"></script>
<link href="admin/trackit/magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
<tr><td>
<table cellpadding="0" cellspacing="0" border="0"> </td>
<div class="product-flag-container">
<#if:product.newproduct:eq:Y#>
<div class="product-flag">{labels.product.newproduct}</div>
<#/if#>
<#if:product.topproduct:eq:Y#>
<div class="product-flag">{labels.product.topproduct}</div>
<#/if#>
<#if:product.specialoffer:eq:Y#>
<div class="product-flag">{labels.product.specialoffer}</div>
<#/if#>
</div>
<div><span class="smaller-text">{labels.product.productPrice}</span> <span class="price">{product.price}</span>
<#if:product.ooPrice1:gt:0#>
<br/><span class="smaller-text">{labels.product.oneoffPrice}</span> <span class="price">{product.ooprice}</span>
<#/if#>
<#if:product.minQty:gt:0#>
<br/><span class="smaller-text">{labels.product.minimumQuantity} {product.minQty}</span>
<#/if#>
<#if:product.maxQty:gt:0#>
<br/><span class="smaller-text">{labels.product.maximumQuantity} {product.maxQty}</span>
<#/if#>
</div>
<div><span class="smaller-text">{labels.product.productQuantity}</span><input type="text" size="5" value="1" class="textbox" name="{product.qtyboxname}" onblur="{product.recalculateprice}"/></div>
<#if:product.rrp1:gt:0#>
<div><span class="smaller-text">{labels.product.rrpPrice}</span> <span class="price">{product.rrp}</span>
<br/><span class="smaller-text">{labels.product.rrpDifference}</span> <span class="price">{product.rrpDifference}</span>
<br/><span class="smaller-text">{labels.product.rrpPercent}</span> <span class="price">{product.rrpPercent}</span></div>
<#/if#>
<div class="links-container">
<#if:product.scNoBuy:eq:N#>
<input type="submit" name="submit{product.productID}" id="submit{product.productID}" value="{labels.cart.addToCartLink}" class="product-add"/><br/>
<#/if#>
<#if:customer.allowed:eq:Y#>
<a href="{product.wishlist.link}" class="product-link">{labels.customer.addToWishListLink}</a>
<#/if#>
</div>
<#if:loop.groupedproducts.total:neq:0#>
<div>
<p>{labels.product.groupedProducts}</p>
<!-- output any grouped products -->
<p>
<#loop:groupedproducts#>
{groupedproducts.qty} x <a href="{groupedproducts.link}">{groupedproducts.name}</a><br/>
<#/loop#>
</p>
<!-- /output any grouped products -->
</div>
<#/if#>
</div>
<p class="clear-both">
{product.description}
</p>
<!-- works out if the product options block should be shown on the product page -->
<#set:product.showoptions#>N<#/set#>
<#if:product.pricing.quantitytable.available:eq:Y#>
<#set:product.showoptions#>Y<#/set#>
<#/if#>
<#if:product.pricing.combinationstable.available:eq:Y#>
<#set:product.showoptions#>Y<#/set#>
<#/if#>
<#if:product.exclusionstable.available:eq:Y#>
<#set:product.showoptions#>Y<#/set#>
<#/if#>
<#if:product.stocktable.available:eq:Y#>
<#set:product.showoptions#>Y<#/set#>
<#/if#>
<#loop:product.extrafields#>
<#if:product.extrafields.content:neq:blank#>
<#set:product.showoptions#>Y<#/set#>
<#/if#>
<#/loop#>
<!-- /works out if the product options block should be shown on the product page -->
<#if:product.showoptions:eq:Y#>
<h2>Product Options</h2>
<div class="product-options-container">
<!-- output quantity discounts table -->
<#if:product.pricing.quantitytable.available:eq:Y#>
<div class="product-table-div">
<table cellpadding="1" class="product-table">
<tr>
<th>{labels.product.qtyTableQty}</th>
<th>{labels.product.qtyTableDiscount}</th>
</tr>
<#loop:product.pricing.quantitytable.entries#>
<tr>
<#if:product.pricing.quantitytable.entries.to:neq:99999#>
<td><font class="product-field-content">{product.pricing.quantitytable.entries.from} - {product.pricing.quantitytable.entries.to}</td>
<#else#>
<td><font class="product-field-content">{product.pricing.quantitytable.entries.from} +</td>
<#/if#>
<td><font class="product-field-content">{product.pricing.quantitytable.entries.discount}</td>
</tr>
<#/loop#>
</table>
</div>
<#/if#>
<!-- /output quantity discounts table -->
<!-- output pricing combinations table -->
<#if:product.pricing.combinationstable.available:eq:Y#>
<div class="product-table-div">
<table cellpadding="1" class="product-table">
<tr>
<th>{labels.product.combinationsTitle}</th>
<th>{labels.product.combinationsPrice}</th>
</tr>
<#loop:product.pricing.combinationstable.entries#>
<tr>
<td>
<#loop:product.pricing.combinationstable.entries.fields#>
{product.pricing.combinationstable.entries.fields.field}: {product.pricing.combinationstable.entries.fields.value}<br/>
<#if:product.pricing.combinationstable.entries.qtyfrom:neq:product.pricing.combinationstable.entries.qtyto#>
{labels.product.qtyTableQty}: {product.pricing.combinationstable.entries.qtyfrom} - {product.pricing.combinationstable.entries.qtyto}<br/>
<#/if#>
<#/loop#>
</td>
<td>{product.pricing.combinationstable.entries.price}</td>
</tr>
<#/loop#>
</table>
</div>
<#/if#>
<!-- /output pricing combinations table -->
<!-- output exclusions table -->
<#if:product.exclusionstable.available:eq:Y#>
<div class="product-table-div">
<table cellpadding="1" class="product-table">
<tr>
<th>{labels.product.exclusionsTitle}</th>
</tr>
<#loop:product.exclusionstable.entries#>
<tr>
<td>
<#loop:product.exclusionstable.entries.fields#>
{product.exclusionstable.entries.fields.field}: {product.exclusionstable.entries.fields.value}<br/>
<#/loop#>
</td>
</tr>
<#/loop#>
</table>
</div>
<#/if#>
<!-- /output exclusions table -->
<!-- output stock table -->
<#if:product.stocktable.available:eq:Y#>
<div class="product-table-div">
<table cellpadding="1" class="product-table">
<tr>
<th>{labels.product.combinationsTitle}</th>
<th>{labels.product.stockTableLevel}</th>
</tr>
<#loop:product.stocktable.entries#>
<tr>
<td>
<#loop:product.stocktable.entries.fields#>
{product.stocktable.entries.fields.field}: {product.stocktable.entries.fields.value}<br/>
<#/loop#>
</td>
<td>{product.stocktable.entries.scLevel}</td>
</tr>
<#/loop#>
</table>
</div>
<#/if#>
<!-- /output stock table -->
</div>
<div class="product-extra-fields">
<!-- output all the extra fields -->
<#loop:product.extrafields#>
<!-- check to see if there is some content for an extra field -->
<#if:product.extrafields.content:neq:blank#>
<!-- output USERINPUT extra fields -->
<#if:product.extrafields.type:eq:USERINPUT#>
<#if:product.extrafields.requirement:gt:0#>
<p><strong>{product.extrafields.title}:</strong>
<br/><input type="text" name="{product.extrafields.name}" size="{product.extrafields.size}" maxlength="{product.extrafields.maxlength}" class="textbox"/>
<#if:product.extrafields.error:eq:Y#>
<br/>{labels.product.userInputRequired}
<#/if#>
</p>
<#/if#>
<#/if#>
<!-- output TEXT extra fields -->
<#if:product.extrafields.type:eq:TEXT#>
<p><strong>{product.extrafields.title}:</strong>
<br/>{product.extrafields.content}</p>
<#/if#>
<!-- output TEXTAREA extra fields -->
<#if:product.extrafields.type:eq:TEXTAREA#>
<p><strong>{product.extrafields.title}:</strong>
<br/>{product.extrafields.content}</p>
<#/if#>
<!-- output IMAGE extra fields -->
<#if:product.extrafields.type:eq:IMAGE#>
<p><strong>{product.extrafields.title}:</strong><br />
<a href="{product.extrafields.content}" rel="lightbox" title="{product.name}" class="bodyLink" > <img src="{product.extrafields.content}" alt="" width="80" height="100" border="1" align="left"> </a></p>
<#/if#>
<!-- output SELECT extra fields -->
<#if:product.extrafields.type:eq:SELECT#>
<p><strong>{product.extrafields.title}:</strong><br/>
<select name="{product.extrafields.name}" onchange="{product.recalculateprice}" class="selectbox">
<!-- loop through options -->
<#loop:product.extrafields.options#>
<option value="{product.extrafields.options.id}">{product.extrafields.options.option}<#if:product.extrafields.options.price:neq:blank#> ({product.extrafields.options.price})<#/if#></option>
<#/loop#>
<!-- /loop through options -->
</select>
</p>
<#/if#>
<!-- output CHECKBOXES extra fields -->
<#if:product.extrafields.type:eq:CHECKBOXES#>
<p><strong>{product.extrafields.title}:</strong><br/>
<!-- loop through options -->
<#loop:product.extrafields.options#>
<input type="checkbox" name="{product.extrafields.name}{loop.product.extrafields.options.count}" value="{product.extrafields.options.id}" class="checkbox" onclick="{product.recalculateprice}"/> {product.extrafields.options.option} <#if:product.extrafields.options.price:neq:blank#>({product.extrafields.options.price})<#/if#><br/>
<#/loop#>
<!-- /loop through options -->
</p>
<#/if#>
<!-- output RADIOBUTTONS extra fields -->
<#if:product.extrafields.type:eq:RADIOBUTTONS#>
<p><strong>{product.extrafields.title}:</strong><br/>
<!-- loop through options -->
<#loop:product.extrafields.options#>
<#if:loop.product.extrafields.options.count:eq:1#>
<input type="radio" name="{product.extrafields.name}" value="{product.extrafields.options.id}" onClick="{product.recalculateprice}" checked="checked"/> {product.extrafields.options.option} <#if:product.extrafields.options.price:neq:blank#>({product.extrafields.options.price})<#/if#><br/>
<#else#>
<input type="radio" name="{product.extrafields.name}" value="{product.extrafields.options.id}" onClick="{product.recalculateprice}"/> {product.extrafields.options.option} <#if:product.extrafields.options.price:neq:blank#>({product.extrafields.options.price})<#/if#><br/>
<#/if#>
<#/loop#>
<!-- /loop through options -->
</p>
<#/if#>
<#/if#>
<#/loop#>
<!-- /output all the extra fields -->
</div>
<#/if#>
</form>
<!-- output customer reviews -->
<#if:reviews.enabled:eq:Y#>
<h2>
{labels.product.customerReviewsTitle}
<#if:reviews.total:neq:0#>
<a href="{reviews.link}">{labels.product.customerReviewsAllLink}</a>
<br/><br/>{labels.product.customerReviewsAverageRating} {reviews.averagerating}
<#/if#>
</h2>
<#if:reviews.total:neq:0#>
<#loop:reviews.content#>
<div>
<p>{reviews.content.name}, {labels.product.customerReviewsRating} {reviews.content.rating}</p>
<#if:reviews.content.title:neq:blank#>
<p>{reviews.content.title}</p>
<#/if#>
<p>{reviews.content.review}</p>
</div>
<#/loop#>
<#else#>
<p>{labels.product.customerReviewsNoReviews}</p>
<#/if#>
<br/><span class="smaller-text"><a href="{product.review.link}">{labels.product.customerReviewsReviewLink}</a></span>
<#/if#>
<!-- /output customer reviews -->
<#if:loop.associated.total:neq:0#>
<h2>{labels.product.associatedProductsTitle}</h2>
<#loop:associated#>
<#set:prod:associated#>
<#include:includes/productblock.html#>
<#/loop#>
<#/if#>
<#if:loop.recommended.total:neq:0#>
<h2>{labels.product.recommendedProducsTitle}</h2>
<#loop:recommended#>
<#set:prod:recommended#>
<#include:includes/productblock.html#>
<#/loop#>
<#/if#>
</div>
<#include:includes/footer.html#>On line 198 is the code for the Secondary Images (extrafields)
I have attempted to do this buy simply using a little bit of javascript and changing the Ref and Class of the images to use the javascript
JavaScript Code
Code: Select all
<script language=javascript>
var lastID = 0;
function SelectImg(id) {
if (lastID > 0) {
document.getElementById(lastID).className = "thumbNormal";
}
document.getElementById(id).className = "thumbSelected";
document.getElementById(0).src = document.getElementById(id).src;
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>Code: Select all
class="thumbNormal" onclick="SelectImg(1)Any assistance you guys can offer i would be much appreciated