Full Screen isn't quite fullscreen?
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.
-
image.png 725 KB
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
Support Staff 1 Posted by Dmitry Semenov on 27 Sep, 2012 07:34 PM
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
jason closed this discussion on 28 Sep, 2012 06:32 AM.