Changing the thumb widths based upon image size

dave5046's Avatar

dave5046

14 Nov, 2019 09:36 PM

I am trying to get the film strip thumbs to change their width based upon the actual size of the image. I am using Royal Slider for an art gallery web site and everything works great so far but many of the paintings are not square, they are, for example, 60" high by 48" wide and 48" high by 60" wide and there are other non-square paintings. Although the actual representation of the thumbnail is not that critical, I would like to be able to shrink or grow the width of the thumbnails to be more like the actual painting. I have tried many different options and tried a few CSS selectors but to be honest, I am not that proficient in either. I can get the BIG and normal image represented exactly the way I like but the thumbs just stay at 96 x 72, no matter what I try. Can the thumbnails be made to adjust based upon the actual of the painting? A typical painting HTML line looks like this:

<a class="rsImg" data-rsw="595" data-rsh="594" data-rsBigImg="http://www.galleriechiz.com/img/The Other Side of the Mountain L.jpg" href="http://www.galleriechiz.com/img/The Other Side of the Mountain M.jpg"><html><em>The Other SIde of the Mountain</em></html>, acrylic on canvas - 36" x 36"<img width="80" height="80" class="rsTmb" src="http://www.galleriechiz.com/img/The Other Side of the Mountain S.jpg" /></a>

The one above works fine since the actual painting is square altho0ugh the thumb is not actually square I could live with it.

<a class="rsImg" data-rsw="486" data-rsh="595" data-rsBigImg="http://www.galleriechiz.com/img/Looking Back L.jpg" href="http://www.galleriechiz.com/img/Looking Back M.jpg"><html><em>Looking Back</em></html>, acrylic on canvas - 60" x 48"<img width="72" height="90" class="rsTmb LB" src="http://www.galleriechiz.com/img/Looking Back S.jpg" /></a>

This HTML works fine except for the thumb which stays at 96 x 72 no matter what when I would like it to represent at 72 x 90.

  1. Support Staff 1 Posted by Dmitry Semenov on 15 Nov, 2019 01:10 PM

    Dmitry Semenov's Avatar

    Hello,

    Scrollable thumbnails must have the same width, there is no option to change this unless you directly modify thumbnails module.

    If scrolling is not crucial, you may use select tabs as navigation (controlNavigation:"tabs"). Each tab can have any HTML content (including an image) and can be styled however you wish.

    Dmitry

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac