Several problems with RoyalSlider in the Full Screen mode

spantan's Avatar

spantan

27 Jan, 2016 09:03 PM

Hi Dmitry,

I'm experiencing few problems with the slider in the full screen mode.

I'm trying to achive a point when I have around 100px padding from the top and the bottom of the slider, and the caption (title) under the slide in the full screen mode.

I was trying for long time but without success, in addition some of the other website's elements float over the slider and I cannot make them disappear (tried the z-index property..).

Could you please take a look?

here's a link:
http://sashatamarin.com/working/dvir/artists/latifa-echakhch/

Thanks in advance,
Sasha

  1. Support Staff 1 Posted by Dmitry Semenov on 27 Jan, 2016 10:29 PM

    Dmitry Semenov's Avatar

    Hi,

    I'm trying to achive a point when I have around 100px padding from the top and the bottom of the slider, and the caption (title) under the slide in the full screen mode.

    .royalSlider.rsFullscreen {
       top: 100px !Important;
       bottom: 100px !important;
    }
    

    ... also make sure that you add the code after royalslider.CSS.

    in addition some of the other website's elements float over the slider and I cannot make them disappear (tried the z-index property..).

    If you can't find z-index that overlaps slider (it usually on relative-positioned element), you may hide elements via JS like so:

    // Add this to your theme functions.php
    function add_additional_rs_code() {
        ?>
    
        var sliderInstance = $('.royalSlider').data('royalSlider'); 
        sliderInstance.ev.on('rsEnterFullscreen', function() {
            $('.some-element-class').hide();
        });
        sliderInstance.ev.on('rsExitFullscreen', function() {
            $('.some-element-class').show();
        });
    
        <?php
    }
    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
    

    (just replace some-element-class with classname of element that overlaps slider).

  2. 2 Posted by spantan on 27 Jan, 2016 11:42 PM

    spantan's Avatar

    Dmitry, it perfectly worked! (:

    Thnaks a lot, I really appreciate this!

  3. 3 Posted by lukasildza on 02 Nov, 2017 04:57 PM

    lukasildza's Avatar

    so happy to havefound this post...
    thanks for the fix :) needed and working for bridge theme too

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