Problem with fullscreen and picture tag

marc.schwarz's Avatar

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

    Dmitry Semenov's Avatar

    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.

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