Caption under image and Fullscreen mode

hansinke's Avatar

hansinke

29 Aug, 2018 04:10 AM

I succeeded to get the description of the image between the inage and the thumbs using the class rsCaption and adding your suggestions:
markup:


{{image_tag}}

{{description}}

{{thumbnail}} {{#link_url}} {{title}} {{/link_url}}

and in my functions.php:
function add_additional_rs_code() {
?> $('.royalSlider').after( $('.rsGCaption') ); $('.rsGCaption').after( $('.rsNav') ); <?php } add_action('new_rs_after_js_init_code', 'add_additional_rs_code');

The caption is places in a div rsGCaption outside the royalSlider container. With my styling I can not get rid of the rsFullscreen class.
My testing site is here:

https://www.cluysenaer.nl/cluysenaer/project-gelderse-canons/

With or without Fullscreenmode I want to have text visible beneath the image. Maybe you have a solution?

Kind regards Han

  1. Support Staff 1 Posted by Dmitry Semenov on 29 Aug, 2018 05:03 AM

    Dmitry Semenov's Avatar

    Hello,

    The caption must be within .royalSlider element to be visible in fullscreen, as .royalSlider element gets stretched to fullscreen.

    Fullscreen content can be modified in two ways:

    • via CSS: In fullscreen, slider root element gets class rsFullscreen, you may use it to apply different styling.
    • via JS: using rsEnterFullscreen and rsExitfullscreen events:
    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsEnterFullscreen', function() {
        // enter fullscreen mode 
    });
    slider.ev.on('rsExitFullscreen', function() {
        // exit fullscreen mode 
    });
    

    Dmitry

  2. 2 Posted by hansinke on 30 Aug, 2018 11:17 AM

    hansinke's Avatar

    That works adding either .after (exit fullscreen and initial) or .prepend (enter fullscreen)
    $('.royalSlider').after( $('.rsGCaption') ); $('.royalSlider').prepend( $('.rsGCaption') ); Prepend places the caption again in the container so I could even style it in a different way.

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