Adding a second caption

jerry's Avatar

jerry

02 Mar, 2021 11:41 PM

Trying to add a second caption to lazy loading slideshow with both captions outside the image.
Mock up shown in attachment.

Both captions need to change with each slide.

  1. Support Staff 1 Posted by Dmitry Semenov on 03 Mar, 2021 02:43 PM

    Dmitry Semenov's Avatar

    Hello,

    Here is an example on how to create "1 of X" indicator http://help.dimsemenov.com/kb/royalslider-javascript-api/creating-s... , you may use similar technique to create custom captions. sliderInstance.currSlide contains all data about the current slide.

  2. 2 Posted by jerry on 10 Mar, 2021 03:20 PM

    jerry's Avatar

    Thanks for the quick reply. Took a bit of research but now working but I had to change to img version as lazy loading didn't work
    var newCaption = $('<div class="rsGTitle"></div>').appendTo('.extra-quote');
    function updCaption() {
    newCaption.html( slider.currSlide.content.context.title );
    }
    slider.ev.on('rsAfterSlideChange', updCaption);
    updCaption();
    Then added title tag to img version.

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • Web-page-for-Night-Sea-Journeys.jpg 100 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