Option for framing the images

pascal's Avatar


12 Jan, 2017 09:46 PM


For my photo gallery, I wanted to have a framing option that allows to show the photos as in a true gallery, with a frame to enhance it; I needed this frame to be either fixed size, or resized when the photos are fitted to the window (for instance on mobile).
I've looked in the forum, and I found a few topics, but not a really simple solution as I wished.

I therefore want to propose the following change (see code file attached); in short it adds 2 parameters:
that allow to specify a framing either constant in pixel, or proportional in % to the largest side of the picture (or combined).
It is automatically taken into account when the image is prepared and when the window is resized.
The aspect of the frame can be set by setting the background of the rsImg component vi Css.

Demo here:

I just post it here as if you care top include it or similar to your code, then I can always download the latest.

Thanks for your great plugin!

  1. Support Staff 1 Posted by Dmitry Semenov on 12 Jan, 2017 10:38 PM

    Dmitry Semenov's Avatar


    You may just disable default js-based scaling (imageScaleMode:'none', imageAlignCenter:false) and implement the same fit behaviour via CSS, here is example http://codepen.io/dimsemenov/pen/PWNrrz

    It doesn't work in ie7 though.


  2. 2 Posted by pascal on 12 Jan, 2017 10:47 PM

    pascal's Avatar

    This is is good for the fixed size border, but one of my goal is that the border remains a fixed percentage of the size of the image (so it would be 50 pixel wide when the photo is 1000 pixels, but if the photo is reduced to 500 pixels because of the window size, it should become maybe 25 pixel wide.
    Now maybe this is also doable via CSS, I'd have to think.

  3. Support Staff 3 Posted by Dmitry Semenov on 13 Jan, 2017 06:53 AM

    Dmitry Semenov's Avatar

    In case you want JS-based solution, you may disable scaling options the same way and use rsAfterContentSet event, e.g.:

    slider.ev.on('rsAfterContentSet', function(e, slideObject) {
        // fires every time slide content is loaded and added to DOM
        // console.log(slideObject.content);

Reply to this discussion

Internal reply

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

Attaching KB article:


Already uploaded files

  • jquery.royalslider.js 94.4 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


? 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