Jump to content

Archived

This topic is now archived and is closed to further replies.

janpeeters

Header and footer still visible when New Royal Slider is full-screen

Recommended Posts

janpeeters

I'm using New Royal Slider for a Flickr slideshow on the following page: https://janpeeters.nl/jms/over-energiek-leren/ When I activate the full-screen functionality the PL5 header and footer remain visible. I've tinkered around with z-index to try to heighten the full-screen slider but didn't get it to work. Could this be a 'bug' of 'oversight' in PL5? Or is it something outdated in NRS, it's the latest version, recently updated.

Share this post


Link to post
Share on other sites
Andrew

The problem is because Royal is not appending itself to the body and is instead trying to go full screen from inside the section. (not best practice)

You can fix this by adding this rule 

.pl-sn-pad{ z-index: initial; }

Although it may cause issues in other areas of the site. 

 

Share this post


Link to post
Share on other sites
janpeeters

Thanks @Andrew that works fine for now. I'll contact the plugins author and hope that he will change that behaviour. 

Share this post


Link to post
Share on other sites
janpeeters

Hi @Andrew I contacted Dmitry Semenov the author of Royal Slider. He answered the following:

Quote

Your theme is forcing z-index on relative-positioned element, which is impossible to overlap. If you don't want to apply above style all the time, you can use slider JS API and events like rsEnterFullscreen http://dimsemenov.com/plugins/royal-slider/documentation/#api to toggle it only when slider is is fullscreen mode.

 

 

Helas, his suggestion goes beyond my skills to implement. Don't know much about PHP :-( But I thought I reports back what he wrote.

The API he mentions says:

slider.ev.on('rsEnterFullscreen', function() {
    // enter fullscreen mode 
});

He didn't respond to your remark about 'not appending itself to the body'.

Jan

Share this post


Link to post
Share on other sites
janpeeters

@Simon @Andrew To get Royal Slider really full screen and on top of all Pagelines elements Andrew provided me with the following code:

.pl-sn-pad{ z-index: initial; }

That worked great but it stopped working the update to MegaNav so that dropdowns would not fall behind body containers when MegaNav was in a container.  See this issue:

 

Is there a way to get Royal Slider really full screen again? You can see this behaviour here (scoll down a bit for the slider):

http://energiek-leren.nl/over-energiek-leren/

Thanks for any help,

Jan

Share this post


Link to post
Share on other sites
janpeeters

Problem solved. I added !important to the code that Andrew provided and Royal Slider was again on top.

Share this post


Link to post
Share on other sites

×