[SOLVED] Changing thumbnail display in product page

[atomhead]

Hello all,

 

I am trying to change the display of thumbnails on the product page. I assume I have to change something in product.tpl but I don't know how.

 

I want to remove the scroll bars when there are more than 3 thumbnails and simply move the extra images to the next line. Any help is appreciated,

Edited March 11, 2013 by atomhead (see edit history)

[atomhead]

Managed to get rid of the scroll bars by editing the if statements in product.tpl.

 

 

{if isset($images) && count($images) > 3}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}

 

and the other one for the scroll left part.

 

I edited the CSS for views_block to remove overflow:hidden.

 

However, now I can't get the overflow to wrap in the div so the items within the thumbs_list frame move to the second line.

[atomhead]

It appears the javascript in product.js is putting an in-line style for the width of the frame. I'm playing around with this but I don't really know JS so I don't know what I'm doing, but hopefully I can hack it enough to get it to work how I want it.

[atomhead]

Hacked it. Commented out the following lines to remove sizing through the JS file:

 

 

// if (i > 0)

// {

// var thumb_width = $('#thumbs_list_frame >li').width()+parseInt($('#thumbs_list_frame >li').css('marginRight'));

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

// }

// else

 

Lines 492-497 in product.js.

 

Hopefully this post will save someone else a few hours of time!

Edited March 11, 2013 by atomhead (see edit history)

[rider3i1]

Hi @atomhead, I had the same idea and thanks to you I have set up in 2 minutes.
Thank you greatly !