captions below images - not container

emrah.kavlak's Avatar

emrah.kavlak

08 Mar, 2021 03:12 PM

Hi,

I'm trying to figure out how to place captions under the image - especially on mobile devices. I don't think there is such an option and there should be a way to do it via JS. Would you be able to help me out with this?

Thanks in advance.
E

  1. Support Staff 1 Posted by Dmitry Semenov on 08 Mar, 2021 09:31 PM

    Dmitry Semenov's Avatar

    Hello,

    You may move global caption inside any container via JS code:

    jQuery('.rsGCaption').appendTo('.container-name')
    

    (where container-name is CSS class of the container to which you want caption moved).

    If you aren't sure where to place JS code, refer to http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe...

  2. 2 Posted by emrah.kavlak on 09 Mar, 2021 09:58 AM

    emrah.kavlak's Avatar

    Hi Dmitry,

    Thank you. This wasn't exactly what I was looking for but figured out like this:

    I wanted to change the caption's position depending on the height of the image for mobile - to be just below the image. I hope this will be useful for others

    $('.royalSlider').each(function() {
                    var slider = $(this);
                    var sliderInstance = slider.data('royalSlider');
    
                    if(sliderInstance) {
    
                            var captionPos = function () {
                                    var imgh = sliderInstance.currSlide.holder.find('img').height();
                                    $('.rsGCaption')[0].style.marginTop = imgh/2+"px";
                            }
                            sliderInstance.ev.on('rsBeforeAnimStart', captionPos);
                            captionPos();
                    }
    
            });
    

    and then for the first load:

    var sliderInstance = $('.royalSlider').data('royalSlider');
        sliderInstance.ev.on('rsAfterContentSet', function (e, slideObject) {
    
                var imgh = sliderInstance.currSlide.holder.find('img').height();
                $('.rsGCaption')[0].style.marginTop = (imgh/2)+"px";
    
        });
    

    thanks!

  3. Support Staff 3 Posted by Dmitry Semenov on 09 Mar, 2021 12:53 PM

    Dmitry Semenov's Avatar

    thanks for sharing!

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