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.

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