[1.4.7.0] Vertical Scroll for Product Page Thumbnails

[hideaki]

Hi guys,

 

From the current default theme, I would like to make some changes on the Product Page (product.tpl). Currently, the scroll feature (views_block) of the product's thumbnails is in horizontal orientation, and I would like to change it to show vertically (by the left side of the primary image (image-block)).

 

 

Has this been already implemented before? I've tried going though the forums but couldn't find anything similar (or at least at a more later version of PS). Please advice on how I should go about doing this. Many thanks in advance!

[exatron]

i changed some lines of code in product.js from my theme folder.

 

line 391 i changed into:

$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'y'});

 

line 402, 403

 

var thumb_height = $('#thumbs_list_frame >li').height()+parseInt($('#thumbs_list_frame >li').css('marginRight'));

$('#thumbs_list_frame').height((parseInt((thumb_height)* i) + 3) + 'px'); // Bug IE6, needs 3 pixels more ?

 

line 422

axis:'y',

 

then i changed product.css and it worked

[markzen]

To make a scroll box with a vertical scroll, you need to use overflow-y:scroll;. This tells your browser to create scroll bars on the y (vertical) axis whenever the contents of the container is too big/high. Here, we make our content too big simply by adding too much text to fit into the div. We can also make the contents too big by setting it's height to 200 percent (similar to what I did to the width of this horizontal scroll box). Therefore, we could force vertical scroll bars with minimal or no content.