tag:help.dimsemenov.com,2012-08-16:/discussions/royalslider-wordpress/47437-caption-under-image-and-fullscreen-modeRoyalSlider: Discussion 2018-08-30T15:00:17Ztag:help.dimsemenov.com,2012-08-16:Comment/459847592018-08-29T04:10:07Z2018-08-29T04:10:07ZCaption under image and Fullscreen mode <div><p>I succeeded to get the description of the image between the inage and the thumbs using the class rsCaption and adding your suggestions:<br>
markup:<br></p>
<div class="rsContent"><br>
{{image_tag}}
<p class="rsCaption detail">{{description}}</p>
{{thumbnail}} {{#link_url}} <a class="rsLink" href="{{link_url}}">{{title}}</a> {{/link_url}}</div>
<br>
and in my functions.php:<br>
function add_additional_rs_code() {<br>
?&gt; $('.royalSlider').after( $('.rsGCaption') ); $('.rsGCaption').after( $('.rsNav') ); &lt;?php } add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
<p>The caption is places in a div rsGCaption outside the royalSlider container. With my styling I can not get rid of the rsFullscreen class.<br>
My testing site is here:</p>
<p><a href="https://www.cluysenaer.nl/cluysenaer/project-gelderse-canons/">https://www.cluysenaer.nl/cluysenaer/project-gelderse-canons/</a></p>
<p>With or without Fullscreenmode I want to have text visible beneath the image. Maybe you have a solution?</p>
<p>Kind regards Han</p></div>hansinketag:help.dimsemenov.com,2012-08-16:Comment/459847592018-08-29T05:03:24Z2018-08-29T05:03:24ZCaption under image and Fullscreen mode <div><p>Hello,</p>
<p>The caption must be within .royalSlider element to be visible in fullscreen, as .royalSlider element gets stretched to fullscreen.</p>
<p>Fullscreen content can be modified in two ways:</p>
<ul>
<li>via CSS: In fullscreen, slider root element gets class <code>rsFullscreen</code>, you may use it to apply different styling.</li>
<li>via JS: using rsEnterFullscreen and rsExitfullscreen events:</li>
</ul>
<pre>
<code>var slider = $('.royalSlider').data('royalSlider');
slider.ev.on('rsEnterFullscreen', function() {
// enter fullscreen mode
});
slider.ev.on('rsExitFullscreen', function() {
// exit fullscreen mode
});</code>
</pre>
<p>Dmitry</p></div>Dmitry Semenovtag:help.dimsemenov.com,2012-08-16:Comment/459847592018-08-30T11:17:58Z2018-08-30T11:17:58ZCaption under image and Fullscreen mode <div><p>That works adding either .after (exit fullscreen and initial) or .prepend (enter fullscreen)<br>
$('.royalSlider').after( $('.rsGCaption') ); $('.royalSlider').prepend( $('.rsGCaption') ); Prepend places the caption again in the container so I could even style it in a different way.</p></div>hansinke