Srcset example with webp and jpg

info's Avatar

info

12 Nov, 2018 01:25 PM

Hi,
Is there a working demo of Royal Slider with srcset? Preferable with webp and jpg fallback? Any luck with implementing Lazy Sizes from Farkas?
Regards & Thanks,
David

  1. Support Staff 1 Posted by Dmitry Semenov on 12 Nov, 2018 02:09 PM

    Dmitry Semenov's Avatar

    Hello,

    You may add IMG or PICTURE element to the slider without rsImg class, it will work the same way as it's added to the page. Use CSS to position/center image, for example: https://codepen.io/dimsemenov/pen/jhsJL

    To make it work with scripts like lazysizes you may use slider API and events like rsAfterSlideChange, e.g.:

    var slider = $(".royalSlider").data('royalSlider');
    slider.ev.on('rsAfterSlideChange', function(event) {
        console.log( slider.currSlide.content[0] ); // contents of the current slide
    });
    

    But I'd recommend to just generate image/picture element dynamically, as shown at http://jsfiddle.net/DmitrySemenov/vsqtwr80/1/

  2. 2 Posted by info on 16 Nov, 2020 04:25 PM

    info's Avatar

    This code gives this error in the console when I try it now!

    var slider = $(".royalSlider").data('royalSlider');
    slider.ev.on('rsAfterSlideChange', function(event) {
        console.log( slider.currSlide.content[0] ); // contents of the current slide
    });

    Royal-lazy-sizes.html:331 Uncaught TypeError: Cannot read property 'ev' of undefined
        at Royal-lazy-sizes.html:331

  3. Support Staff 3 Posted by Dmitry Semenov on 16 Nov, 2020 05:53 PM

    Dmitry Semenov's Avatar

    Are you executing it after slider is initialized (after .royalSlider() call)? Please link to the page with the issue.

  4. 4 Posted by info on 16 Nov, 2020 06:18 PM

    info's Avatar

    Hi Dmitry,

    https://yourweblab.nl/royal

    Try to use Farkas Lazy Sizes, but get a error and it doesn't work.

    Regards & Thanks,

    David

  5. 5 Posted by info on 16 Nov, 2020 07:08 PM

    info's Avatar

    Hi Dmitry,

    https://yourweblab.nl/royal/full-width-slider-srcset.html
    This is with normal srcset, but unfortunately it doesn't work. It doesn't load the portrait image on mobile phone.

    https://yourweblab.nl/psycho
    Here you can see the same picture and srcset working in a site I'm working on and I used a ordinary Bootstrap 4 slider.

    Regards & Thanks,

    David

  6. Support Staff 6 Posted by Dmitry Semenov on 17 Nov, 2020 10:03 AM

    Dmitry Semenov's Avatar

    This is with normal srcset, but unfortunately it doesn't work. It doesn't load the portrait image on mobile phone.

    Slider does not modify elements within a slide (such as picture). And it does work in the example that you linked, however your slider height is set to a fixed value so the image is cropped. This might help - http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

  7. 7 Posted by info on 17 Nov, 2020 01:28 PM

    info's Avatar

    Hi Dmitry,

    Both examples work now! Thanks a lot!

    This is with Farkas Lazy Sizes webp and jpg works perfect:
    https://yourweblab.nl/royal

    This is with normal srcset webp and jpg:
    https://yourweblab.nl/royal/full-width-slider-srcset.html
    Only the auto height adjustment is a bit slow on the srcset one! Did I do it the proper way with your code?

    Maybe a idea to make a codepen from the 2 examples?

    Regards,

    David

  8. Support Staff 8 Posted by Dmitry Semenov on 17 Nov, 2020 01:51 PM

    Dmitry Semenov's Avatar

    autoHeight measures height of the slide on initialization. So if your custom image is not loaded or dynamically changed - the height will be incorrect.

    To fight this you may use aspect ratio padding trick, or call slider.updateSliderSize(true) when image is updated, or avoid using autoHeight and define fixed height at proportion or pixels.

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