Thumbs List Configuration?

[sandyfootprints]

Hello!

I am currently trying to update the look of the 'thumbs list' in the product page of our website - I needed to stop the images from overlapping, which I did by CSS, but now they spread across 2 lines, when I want them to all be in the scrolling display....The link to the page which shows this problem is here:

Product Page Link

I have tried editing the product.tpl file to specify a smaller number of images initially loaded in the display, but it doesn't seem to be working - I can only think that I maybe need to update the javascript file that controls this effect - does anyone know what this is? Or can anyone advise what I need to do?

Thank you in advance!!

Rachel

[sandyfootprints]

OK...another thing....in the product.tpl file - I have been tinkering and trying to update the equation that calculates the 'thumbs_list_frame' (width * number of images)... I have been updating the 'width' figure and it doesn't seem to be taking any effect...the code in the file is:

               {foreach from=$images item=image name=thumbnails}
               {assign var=imageIds value=`$product->id`-`$image.id_image`}

getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="{if !$jqZoomEnabled}thickbox{/if} {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />


               {/foreach}

It doesn't matter what I set the width figure to - it always calculates it to the same result...and I know I am editing the correct template file because other changes I have made within it have taken effect............

Can anyone help???

Thank you!

[sandyfootprints]

Bump....

Can anyone help???

[rocky]

You are taking the right approach. You should change line 114 of product.tpl from:

>
</pre>
<ul>

to:

>
</pre>
<ul>

and the following in the /* views block */ section of global.css from:

#thumbs_list li {
   float: left;
   cursor: pointer;
   width: 80px;
   height: 80px
}

to:

#thumbs_list li {
   float: left;
   cursor: pointer;
   width: 120px;
   height: 120px
}

[sandyfootprints]

Thank you for your reply! Unfortunately I have tried your solution but the editing of the product.tpl file doesn't seem to make any difference to the result of the width calcuation....is there any way this calculation could be being overridden somewhere else? Eg. in the product page link I posted above, the thumbs_list_frame width is always 483px, even when I change the 'width' figure in the inline calculation, and even when I added "+100" onto the end of the calculation!!

So:

></pre>
<ul> 

=ul style="width:483px;"

></pre>
<ul> 

= ul style="width:483px;"

I am soooo confused! I am editing the product.tpl file within the themes folder...I am guessing I'm not going wrong there?

[rocky]

Did you edit the CSS too? That calculation affects only the width of the container, not the individual items. You need to edit the CSS as I mentioned in my previous post.

[sandyfootprints]

Yes CSS has been edited also...

[rocky]

That's weird. It worked on my test site.

[sandyfootprints]

I'm pretty sure its something to do with the template file that I am editing because it doesn't seem to make any difference which figures I use for the width calculation....

[lxmndza]

Hi,

I had the same problem it was driving me nuts but I cracked it! check out my attachment.

Replace old /*views_block */ in your themetemplate/css/style.css with the following:

/* views block */
#views_block {
margin: 0 auto;
width: 290px
}
#thumbs_list {
overflow: hidden;
float: left;
width: 255px
}
#thumbs_list ul {
padding-left: 0;
list-style-type: none;
margin-top: 5px
}
#thumbs_list li {
float: left;
cursor: pointer;
width: 80px;
height: 100px
}
#view_scroll_left, #view_scroll_right {
background: url("../img/thumbs_left.gif") no-repeat scroll center transparent;
display: block;
float: left;
height: 18px;
margin-top: 30px;
text-indent: -3000px;
width: 9px;
}

#view_scroll_right { background-image: url('../img/thumbs_right.gif') }
span.view_scroll_spacer {
float: left;
width: 17px;
height: 80px
}

[htech]

hey guys

im struggling to find the following code in the product.tpl , im suing prestashop 1.4.1 final.

></pre>
<ul> 

any ideas where i could find this?

[rocky]

Looks like it's been moved into themes/prestashop/js/product.js on lines 393-394:

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 ?

[htech]

hektik! will check it out! thanks man.

how do u find these codes?
iv tried Dreamweaver but to open all the files in DW, it freezes...is there another program that searches all these files for code without opening ?

[rocky]

I used Dreamweaver to search through all the theme files without opening them all. When you open the "Find" window, you can select "Entire Current Local Site" to search your entire site, or select a subfolder in the "Local Files" pane and choose "Selected Files in Site" to search just the files in that directory.

[htech]

awesome! thanks, will give that a try!

[htech]

any idea what im doing wrong here? iv changed my css code and the .js code but cant seem to egt this right, have no idea what im doing wrong...see picture.

[rocky]

I see you've changed the thumbnails list to be vertical instead of horizontal. That complicates things. In that case, you'd have to change the height instead of the width in the JavaScript. I'm not sure whether there are other consequences to using height instead of width. Good luck.

[htech]

if i change it to back to the width view...how does one position the scroll bar on the right of the image?

[rocky]

It should already be on the right if you are using the code from the default PrestaShop theme, unless you've reduced the total width too much so there isn't room and it wraps.

[htech]

ok now im lost lol.

im sure the default prestashop theme has the thumblist at the bottom of the Big_Pic....

i need to try place it on the right hand side of the pic

[rocky]

Sorry, I thought you meant the arrow, not the entire thumbnail list. The entire thumbnail list is underneath the picture by default. Moving it to the right of the big picture is tricky. It's not something I can do without messing around with code.

[htech]

cool thanks man
will give it a try

[MaJoran243]

Hey thanks rocky for your detailed explanations, you helped me a lot by editing my own prestashop thumbs list.

Maybe you could give me another advise...

 

I changed my thumbs list graphics to 60px hight and width (global.css) and with your tip I was also able to adjust the scroll spacers (product.js).

 

Another problem I'm facing now is, that when a product has just 2 pictures, the sccond one will be broken into a line underneath the first one.

When loading the product page the picture is showen for half a seccond and then disappears... really strange.

Do you know why this happens? Or can you tell me how I can adjust the hight of the slide container to 60px?

 

Link 2 images:

http://www.myprintcut.de/wandtattoo-deko/16-hier-bin-ich-mensch-hier-darf-ichs-sein.html

Link more than 2 images:

http://www.myprintcut.de/leinwand-bilderdruck/71-leinwanddruck-canvas-dina0.html

 

My gobal.css *view blocks look like this:

 

#views_block {

margin: 0 auto;

width: 250px;

height: 60px;

 

#thumbs_list {

overflow: hidden;

float: left;

width: 233px;

height: 60px

 

Would be great if someone could help!

[MaJoran243]

Problem solved....Change in product.js in the theme folder

this

$('#thumbs_list_frame').width((parseInt(($('#thumbs_list_frame >li').width())* i) + 3) + 'px');

 

to $('#thumbs_list_frame').width((parseInt(($('#thumbs_list_frame >li').width())* i) + 10) + 'px');

 

This is kind of a bug...