Srcset example with webp and jpg
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
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
Support Staff 1 Posted by Dmitry Semenov on 12 Nov, 2018 02:09 PM
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/jhsJLTo make it work with scripts like lazysizes you may use slider API and events like rsAfterSlideChange, e.g.:
But I'd recommend to just generate image/picture element dynamically, as shown at http://jsfiddle.net/DmitrySemenov/vsqtwr80/1/
2 Posted by info on 16 Nov, 2020 04:25 PM
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
Support Staff 3 Posted by Dmitry Semenov on 16 Nov, 2020 05:53 PM
Are you executing it after slider is initialized (after .royalSlider() call)? Please link to the page with the issue.
4 Posted by info on 16 Nov, 2020 06:18 PM
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 Posted by info on 16 Nov, 2020 07:08 PM
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
Support Staff 6 Posted by Dmitry Semenov on 17 Nov, 2020 10:03 AM
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 Posted by info on 17 Nov, 2020 01:28 PM
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
Support Staff 8 Posted by Dmitry Semenov on 17 Nov, 2020 01:51 PM
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.