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
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');