Home → RoyalSlider HTML version issues →

Problem with fullscreen and picture tag

• Edit

marc.schwarz

18 Oct, 2020 10:31 PM

Hello

I could almost cover all my needs with the plugin. However, I am using picture tags for the slider. For example:

<picture>
<source srcset="img.webp" type="image/webp">
<source srcset="img.jpg" type="image/jpeg">
<img class="rsImg" data-rsBigImg="img-big.jpg" src="img.jpg">
</picture>

So Chrome gets the webp version of the picture, other browsers with non webp support the normal jpg. However, when I switch to Fullscreen, Chrome still shows me the small webp Version, since the plugin only changes the <img> src.

Is there already a solutions, how to deal with such a layout? I cant think of a solutions right now, the srcset should be changed too? Anyway, maybe there is someone who solved this problem.

Best Regards
Marc

1. Support Staff 1 Posted by Dmitry Semenov on 19 Oct, 2020 06:47 AM

   

   Hello,

   You'll need to remove rsImg class entirely and implement your own source switching, you may use events like:

   var slider = $('.royalSlider').data('royalSlider');
   slider.ev.on('rsEnterFullscreen', function() {
   
   });
   slider.ev.on('rsExitFullscreen', function() {
   
   });
   

   for example, to access img element of each slide:

   $.each(slider.slides, function(i, slide) {
     slide.content[0].querySelector('img').src = ...
   });
   

   You may either switch src directly, or set different srcset/media while in fullscreen.

   • Edit