Full Screen isn't quite fullscreen?

jason's Avatar

jason

27 Sep, 2012 10:43 AM

Was wondering if you have come across before?

CSS

#photos, .slider {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: auto;
}

JS

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: false
}).data('royalSlider');

There is a 4px gap in Firefox. There is a bigger gap on the iPad. The image isn't stretching to fill the screen. When I inspect the elements in Firebug the .slider container is 641px height. .rsOverflow is 637px. The image is 1800x1200 so should be big enough to stretch.

Do you have any idea why this is happening? I have commented out all other JS and CSS on the page and it still occurs.

  1. Support Staff 1 Posted by Dmitry Semenov on 27 Sep, 2012 07:34 PM

    Dmitry Semenov's Avatar

    Hi,

    You're probably looking for imageScalePadding option. http://dimsemenov.com/plugins/royal-slider/documentation/#options

    Also, 1800 wide image is way to big for web, don't use it as many PC's won't handle it fast.

    Dmitry

  2. jason closed this discussion on 28 Sep, 2012 06:32 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