Pull in the current slide caption?

Jer's Avatar

Jer

27 May, 2021 07:44 PM

How would I pull in the current slide caption? Specifically I want to use the API to set another element's innerHtml as the caption text...

From what I can tell there is no way to do it using currSlide (unless I am missing something, and I probably am).

  1. Support Staff 1 Posted by Dmitry Semenov on 28 May, 2021 06:45 AM

    Dmitry Semenov's Avatar

    Hello,

    You can get current slide caption like this:

    $('.royalSlider').data('royalSlider').currSlide.caption
    

    and if it's an element, like this:

    $('.royalSlider').data('royalSlider').currSlide.caption.text()
    

    (this also might be handy http://help.dimsemenov.com/kb/royalslider-javascript-api/creating-s... )

  2. 2 Posted by Jer on 28 May, 2021 03:54 PM

    Jer's Avatar

    I am using the default "gallery" I have the script below. Outside the slider I have an element with id="slide-caption"

    The slide change event fires when the page loads (and updates the element like it should.), but it doesn't fire after that. So, it only fires once.

        <script id="addJS">jQuery(document).ready(function($) {
      $('#gallery-1').royalSlider({
        fullscreen: {
          enabled: true,
          nativeFS: true
        },
        controlNavigation: 'thumbnails',
        autoScaleSlider: true, 
        autoScaleSliderWidth: 960,     
        autoScaleSliderHeight: 850,
        loop: false,
        imageScaleMode: 'fit-if-smaller',
        navigateByClick: true,
        numImagesToPreload:2,
        arrowsNav:true,
        arrowsNavAutoHide: true,
        arrowsNavHideOnTouch: true,
        keyboardNavEnabled: true,
        fadeinLoadedSlide: true,
        globalCaption: true,
        globalCaptionInside: true,
        thumbs: {
          appendSpan: true,
          firstMargin: true,
          paddingBottom: 4
        }
      });
      //add some other stuff
      var sliderInstance = $(".royalSlider").data('royalSlider');
      var theCaption = $('.royalSlider').data('royalSlider').currSlide.caption.text()
    
      function slideDynamics() {
        //update the caption
        document.getElementById("slide-caption").innerHTML = theCaption;  
    }
        sliderInstance.ev.on('rsAfterSlideChange', slideDynamics);
        slideDynamics();
    });
    </script>
    
  3. Support Staff 3 Posted by Dmitry Semenov on 28 May, 2021 06:17 PM

    Dmitry Semenov's Avatar

    You should retrieve the caption within rsAfterSlideChange event (currently you retrieve it only once at initialization, so it shows only the first slide caption).

  4. 4 Posted by jer on 29 May, 2021 08:00 AM

    jer's Avatar

    From what I can see, I have the function slideDynamics firing on

        sliderInstance.ev.on('rsAfterSlideChange', slideDynamics);
        slideDynamics();

    I am new to jQuery and javascrpt in general, so I might just not understand.

    Is it because it's loaded at (document).ready?

    Should I just add a fresh script to house all of the "dynamics"?

  5. Support Staff 5 Posted by Dmitry Semenov on 29 May, 2021 08:45 PM

    Dmitry Semenov's Avatar

    You may do it like this:

    var sliderInstance = $(".royalSlider").data('royalSlider');
    function slideDynamics() {
        var theCaption = sliderInstance.currSlide.caption.text()
        document.getElementById("slide-caption").innerHTML = theCaption;  
    }
    sliderInstance.ev.on('rsAfterSlideChange', slideDynamics);
    slideDynamics();
    
  6. 6 Posted by jer on 30 May, 2021 12:57 AM

    jer's Avatar

    I think the var is being set too early somehow.... With the scripts below (the default gallery template and the script you posted) the slider data isn't being pulled in, BUT if I just type the slideDynamics script directly into the browser console, it works.

    If I just run the script on the page, and do console.log(sliderInstance), it doesn't pull the slider in. if I type

    var sliderInstance = $(".royalSlider").data('royalSlider');
    

    into the browser console then console.log(sliderInstance) it pulls thes the slider in as a variable.

    So, for some reason it works if I run the js after the page is completely loaded, but not if I run it in the page markup like below.

    <script id="addJS">jQuery(document).ready(function($) {
        $('#gallery-1').royalSlider({
          fullscreen: {
            enabled: true,
            nativeFS: false,
          },
          controlNavigation: 'thumbnails',
          autoScaleSlider: true, 
          autoScaleSliderWidth: 960,     
          autoScaleSliderHeight: 750,
          fitInViewport:true,
          loop: false,
          imageScaleMode: 'fit-if-smaller',
          navigateByClick: true,
          numImagesToPreload:2,
          arrowsNav:true,
          arrowsNavAutoHide: true,
          arrowsNavHideOnTouch: true,
          keyboardNavEnabled: true,
          fadeinLoadedSlide: true,
          globalCaption: true,
          globalCaptionInside: true,
          thumbs: {
            appendSpan: true,
            firstMargin: true,
            paddingBottom: 4,
            orientation:'horizontal',
          }
        });
      });
      </script>
    
      <script>
    
    var sliderInstance = $(".royalSlider").data('royalSlider');
    function slideDynamics() {
        var theCaption = sliderInstance.currSlide.caption.text()
        document.getElementById("slide-caption").innerHTML = theCaption;  
    }
    sliderInstance.ev.on('rsAfterSlideChange', slideDynamics);
    slideDynamics();
      </script>
    
  7. Support Staff 7 Posted by Dmitry Semenov on 30 May, 2021 04:38 AM

    Dmitry Semenov's Avatar

    You should put code that relies on slider instance right after the initialization, like this:

    <script id="addJS">jQuery(document).ready(function($) {
        $('#gallery-1').royalSlider({
          fullscreen: {
            enabled: true,
            nativeFS: false,
          },
          controlNavigation: 'thumbnails',
          autoScaleSlider: true, 
          autoScaleSliderWidth: 960,     
          autoScaleSliderHeight: 750,
          fitInViewport:true,
          loop: false,
          imageScaleMode: 'fit-if-smaller',
          navigateByClick: true,
          numImagesToPreload:2,
          arrowsNav:true,
          arrowsNavAutoHide: true,
          arrowsNavHideOnTouch: true,
          keyboardNavEnabled: true,
          fadeinLoadedSlide: true,
          globalCaption: true,
          globalCaptionInside: true,
          thumbs: {
            appendSpan: true,
            firstMargin: true,
            paddingBottom: 4,
            orientation:'horizontal',
          }
        });
    
    
        var sliderInstance = $(".royalSlider").data('royalSlider');
        function slideDynamics() {
            var theCaption = sliderInstance.currSlide.caption.text()
            document.getElementById("slide-caption").innerHTML = theCaption;  
        }
        sliderInstance.ev.on('rsAfterSlideChange', slideDynamics);
        slideDynamics();
    
      });
      </script>
    

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