thumb resposive width like space of image.

alberto's Avatar

alberto

16 Nov, 2019 09:34 AM

Hello dear Dimitri,
i need to make responsive all thumbs like the full width of big image above; this for don't get any space on the last thumb on the right.
I use bootstrap, and for resolve this problem, i put class img-responsive to tag "a", and col-xl-1 to tag "img",
but tag "A" became div in dom and delete my class.
how i can resolve it?
Thank you more

  1. Support Staff 1 Posted by Dmitry Semenov on 16 Nov, 2019 05:16 PM

    Dmitry Semenov's Avatar

    Hello,

    I do not fully understand the problem. If you can provide some example or link - that would help.

    Each slide and thumbnail can have any HTML content, so any class can be added to either of those. You can check example of image with html thumbnail here https://dimsemenov.com/plugins/royal-slider/documentation/#thumbnails

    Also, this might help if you're having sizing issues http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

    Dmitry

  2. 2 Posted by alberto on 19 Nov, 2019 03:22 PM

    alberto's Avatar

    hello Dimitry,
    thank you for your reply, i am developing at my new website.
    example:
    <a class="rsImg col-md-1" href="<?php echo $img_url; ?>"><img class="rsTmb img-fluid" alt="<?php echo $title; ?>" src="<?php echo $img_url_thumb; ?>" /></a>

    the col-md-1 class will be deleted and repleced by jquery in dom. or i need to delete space as picture

  3. Support Staff 3 Posted by Dmitry Semenov on 19 Nov, 2019 09:22 PM

    Dmitry Semenov's Avatar

    Root element of thumbnails navigation has class .rsNav, with .rsNavItem as children. The default styling is applied from selected skin CSS file, it's commented aswell.

    Also note that markup is heavily modified after initialization, if you want to have more control of it, your slide may look like this:

        <div class="rsContent">
            <img class="rsImg" src="image.jpg" alt="image description" />
            <div class="rsTmb">
              <img src="thumbnail.jpg" alt="" />
            </div>
        </div>
    

    I'd need a link to the page with the issue to assist more.

  4. 4 Posted by alberto on 25 Nov, 2019 09:20 AM

    alberto's Avatar

    Hello dear Dimitry,
    this is my website https://www.lignanosabbiadoro.com/hotel/hotel-colorado-817
    another question, sometimes i see the normal pucture 1024*768 stretched vertically and cutted on the right. thank you

  5. Support Staff 5 Posted by Dmitry Semenov on 25 Nov, 2019 08:19 PM

    Dmitry Semenov's Avatar

    Regarding the issue with thumbnails size - I've checked and dimensions are defined only via selected skin CSS file, you need to adjust their padding/width/margin to fit your needs.

    another question, sometimes i see the normal pucture 1024*768 stretched vertically and cutted on the right. thank you

    You're trying to combine autoHeight option with imageScaleMode, consider using just one, for example:

    imageScaleMode: 'fit',
    imageAlignCenter: true,
    autoHeight: false,
    

    this also might be handy http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

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