Optimum image size for product gallery thumbnails

[egad]

What is the optimal size for the product thumbnails? As seen in the sample link given, the 7th thumbnail is only showing 1/3. I would like them to auto spaced out to flush with the main image.

[Kyle – SUPPORT]

Add this to your custom css:

#product-img-nav li {
  margin-right: 24px;
}

– Kyle

[egad]

That doesn’t really work. It is ok for the first batch of images, although the 6th thumbnail doesnt really flush with the main image, but once I scroll, the spacing is all off again.

[Mohammad – SUPPORT]

Hi,
Please try to use this custom css code:-

#product-img-nav li {
  margin-right: 24px;
}

Thanks 🙂
With Best Regards
Mohammad

[egad]

That’s exactly the same solution provided earlier that i replied to say it doesnt work…..

[Kyle – SUPPORT]

I can see that there’s no longer a cropped image anymore? If you want you can increase the 24px

– Kyle

[egad]

that only works for the first 6 images. once you click the scroll button, the images go haywire.

What i am asking is what is the optimum size of the thumbnail and spacing for it to fit nicely. Once i click the scroll button, the next batch of images should also align on the left and right, instead of showing half images as this would mean it is an incomplete feature.

[egad]

How do i increase the amount of scrolling so that the 7th thumbnail appears first once i scroll. Right now it only moves the first 3.5 thumbnails.

[Kyle – SUPPORT]

I’m afraid what you’re asking is not possible, as you can see on the demo this is how the thumbnail images are. If you want to change them then that’s up to you but it’s not within our scope of support.

– Kyle

[egad]

Can you tell me where is the code for the thumbnails and the code that controls the scrolling?

[egad]

Please feedback to the developer for the next update. surely it shouldnt scroll to show half of an image.

[Kyle – SUPPORT]

Ok no problem

– Kyle

[Swift Ideas – Ed]

Hi @egad,

Unfortunately flexslider seems to be pretty erratic in this situation, we have been looking into it. The width of the image is set by the slider JS.

Try out this custom css to enable 7 in the row:

#product-img-nav li {
margin-right: 12px;
}

Seems to be a common problem with the slider script, I’ll see if there is anything else I can dig up regarding the issue.

– Ed

[egad]

Hi Ed,

I am not trying to show 7 thumbnails in a row. I have 20 thumbnails to display. Showing 6 at a time is fine. My issue is only when you start scrolling. I want to either reduce the amount of scrolling so one click moves one image at a time or one click moves 6 images at a time, not 3.5 images.

Thanks.

[Swift Ideas – Ed]

Hi @egad,

Unfortunately the flexslider script doesn’t have the functionality to set how many you scroll per rotation – we are looking into replacements for this with better support, however we haven’t come across any viable solutions yet.

– Ed