Slider gets transparent in Full Screen mode

(anonymous)'s Avatar

(anonymous)

07 Feb, 2020 11:16 AM

Hi Dimitri,

Yesterday I bought the Royal Slider for WP and in general, I'm happy with it. Only thing is that when the slider is in FS mode, the slider gets transparent and shows the original website (WooCommerce product) in the background. See example @:

https://www.mobilheim.pl/product/beispiel-gebraucht-mh-von-e10-000-auf-individuelle-bestellung/

Please tell me what to do to eliminate this issue.

Many thanks in advance and with kind regards,
Jurn

  1. Support Staff 1 Posted by Dmitry Semenov on 08 Feb, 2020 05:55 AM

    Dmitry Semenov's Avatar

    Hello,

    Styling of your theme prevents slider from getting on top of other content. If you are not experienced in CSS, you may use such code:

    // Add to your theme functions.php
    // Moves slider to root element when fullscreen entered
    function add_additional_rs_code() {
        ?>
    
        var sliderEl = $('.royalSlider');
        var sliderInstance = sliderEl.data('royalSlider'); 
        var parentEl;
        sliderInstance.ev.on('rsEnterFullscreen', function() {
            if (!parentEl) {
              parentEl = sliderEl.parent();
            }
            $('body').append(sliderEl);
        });
        sliderInstance.ev.on('rsExitFullscreen', function() {
            if (parentEl) {
              parentEl.append(sliderEl);
            }
        });
    
    
        <?php
    }
    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
    
  2. 2 Posted by (anonymous) on 13 Feb, 2020 09:20 PM

    (anonymous)'s Avatar

    Hi Dimitri,

    Many thanks for your quick response. I was away for a few days. I'm more familiar with adding custom CSS in my Theme Option than with function.php.
    Is there a possibility to add some CSS to my Theme Options in the DIVI menu?
    If yes, can you please provide me with this CSS?

    Many Thanks,
    Jurn

  3. Support Staff 3 Posted by Dmitry Semenov on 14 Feb, 2020 11:05 PM

    Dmitry Semenov's Avatar

    CSS-only changes might affect other parts of your theme. Since I'm not familiar with it - I can't recommend specific changes.

    If you don't want to modify functions.php, you may add JavaScript-only code:

    jQuery(document).ready(function($) {
        var sliderEl = $('.royalSlider');
        var sliderInstance = sliderEl.data('royalSlider'); 
        var parentEl;
        sliderInstance.ev.on('rsEnterFullscreen', function() {
            if (!parentEl) {
              parentEl = sliderEl.parent();
            }
            $('body').append(sliderEl);
        });
        sliderInstance.ev.on('rsExitFullscreen', function() {
            if (parentEl) {
              parentEl.append(sliderEl);
            }
        });
    });
    
  4. 4 Posted by (anonymous) on 01 Mar, 2020 08:27 PM

    (anonymous)'s Avatar

    Hi Dimitri,

    Finally, I've managed to add the code you provided in function.php

    This video helped me a lot:

    https://www.youtube.com/watch?v=N9VNXh506ys

    Maye interesting for future customers like me :-).

    Many thanks,

    Jurn

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