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

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