BigCommerce - Hosted Ecommerce Software by Interspire

Interspire Forum

 
Go Back   Interspire Forum > Interspire Shopping Cart Community Forum > Customization and Integration > Layout and Store Design Customization

Reply
 
Thread Tools Display Modes
  #1  
Old 07-03-2010, 08:37 PM
shopcalico + shopcalico is offline
Interspire Customer
 
Join Date: Apr 2010
Posts: 44
Default Vertical Product Thumbnails?

My developer fixed my product zoom issue, but broke my layout slightly, in the process.

I am trying to get the thumbnail images, aligned vertically at the right side the main image here:http://www.shopcalico.com/shop/produ...ini-Dress.html

I can't seem to find the right container info or something to make this happen... Any tips?

Thanks!

Elissa
Reply With Quote
  #2  
Old 07-03-2010, 10:53 PM
shopcalico + shopcalico is offline
Interspire Customer
 
Join Date: Apr 2010
Posts: 44
Default

also, trying to nix the pop-up window that happens when you click the thumbnails.

Any help would be much appreciated
Reply With Quote
  #3  
Old 07-04-2010, 03:55 AM
meules + meules is offline
Interspire Customer
 
Join Date: Mar 2009
Posts: 148
Default

do you have the correct size for your ProductThumbImage div? It looks like you have a fixed size for that "width: 319px; height: 480px; position: relative;" maybe it would help to make it a bit wider and position the "ImageCarouselBox" next to it? Maybe that would help?
Reply With Quote
  #4  
Old 07-04-2010, 05:26 PM
shopcalico + shopcalico is offline
Interspire Customer
 
Join Date: Apr 2010
Posts: 44
Default

This is what I have in styles.css:


/** AJAX loading box - Start **/

#AjaxLoading {
display: none;
text-align: center;
background: #FCF5AA;
width: 180px;
z-index: 10000000000;
padding: 5px 10px;
}

#AjaxLoading img {
vertical-align: bottom;
margin-right: 5px;
}

/** AJAX loading box - End **/
#ProductDetails #ImageScrollPrev,
#ProductDetails #ImageScrollNext {
float: left;
background:none;
border:none;
margin-top:16px;
cursorointer;
display: none;
}

#ProductDetails .ProductTinyImageList {
float: right;
padding-left: 225px;
margin-top:10px;
white-space:nowrap;
width: 40px;
height: 200px;
overflow: hidden;
margin-left:auto;
}

#ProductDetails .ProductThumbImage {
height: 220px;
width: 220px;
float: left;
overflow: hidden;
margin:auto;
}


.carousel {
position: relative;
visibility: hidden;
left: -5000px;
width: 180px;
}
Reply With Quote
  #5  
Old 08-18-2010, 10:18 PM
Joshua Walcher + Joshua Walcher is offline
Josh W (Interspire Staff)
 
Join Date: Aug 2008
Posts: 594
Default

Hey, just wanted to chime in that if you're unhappy with the jump to the top of the page when you click on the thumbnails that you can change the link from:
<a href="#">IMAGE-HTML-HERE</a>

to:
<a href="javascript:void(0)">IMAGE-HTML-HERE</a>

Other than that, it looks like you sorted out the positioning CSS. Looks good!
Reply With Quote
  #6  
Old 11-15-2011, 10:18 PM
PMG + PMG is offline
Interspire Customer
 
Join Date: Nov 2011
Posts: 3
Default Vertical Product Thumbnails?

I too am trying to get the thumbnails to display vertically on the right hand side of the product image on the the products page. I see that www.shopcalico.com has now made this happen on their site and I would like to do the same however I am unsure of how they made it happen. Can someone please explain with details on what code I will need to change. Thanks in advance!!!
Reply With Quote
  #7  
Old 11-23-2012, 11:17 PM
Auspire + Auspire is offline
Interspire Customer
 
Join Date: Jul 2008
Location: Sydney
Posts: 30
Default

What was your final solution shopcalico? I am struggling with this too!
__________________
Justin
www.auspire.com
Reply With Quote
  #8  
Old 01-29-2013, 01:54 AM
Auspire + Auspire is offline
Interspire Customer
 
Join Date: Jul 2008
Location: Sydney
Posts: 30
Default

I get the feeling we can make vertical scrolling happen by editing this function in /javascript/product.functions.js

function initiateImageCarousel() {

if(!$('.ImageCarouselBox').is(':visible')) {
var seeMoreImageHeight = $("#ProductDetails .SeeMorePicturesLink").height();
$("#ProductDetails .ProductThumb").width(ProductThumbWidth+20);
$("#ProductDetails .ProductThumb").height(ProductThumbHeight+seeMoreI mageHeight+10);
return false;
}

highlightProductTinyImage(0);

var carouselHeight = $("#ProductDetails .ProductTinyImageList").height();
$("#ProductDetails .ProductThumb").width(ProductThumbWidth+20);
$("#ProductDetails .ProductThumb").height(ProductThumbHeight+carousel Height+10);

var CarouselImageWidth = $('#ProductDetails .ProductTinyImageList > ul > li').outerWidth(true);

$("#ImageScrollPrev").show();
var CarouselButtonWidth = $("#ProductDetails #ImageScrollPrev").outerWidth(true);
$("#ImageScrollPrev").hide();

var MaxCarouselWidth = $("#ProductDetails .ProductThumb").width() - (CarouselButtonWidth * 2);
var MaxVisibleTinyImages = Math.floor(MaxCarouselWidth/CarouselImageWidth);

if (MaxVisibleTinyImages<=0) {
MaxVisibleTinyImages = 1;
}

var visible = MaxVisibleTinyImages;

if (ThumbURLs.length <= MaxVisibleTinyImages) {
visible = ThumbURLs.length;
CarouselButtonWidth = 0;
} else {
$("#ImageScrollPrev").show();
$("#ImageScrollNext").show();
}

var scroll = Math.round(visible/2);

if($('#ProductDetails .ProductTinyImageList li').length > 0) {
$("#ProductDetails .ProductTinyImageList").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: visible,
scroll: scroll,
circular: false,
speed: 200
});
}

// end this floating madness
$('#ImageScrollNext').after('<br clear="all" />');

// pad the carousel box to center it
$('#ProductDetails .ImageCarouselBox').css('padding-left', Math.floor(($("#ProductDetails .ProductThumb").width() - (visible * CarouselImageWidth) - (2 * CarouselButtonWidth)) / 2));

// IE 6 doesn't render the carousel properly, the following code is the fix for IE6
if($.browser.msie && $.browser.version.substr(0,1) == 6) {
$("#ProductDetails .ProductTinyImageList").width($("#ProductDetails .ProductTinyImageList").width()+4);
var liHeight = $("#ProductDetails .ProductTinyImageList li").height();
$("#ProductDetails .ProductTinyImageList").height(liHeight+2);
}
}
__________________
Justin
www.auspire.com
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump