Smooth Resize when making the browser bigger?

jason's Avatar

jason

25 Sep, 2012 09:03 AM

When the slider is initialized I am using the window width / height to specify the dimensions of the slideshow.

When I make the browser smaller the image resizes down really nicely. When I resize the browser up. The image gets bigger but the width of the slideshow is fixed so the image area appears cropped.

gallery.slider = $('#photos .slider').royalSlider({
            autoHeight: true,
            autoWidth: true,
            arrowsNav: false,
            fadeinLoadedSlide: false,
            controlNavigationSpacing: 0,
            navigateByClick: false,
            //imageScaleMode: 'fill',
            imageAlignCenter:true,
            loop: false,
            loopRewind: false,
            numImagesToPreload: 6,
            keyboardNavEnabled: true,
            autoScaleSlider: true,  
            autoScaleSliderWidth: $(window).width(),     
            autoScaleSliderHeight: $(window).height()
        }).data('royalSlider');

I have tried the following.

On Resize


// This does nothing.
if (gallery.slider) {
    gallery.slider..updateSliderSize();
}

Basically. All I need is a way for the slider to keep keep the dimensions of the browser window. I have had a look at the docs and I don't see a resize function that would do this.

Can you advice.

Thanks.

  1. jason closed this discussion on 25 Sep, 2012 09:10 AM.

Comments are currently closed for this discussion. You can start a new one.

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