gistfile1.js

<!--- LEFT NAVIGATION W/ THUMBNAILS --->

<div class="leftnav">
	
		<div class="addViews">

	<h3 class="optima"> additional views </h3>
	
	<img src="${ms.urlPathNoProtocol}/imagesnew/product/alt/altBracketTop.png" alt="top" />
	
	<ul>
	
	<li>#if ($altPic1 && $altPic1 != "")
		#set ($imgcount = $imgcount + 1)
		<a class="alt" href="${ms.urlPathNoProtocol}/store/assets/$!product.getAttributes().get("altPic1")"><img src="${ms.urlPathNoProtocol}/store/assets/#get_small_image($!altPic1)" alt="" /></a>
	#end</li>
	
	<li>#if ($altPic2 && $altPic2 != "")
		#set ($imgcount = $imgcount + 1)
		<a href="#"><img src="${ms.urlPathNoProtocol}/store/assets/#get_small_image($!altPic2)" alt="" /></a>
	#end</li>
	
	<li>#if ($altPic3 && $altPic3 != "")
		#set ($imgcount = $imgcount + 1)
		<a href="#"><img src="${ms.urlPathNoProtocol}/store/assets/#get_small_image($!altPic3)" alt="" /></a>
	#end</li>
	
	<li>#if ($altPic4 && $altPic4 != "")
		#set ($imgcount = $imgcount + 1)
		<a href="#"><img src="${ms.urlPathNoProtocol}/store/assets/#get_small_image($!altPic4)" alt="" /></a>
	#end</li>
	
	<li>#if ($altPic5 && $altPic5 != "")
		#set ($imgcount = $imgcount + 1)
		<a href="#"><img src="${ms.urlPathNoProtocol}/store/assets/#get_small_image($!altPic5)" alt="" /></a>
	#end</li>
	
	<li>#if ($altPic6 && $altPic6 != "")
		#set ($imgcount = $imgcount + 1)
		<a href="#"><img src="${ms.urlPathNoProtocol}/store/assets/#get_small_image($!altPic6)" alt="" /></a>
	#end</li>
	
	<img src="${ms.urlPathNoProtocol}/imagesnew/product/alt/altBracketBottom.png" alt="bottom" id="brackbot" />
	
		</div> 
</div>

<!--- CLOSE LEFT NAV --->



<!--- MAIN CONTENT AREA W/ LARGE IMAGES --->

<div class="image-container">
	
		<div class="imageArea">
		
			<img class="rotate" src="/ea/store/assets/$!product.getAttributes().get("Alt Pic 8")" width="418" height="418" />
			
			<br />
	
			<div id="controls">&nbsp;</div>
			
		</div> <!--- CLOSE IMAGE AREA --->
		
		<div id="altImg">
			
			<img src="/ea/store/assets/$!product.getAttributes().get("altPic1")" />
			
		</div>
</div>

<!--- CLOSE MAIN CONTENT AREA --->



<script>
	$(document).ready(function(){
			var spinner = $(".imageArea > .rotate");
			var altImg  = $(".imageArea > #altImg"); 

			// click on a alt image
			// hide spinner
			// show alt image
			$("#leftnav a").click(function(){
				var swapImg = $(this).attr("href");

				altImg.find("img").attr("src", swapImg);

				spinner.fadeOut();
				altImg.fadeIn();
			});

			// click on the spinner imagej
			// hide the single image and show the spinner
			$("#leftnav a.spinner").click(function(){
					altImg.fadeOut();
					spinner.fadeIn();
					return false ;
			});

	});
</script>