Different image fill types

(anonymous)'s Avatar

(anonymous)

23 Feb, 2018 01:46 PM

Hi, in the backend I know that you can choose for images to fill the slider or fit into it, but for the next website I'm building, my client wants a fullscreen slideshow where the first image fills the entire page, but the subsequent images need to 'fit' into it, so that none of them are cropped out.

Is there a simple way to do this?

thanks!

  1. Support Staff 1 Posted by Dmitry Semenov on 23 Feb, 2018 06:45 PM

    Dmitry Semenov's Avatar
  2. 2 Posted by (anonymous) on 26 Feb, 2018 05:10 PM

    (anonymous)'s Avatar

    Thanks! Your slider is really fantastic, the best I’ve used!

  3. 3 Posted by (anonymous) on 26 Feb, 2018 05:12 PM

    (anonymous)'s Avatar

    Does this work in Wordpress, I’m not sure where to add this code?

  4. Support Staff 4 Posted by Dmitry Semenov on 26 Feb, 2018 07:23 PM

    Dmitry Semenov's Avatar

    Apologies, for some reason I thought you were asking about the non-WP version.

    You may use new_rs_before_js_init_code filter to run code before slider is initialized, e.g.:

    // add to theme functions.php
    function add_rs_code() {
        ?>
        $('.royalSlider').royalSlider({
             imageScaleMode: function(slideObject) {
                      return 'fill';
             },
             // other optons..., for example: 
             autoScaleSlider: true,
             imageAlignCenter: true
        });
        <?php
    }
    add_action('new_rs_before_js_init_code', 'add_rs_code');
    

    Note that it'll overwrite all default options, you'll need either to copy-paste them from auto-generated initialization code, or add them manually, list of available options is here http://dimsemenov.com/plugins/royal-slider/documentation/#options

  5. 5 Posted by (anonymous) on 04 Mar, 2018 06:37 PM

    (anonymous)'s Avatar

    Hi I’m not really sure how this works. How do I trigger the change from fill to fit between slides?

    I have another slider on other posts that has completely different styling. Can this still work?

    thanks
    Matt

  6. Support Staff 6 Posted by Dmitry Semenov on 04 Mar, 2018 10:42 PM

    Dmitry Semenov's Avatar

    How do I trigger the change from fill to fit between slides?

    In a function that you provide to imageScaleMode check for the current image URL or index, e.g.:

    imageScaleMode: function(slideObject) {
      if (slideObject.id === 0) {
         return 'fill';
      } else {
         return 'fit';
      }
    }
    

    If you aren't experienced in JS - I can't assist much, as there is no UI for this feature in WP version.

    I have another slider on other posts that has completely different styling. Can this still work?

    Each slider has a specific class, for example, if slider ID is 3, its selector would be $('.new-royalslider-3').

  7. 7 Posted by (anonymous) on 15 May, 2018 02:52 PM

    (anonymous)'s Avatar

    Hi Dmitry,

    Hope you are well

    I’m looking to create an effect I haven’t seen on any slideshows at the moment, but they have it on the Burberry App. Its basically like your 'visible nearby images' template, but the image you scroll away from doesn’t move, creating a stacking effect. I’ve taken a video of what I mean below:

    https://youtu.be/aMLV7f-3b08

    Is this something its possible to recreate with RoyalSlider?

    thanks
    Matt Mcallen

  8. Support Staff 8 Posted by Dmitry Semenov on 15 May, 2018 06:41 PM

    Dmitry Semenov's Avatar

    There is no option for such effect, unfortunately.

  9. 9 Posted by (anonymous) on 16 May, 2018 07:36 AM

    (anonymous)'s Avatar

    OK thanks for getting back to me. Maybe you should make an extension for this. I think its going to be really popular soon!

    Matt

  10. 10 Posted by (anonymous) on 21 May, 2018 12:26 PM

    (anonymous)'s Avatar

    Hi, in the WP version of Royalisder I’m using the image scale padding option to great effect to make sure the slideshow image never gets too close to the edges of its container: https://mcallen.eu/awake/ <https://mcallen.eu/awake/>

    But my issue is that this value is set in pixels, so as the screen gets smaller, my image scales, but the padding stays the same, so it loses the nice ratio of padding-to-image.

    Is there a way to set this as a percentage? Or perhaps al alternative method that will help me achieve the same effect?

    thanks
    Matt McAllen

  11. Support Staff 11 Posted by Dmitry Semenov on 21 May, 2018 05:42 PM

    Dmitry Semenov's Avatar

    Hello,

    You may disable default scaling options:

    imageScaleMode: 'none',
    imageAlignCenter: false
    

    and use just CSS to scale images, e.g. like this https://codepen.io/dimsemenov/pen/jhsJL Wrap image with an extra container and use padding with CSS media queries to dynamically change it.

  12. 12 Posted by (anonymous) on 21 May, 2018 05:44 PM

    (anonymous)'s Avatar

    Thanks, but will this work for the WP version? I dont know if I can add additional divs

  13. Support Staff 13 Posted by Dmitry Semenov on 21 May, 2018 06:56 PM

    Dmitry Semenov's Avatar

    Yes, it can work for WP version too, in General Options click on edit slide markup and wrap {{image_tag}} with the desired element.

    Image scaling and centering can be disabled in Image Options section.

  14. 14 Posted by (anonymous) on 21 May, 2018 06:59 PM

    (anonymous)'s Avatar

    Ah thankkyou for this sage advice, as always!

  15. 15 Posted by (anonymous) on 31 May, 2018 06:12 PM

    (anonymous)'s Avatar

    Hi Dmity,

    I have a further issue. The advice you gave me to keep the image centred and proportional worked really well, but I have an problem with the captions

    My client wants them to align to the bottom left corner of the images like in the attached screenshot, but as the image has a margin of ‘auto’ I’m finding it impossible to align it there at all screen sizes - any suggestions?

    https://mcallen.eu/awake/ <https://mcallen.eu/awake/>

    thanks
    Matt McAllen

  16. Support Staff 16 Posted by Dmitry Semenov on 31 May, 2018 08:20 PM

    Dmitry Semenov's Avatar

    Hello,

    You'll need to adjust both HTML structure of a slide and CSS, so it looks something like https://jsfiddle.net/krm42pyx/

Reply to this discussion

Internal reply

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

Attaching KB article:

»

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