Home → RoyalSlider HTML version issues →

Srcset example with webp and jpg

• Edit

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 Dmytro 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/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/

   • Edit

2. 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

   • Edit

3. Support Staff 3 Posted by Dmytro 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.

   • Edit

4. 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

   • Edit

5. 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

   • Edit

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

   

   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-...

   • Edit

7. 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

   • Edit

8. Support Staff 8 Posted by Dmytro 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.

   • Edit