jqueryhtmlsliderroyal-slider

Royal Slider not adding caption


hey there just a simple one that i cant seem to get right.

i am implementing the royal slider on the site i am working on. i have it running inside a image of a laptop, what i would like is when you are scrolling through the images for there to be a caption at the bottom of each image. i am just using simple images so the documentation here recommended that i just use the alt in the image and the plugin will just pick it up, only that it doesnt.

my HTML looks like this:

<div class="laptopBg">
  <img src="/images/laptop.png" class="imgBg" width="707" height="400">
  <div id="slider-toolkit" class="royalSlider rsDefaultInv">
    <img src="/images/t1.jpg" alt="the toolkit landing page" />
    <img src="/images/t2.jpg"/>
    <img src="/images/t3.jpg"/>
    <img src="/images/t4.jpg"/>
  </div>
</div>

the settings i have in my royal slider are the following:

 function makeRoyalSlider(systemName) {
   $('#slider-' + systemName).royalSlider({
    autoHeight: false,
    arrowsNav: true,
    arrowsNavAutoHide: false,
    fadeInLoadedSlide: false,
    globalCaption:true, //this is the option they say is required for rendering captions.
    controlNavigationSpacing: 0,
    controlNavigation: 'bullets',
    imageScaleMode: 'fill',
    imageAlignCenter: true,
    loop: false,
    loopRewind: true,
    numImagesTopReload: 6,
    keyboardNavEnabled: true,
    autoScaleSlider: true,  
    autoScaleSliderWidth: 486,     
    autoScaleSliderHeight: 315
  }).data('royalslider');
 };

has anyone worked with the royal slider?? or had a similar situation that you got through?? i did try using something simular with this

 <figure class="rsCaption">This caption <b>HTML</b> text will be used.</figure>

so that the class "rsCaption" is present but that just creates a new slide between the images


Solution

  • For some reason the .js file did not handle the globalCaption flag. Copied the latest version from the author and captions worked as explained in the documentation.

    http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js

    To move the captions outside the slider container add this appendTo your royalSlider call.

    // initialize
    $('#photos').royalSlider({ ... globalCaption: true, ... });
    
    // Move caption container, auto refresh when slides change
    $('.rsGCaption').appendTo('.new-container');