diff --git a/css/lightbox.css b/css/lightbox.css index 3dbb3d3..625841d 100644 --- a/css/lightbox.css +++ b/css/lightbox.css @@ -155,13 +155,14 @@ } #overlay { - position: absolute; + position: fixed; top: 0; left: 0; z-index: 90; width: 100%; - height: 500px; + height: 100%; background-color: #000; + margin: 0px; } #overlay_default { diff --git a/js/lightbox.js b/js/lightbox.js index 1fb509c..2c070e4 100644 --- a/js/lightbox.js +++ b/js/lightbox.js @@ -264,7 +264,7 @@ var Lightbox = { $("#overlay").hide().css({ 'width': '100%', 'zIndex': '10090', - 'height': arrayPageSize[1] + 'px', + 'height': '100%', 'backgroundColor' : '#' + Lightbox.overlayColor }); // Detect OS X FF2 opacity + flash issue. @@ -440,6 +440,8 @@ var Lightbox = { if (zoomIn !== true) { var ratio = 1.0; // Shrink image with the same aspect. $('#bottomNavZoomOut, #bottomNavZoom').hide(); + $('#lightbox').css('position','fixed').css('top','60px'); + $('body').css('overflow','hidden'); if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) { ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h; if (!Lightbox.disableZoom && !Lightbox.isSlideshow) { @@ -453,6 +455,8 @@ var Lightbox = { else { $('#bottomNavZoom').hide(); + $('#lightbox').css('position','absolute').css('margin','20px').css('top','0px').css('left','0px').css('margin-right','100px'); + $('body').css('overflow','auto'); // Only display zoom out button if the image is zoomed in already. if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) { // Only display zoom out button if not a slideshow and if the @@ -662,7 +666,7 @@ var Lightbox = { var lightboxTop = (Lightbox.topPosition == '' ? (arrayPageSize[3] / 10) : Lightbox.topPosition) * 1; pageHeight = pageHeight + arrayPageScroll[1] + lightboxTop; } - $('#overlay').css({'height': pageHeight + 'px', 'width': arrayPageSize[0] + 'px'}); + $('#overlay').css({'height': '100%', 'width': '100%'}); // Gecko browsers (e.g. Firefox, SeaMonkey, etc) don't handle pdfs as // expected. @@ -865,6 +869,7 @@ var Lightbox = { }, end: function(caller) { + $('body').css('overflow','auto'); var closeClick = (caller == 'slideshow' ? false : true); if (Lightbox.isSlideshow && Lightbox.isPaused && !closeClick) { return;