[SOLVED] Thumbs down on that second line

[yvesbj]

Hello,

 

I change the CSS to have a border and spacing between the thumbs. I have also increased their size to 98px instead of 80px.

 

I have 4 images and a fifth place on the second line. I ripped all the hair. I have to search the forum before coming for help.

 

Could you help me and tell me how to back up the fifth photo on the line with the other 4, if you like me?

 

Here is my code:

 

#views_block {
   margin: 0 auto;
   width: 358px;
}
#thumbs_list {
   float: left;
   overflow: hidden;
   width: 324px;
}
#thumbs_list ul {
   list-style-type: none;
   margin-top: 10px;
   padding-left: 0;
}
#thumbs_list li {
   border: 1px solid #C8C8C9;
   cursor: pointer;
   float: left;
   height: 98px;
   margin-right: 12px;
   width: 98px;
}
#view_scroll_left, #view_scroll_right {
   background: url("../img/thumbs_left.gif") no-repeat scroll center center transparent;
   float: left;
   height: 18px;
   margin-top: 45px;
   padding-left: 4px;
   padding-right: 4px;
   text-indent: -3000px;
   width: 9px;
}
#view_scroll_right {
   background-image: url("../img/thumbs_right.gif");
}
span.view_scroll_spacer {
   float: left;
   height: 80px;
   width: 17px;
}

[Prescol]

Don´t worry, that is because there is a property in the slider that isn´t defined in css, but it is defined in product.tpl

 

Now i can´t have access to prestashop files, but in product.tpl there should be commands for smarty that assigns the width property for "ul" with the id:thumbs_list_frame.

The value is calculated depending the quantity of images and estimating a width of 80 px.

 

As you have changed the width of the images,now you should change the value in product.tpl

 

Hope it works!

[yvesbj]

Thank you for your reply. I understood the logic. However, I do not have the knowledge to make the change. Could you help me please?

 

Attached my file product.tpl

product.zip

[Prescol]

Ok, i took a look and seems to be generated by javascript.

 

Product.js Line 399

 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'); 
   }

 

The code gets the width of the "thumb_list_frame li" and adds the marginright of the same element. After this it calculate: number of images by the width and sets the width of the ul "thumb_list_frame"

 

When you add a 1px border you increase the width of the thumb 2 pixels each one.But Product.js don´t consider this in calculation.

 

So let´s do it.

 

Try modifying this line

 

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

 

with this

 

 

       var thumb_width = $('#thumbs_list_frame >li').width()+parseInt($('#thumbs_list_frame >li').css('marginRight'))+(parseInt($('#thumbs_list_frame >li').css('border'))*2);
   }

 

Try this and tell me if it has worked.

[yvesbj]

Thank you very much for your help but it did not work. With your code, and thumbs are displayed on two columns

 

For information, I tried to remove the border of the miniature and the problem is still present. I think that not only borders.

[Prescol]

Thank you very much for your help but it did not work. With your code, and thumbs are displayed on two columns

 

Can you tell me wich is the width of thumbs_list_frame calculated after modifying the js?

You can view in font-code (Ctrl+u)

[yvesbj]

Thank you very much for your help prescol, thanks to you I found a solution!

 

I changed the line:

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

 

 

For this:

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

 

The problem was the spacing in the thumbs

 

Thank you !!!