Patch for RoyalSlider 9.5.7 with srcset & lazyload support

travis's Avatar

travis

16 Mar, 2017 07:29 PM

Hello,

Because I needed it, I investigated writing a plugin for srcset support, however was unable to get it to work because some of the things I needed to be able to modify (to support srcset WITH lazyload <a> tags) seemed to have no way to tie into the main functions. So instead I modified the main RS code file (patch attached). I realize this isn't ideal.

I read elsewhere on this forum that there were problems getting srcset to work with naturalsize and currentsrc - it's possible this only works for my use and may not work for other configurations. YMMV.

To use, go with the <a> or <div> format, and specify data-rsSrcset and data-rsSizes in your tag, along with the normal href or contents url as normal. This version of RS will create the image tags as needed with the srcset and sizes tags, allowing the browser to choose the proper image to load. I suspect you REALLY need to provide dimensions for your image, but you should be doing that if you're using srcset anyway (since you at least need to specify widths in the sizes attribute - so you may as well provide the actual dimensions as well).

eg:

<a class="rsImg" 
     href="/path/to/default-image.jpg" 
     data-rsSrcset="/path/to/small-image.jpg 200w, /path/to/large-image.jpg 400w" 
     data-rsSizes="100vw">
Caption
</a>

This patch also provides support for adding additional class names to your img/a/div tags, which will be copied through to the resulting image. So, for example:

<a class="rsImg my-own-class" 
     href="/path/to/default-image.jpg" 
     data-rsSrcset="/path/to/small-image.jpg 200w, /path/to/large-image.jpg 400w" 
     data-rsSizes="100vw">
Caption
</a>
Will create an <img> tag with class="rsImg my-own-class", which (again) I needed so included.

As mentioned above, this works for me, but it's possible (because of all the ways royal slider can be used) that it won't work in all situations. Use at your own risk.

Cheers!

  1. Support Staff 1 Posted by Dmitry Semenov on 16 Mar, 2017 09:10 PM

    Dmitry Semenov's Avatar

    Hello,

    Thanks a lot for sharing, I'll take a look. Check this fiddle http://jsfiddle.net/DmitrySemenov/9zkqsgcx/ , it adds similar functionality, but just via public methods (the downside is that you have to manually position the image, but "fit" scale mode can be implemented just via CSS in modern browsers).

  2. 2 Posted by travis on 20 Mar, 2017 04:03 PM

    travis's Avatar

    Saw that yes, was unable to get it working reliably. Unfortunately I went through so many attempts / itterations I don't remember exactly why. I think the rsAfterContentSet event was being triggered (sometimes) after the tag had already been replaced by the tag, and so the attributes were no longer available (and the browser had already started loading the . This may have been something to do with how my RS instance was configured (eg: could have been completely my fault, I can't say for sure). I wasn't able to track it down / find the cause, so created this patch instead.

  3. 3 Posted by plantsbook on 09 Jun, 2017 07:04 PM

    plantsbook's Avatar

    Dmitry, your method works. But sometimes the script executes before the image is loaded (when it's big and also not cached). First slide doesn't get correct height and slideshow collapse. It appears correctly on window resize or when prev/next button is clicked. So the first slide height needs to be set manually somehow. Do you see some ways to solve it?

  4. Support Staff 4 Posted by Dmitry Semenov on 10 Jun, 2017 05:46 AM

    Dmitry Semenov's Avatar

    If you're using autoHeight, it gets more complicated, as you'll need to call updateSliderSize(true) method after the image(s) are loaded (as it's not possible to retrieve size of an image before).

    As an alternative, if you know dimensions of the image when generating markup on backend, you may use famous padding-bottom trick to create a container with the corresponding aspect ratio and put the image in it.

    Otherwise, if you're not using autoHeight, the fiddle at http://jsfiddle.net/DmitrySemenov/9zkqsgcx/ loads images only after slider initialization. Please create your fiddle or link to the page that you're working on.

  5. 5 Posted by plantsbook on 10 Jun, 2017 10:52 AM

    plantsbook's Avatar

    I have put update size like this

    ...
    $('.royalSlider .rsSlide').each(function() {
       updateCurrentImage($(this).children().first());
    });
    slider.updateSliderSize(true);

    but that doesn't help.

    The other problem here is caption. Script doesn't grab it from the img alt, only from the link text, but link should have rsImg class, which breaks all the srcset script thing. http://jsfiddle.net/plantsbook/zjzsv35d/ (two first slides – with rsImg class and without it)

  6. 6 Posted by plantsbook on 10 Jun, 2017 12:24 PM

    plantsbook's Avatar

    And actually dev version of the script and minified works differently at auto height. Dev version gives 1px heigh.

  7. 7 Posted by plantsbook on 10 Jun, 2017 06:13 PM

    plantsbook's Avatar

    Solve it with
    img.onload = function(){slider.updateSliderSize(true);};
    for the first slide.
    and caption with figure element (.rsCaption) inside lazyload anchor.

  8. 8 Posted by andrnimm on 16 Jun, 2017 01:00 AM

    andrnimm's Avatar

    Hi Dmitry,
    Since browser support for currentSrc, naturalWidth and naturalHeight is pretty broad right now, it seems like it would be good time to merge a srcset patch into the script.

    I find myself looking for this patch everytime i update a site. It seems to defeat the purpose if it can't be used with Lazy Load.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • rs957-srcset-patch.txt 3.41 KB

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