Menu
I currently have a gallery that is a zoom gallery. I currently have it where when you click on the thumbnail picture it shows up as a larger picture. Instead of this i need to be able to click a color sample to switch the pictures in the gallery. On top of that when i select the color it needs to be the color that goes into the cart eventually. HELP i have been around the block so many times. Than on top of which when someone goes to add to cart and they aren’t signed in, they need to sign in. I have my login in page but i am not sure how that works. I have got close but no cigar. please help!! I have attached the javascript for the zoom gallery but i don’t think you are going to need that.
one of the links is [url]http://shopping.netsuite.com/s.nl/c.560765/it.A/id.1920/.f
/*Color options
var color1=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_firstcolor’)%>”;
var color2=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_secondcolor’)%>”;
var color3=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_thridcolor’)%>”;
var color4=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_fourthcolor’)%>”;
var color5=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_fifthcolor’)%>”;
var color6=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_sixthcolor’)%>”;
var color7=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_seventhcolor’)%>”;
var color8=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_eighthcolor’)%>”;
var color9=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_ninthcolor’)%>”;
var color10=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_tenthcolor’)%>”;
var color11=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_eleventhcolor’)%>”;
var color12=”<%=getCurrentAttribute(‘item’,’custitem_itemoption_twelfthcolor’)%>”;
var myArrayColors = [ “0”, color1, color2, color3, color4, color5, color6, color7, color8, color9, color10, color11, color12];
/*var myArrayColorLinks = [ “0”, color1link, color2link, color3link, color4link ];*/
var colorCount = 1;
for ( var i = 1; i < 12; i++ ) {
/*var arrayColorLinkValue = myArrayColorLinks[i];*/
var arrayColorValue = myArrayColors[i];
if(arrayColorValue != “”){
$(“#item_drill<%=getCurrentAttribute(‘item’,’internalid’)%> .color”+i).css(“background”,arrayColorValue);
/*$(“#color”+i).attr(“href”,arrayColorLinkValue);*/
$(“#item_drill<%=getCurrentAttribute(‘item’,’internalid’)%> .color”+i).css(“display”,”block”);
}else{
if(colorCount ==”12″){
$(“#item_drill<%=getCurrentAttribute(‘item’,’internalid’)%> .product-color”).css(“display”,”none”);
}
colorCount ++;
}
}
</script></script>
<td valign=”top” id=”item_drill<%=getCurrentAttribute(“item”,”internalid”)%>”>
<div id=”TT-basePDPtemplate3″ class=”middle”>
<div class=”centered-middle”>
<div class=”itemdrill-mainInfo”>
<div class=”itemdrill-left”>
<div id=”itemdrill-zoomGallery”>
<div id=”itemdrill-zoomGallery-content”>
<div id=”large-image-field99″ class=”large-image”> <a href=”<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>” class=”cloud-zoom” id=”zoom” rel=”adjustX: 10, adjustY:-4, zoomWidth: 300, zoomHeight:300″ title=” ” onMouseOver=”textz(1);” onMouseOut=”textz(2);” style=”display:block; height:305px; overflow:hidden; position:relative;”> <img id=”XX” src=”<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>” class=”xx” onMouseOver=”textz(1);” onMouseOut=”textz(2);” style=” display:block; height:auto; text-align:center; width:350px;”/> </a> </div>
<span class=’smalltext’ id=”textZoom”>Roll on to zoom in</span></div>
<div id=”thumbnails-custom”>
<div id=”custom1″></div>
<div id=”custom2″ style=”display:none”></div>
<div id=”custom3″ style=”display:none”></div>
<div id=”custom4″ style=”display:none”></div>
<div id=”custom5″ style=”display:none”></div>
<div id=”custom6″ style=”display:none”></div>
<div id=”custom7″ style=”display:none”></div>
<div id=”custom8″ style=”display:none”></div>
<div id=”custom9″ style=”display:none”></div>
<div id=”custom10″ style=”display:none”></div>
<div id=”custom11″ style=”display:none”></div>
<div id=”custom12″ style=”display:none”></div>
</div>
</div>
</div>
<div class=”product_sku”>SKU #: <%=getCurrentAttribute(“item”,”itemid”)%></div>
<div class=”item-brief-description”><%=getCurrentAttribute(‘item’,’storedetaileddescription’)%></div>
<div class=”product-color”>
<div class=”f-left total-width colors”>
<p>Colors:</p>
<span class=”color1″></span>
</div>
</div>
<div class=”price-cart”>
<div class=”itemdrill-cart”>
<table cellpadding=”0″ cellspasing=”0″ border=”0″ class=”addtocart-table”><%=getCurrentAttribute(‘item’,’addToCartHTML’)%></table>
</div>
</div>
<!–ZOOM IMAGES SCRIPT–>
<script>
a=1;
var child= ‘<%=getCurrentAttribute(“sitecategory”, “urlcomponent”)%>’;
function textz(par){
if(par==2) $(“#textZoom”).html(“Roll on to zoom in”);
if(par==1) $(“#textZoom”).html(“Roll off to zoom out”);
}
setTimeout(“showresizeimage()”, 1000);
function showresizeimage() {
$(“.xx”).fadeIn();
}
//gallery images switch
var cus1 = “<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>”; // zoom image
if (cus1 != “”)
{
var cus1th = “<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>”; // thumbnail image
if (cus1th != “”){
$(‘#custom1’).html(“<a href='<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>’class=’cloud-zoom-gallery’ title=” rel=”useZoom: ‘zoom’, smallImage: ‘<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>’ “><img id=’custom1img’ src=”<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>” alt = ” width=45 /></a>”)
$(‘#custom1’).addClass(‘custom_th1’);
document.getElementById(“custom1”).style.display = “block”;
}
else{
$(‘#custom1’).html(“<a href='<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>’class=’cloud-zoom-gallery’ title=” rel=”useZoom: ‘zoom’,smallImage:'<a href='<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>’ “><img src=”<a href='<%=getCurrentAttribute(‘item’,’custitem_gallery_1′)%>” alt = ” width=45 /></a>”)
$(‘#custom1’).addClass(‘custom_th1’);
document.getElementById(“custom1”).style.display = “block”;
}
}
else
{
document.getElementById(“custom1”).style.display = “none”;
}