Aligning Slide Text to its corresponding Thumbnail

erik's Avatar

erik

28 Aug, 2017 02:51 PM

Hi Dmitry,

I want to add text to my slides which has to be aligned to the corresponding thumbnail. See my attachment.

How would you recommend doing this? I started by trying to get the thumbnail position and then applying it to the margins of .innerContent. But somehow I can't select this elements using jQuery.

<div class="royalSlider">
        <a class="rsContent" href="xxx">
            <img src="xxx.jpg" class="rsImg"/>
            <div class="rsInnerContent"><h3>Slide Text</h3></div>
            <div class="rsTmb">
                <img src="xxx.svg">
                <span>Thumbnail 1</span>
            </div>
        </a>
        <a class="rsContent" href="xxx">
            <img src="xxx.jpg" class="rsImg"/>
            <div class="rsInnerContent"><h3>Other Slide Text</h3></div>
            <div class="rsTmb">
                <img src="xxx.svg">
                <span>Thumbnail 2</span>
            </div>
        </a>
    </div>
$('.royalSlider').royalSlider({
        imageScaleMode: 'fill',
        imageScalePadding: 0,
        controlNavigation: 'thumbnails',
        arrowsNavAutoHide: false,
        slidesSpacing: 0,
        numImagesToPreload: 3,
        navigateByClick: false,
        minSlideOffset: 0,
        thumbs: {
            spacing: 0,
            autoCenter: false,
            fitInViewport: false
        }
    });
  1. Support Staff 1 Posted by Dmitry Semenov on 28 Aug, 2017 05:07 PM

    Dmitry Semenov's Avatar

    Hello,

    The plugin doesn't keep all slides in DOM, so you'll need to use rsAfterContentSet event that fires after some slide is added, for example:

    
    var slider = $('.royalSlider').data('royalSlider');
    var updateSlideContent = function(slideContent) {  
            // you may modify content here
        console.log('Slide content element is:', slideContent);
    };
    slider.ev.on('rsAfterContentSet', function(e, slideObject) {
        updateSlideContent(slideObject.content);
    });
    $('.royalSlider .rsSlide').each(function() {
        updateSlideContent( $(this).children().first() );
    });
    

    Set data-attribute index on your thumbnail element (rsTmb) and on a slide itself (rsContent) so you can find them easily in DOM.

  2. 2 Posted by erik on 29 Aug, 2017 06:53 PM

    erik's Avatar

    Got it working! Thank you for pointing me in the right direction.

    I still have a lot to learn about javascript, the DOM and jQuery objects though :) For example, how come it is possible to use .children().first() while .find('.className') not always seems to work...

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • slider-example.PNG 988 KB

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