Page 1 of 1

Replace Thumbnail Image with Larger Image

Posted: Fri May 21, 2010 5:59 am
by dave7802
Hi,

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">
			&#187;<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#>&nbsp;({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 17 - 21 is the Main Product Image!
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>
So i have added this into my Extra Images, and removed the lightbox ref, But it failed to work,

Code: Select all

class="thumbNormal" onclick="SelectImg(1)
Would i go going about this the wrong way, is javascript the correct was for this, or is there a PHP Method way of doing is?

Any assistance you guys can offer i would be much appreciated

Re: Replace Thumbnail Image with Larger Image

Posted: Mon May 24, 2010 6:28 am
by dave7802
:-(

Re: Replace Thumbnail Image with Larger Image

Posted: Mon May 24, 2010 11:37 am
by mikosiko
for a more "eyes catching" design I will probably use something like LightBox (several similar out there)
http://www.huddletogether.com/projects/lightbox2/

but is just me as you know "beauty is in the eyes of the beholder" :wink:

Re: Replace Thumbnail Image with Larger Image

Posted: Mon May 24, 2010 11:39 am
by dave7802
Yes that is what i have Suggested,
But when the client requests something, you have to provide it :-p

Re: Replace Thumbnail Image with Larger Image

Posted: Mon May 24, 2010 11:46 am
by mikosiko

Re: Replace Thumbnail Image with Larger Image

Posted: Mon May 24, 2010 11:52 am
by dave7802
I would guess you got wrong end of my post,

I already have that added to the main image, So the 1 main image you get a very nice zoom effect, (Check the link provided above for an example)

The problem is the 3 or 4 other extra images i have at the bottom.
I have attempted 2 things,

1. Was to reuse the script on the smaller images at the bottom, but it fails to work :-( I read it was because PHP sees it has already executed that command earlier and skips it

2. When you click on the smaller image, it would swap place with the larger image and then the Zoom Effect already added would work on the larger image

Re: Replace Thumbnail Image with Larger Image

Posted: Mon May 24, 2010 11:59 am
by mikosiko
you are right... I read your post incorrectly... I thought that your second link was pointing to the feature that you will like to have

I see now that you have MagicZoom in your code... did you check the examples that they have... seems they provide the functionality that you are looking for

http://www.magictoolbox.com/magiczoom_integration/#ajax