如何使lightbox2响应

Question

我看这里：http://drupal.org/node/1630630但是这仅仅是为Drupal网站。是否有人知道如何调整常规lightbox2库以使其响应并在小型移动屏幕上显示？

的“响应”我的意思是图片应当根据屏幕大小显示。现在，它始终具有相同的大小，并且在小屏幕上需要滚动。

Answer 1

你应该只能够（使用CSS）在图像上设置max-width:100%。这是使图像响应所需的全部内容。如果lightbox2设置在图像上的风格，只是看在选择特异性和覆盖它

Answer 2

我用： .lb-image, .lb-dataContainer, .lb-outerContainer { max-width: 100%; height: auto !important; width: auto !important; }

Answer 3

好了，这是超级晚，但我碰到这个希望援助来为好。这两个代码片段的答案“有点”工作，但他们看起来很糟糕！

这个效果要好得多，IMO：

.lb-image, .lb-dataContainer { 
max-width: 100%; 
height: auto !important; 
width: 100%; 
} 

.lb-outerContainer { 
max-width: 100%; 
height: auto !important; 
} 

Answer 4

对于我来说，担任NickW说（谢谢你，由你帮我找到这个解决方案的方式），它只是需要一点点的变化：

@media only screen and (max-width: 680px) {.lb-dataContainer{ 
max-width: 80%; 
height: auto !important; 
width: auto !important; }.lb-outerContainer { 
max-width: 80%; 
height: auto !important; 
width: auto !important;}} 

灯箱没有问题，直到特定的屏幕尺寸，所以我用媒体查询该图像开始在较小的屏幕尺寸不配合的部分（在我的情况下，它是为680像素）。当容器不占用全部空闲宽度的屏幕时（它对我来说看起来更好），它对我来说最适合我，但它只是一个选择，所以只需检查它是如何工作的。 对于.lb-image，只需使用上面编写的代码即可。

Answer 5

感谢指针...使用以前的一些建议作为起点，然后有小提琴。

我正在使用LightBox2 v2.0的现有安装，而不是一个新的安装（并不得不重新编码图像等）的网站上工作，我决定只是有一个小提琴...

我的CSS如下。它现在完全响应。

的要点是改变宽度，最大宽度，高度和最大高度&！重要的。我发现，一旦我得到了对视口的响应宽度，#outerImagecontainer变得非常长，因此最大高度或固定高度。我也将宽度限制为768px，网站的宽度以及图片的宽度，扩大了它们显然是有损的。

lightbox，#lightbox img，#outerImageContainer，#hovernav，#imageDataContainer和#overlay都有一些编辑。

#lightbox{ position: absolute; max-height:700px; left: 0; width: 100%; z-index: 100; text- 

align: center; line-height: 0;} 
#lightbox img{ width:100%; height: auto;} 
#lightbox a img{ border: none; } 

#outerImageContainer{ position: relative; background-color: #fff; max-width: 760px; width:80% ! 

important; max-height:50%; height: auto !important; margin: 0 auto;font-size:11px !important; } 
#imageContainer{ padding: 10px; } 

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 25%; text-align: center; 

line-height: 0; } 
#hoverNav{ position: absolute; top: 0; left: 0; max-height:50%; width: 100%; z-index: 10; } 
#imageContainer>#hoverNav{ left: 0;} 
#hoverNav a{ outline: none;} 

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); 

/* Trick IE into showing hover */ display: block; } 
#prevLink { left: 0; float: left;} 
#nextLink { right: 0; float: right;} 
#prevLink:hover, #prevLink:visited:hover { background: url(/assets/lightbox2/images/prevlabel.gif) 

left 15% no-repeat; } 
#nextLink:hover, #nextLink:visited:hover { background: url(/assets/lightbox2/images/nextlabel.gif) 

right 15% no-repeat; } 

#imageDataContainer{ font: 85% arial, sans-serif; background-color: #fff; margin: 0 auto; line- 

height: 1.4em; overflow: auto; max-width: 760px; width: 80% !important; max-height:50px;} 

#imageData{ padding:0 10px; color: #666; } 
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold; } 
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }   
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}  

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: auto; background- 

color: #000; } 

Answer 6

我试着在这个页面上的每一个建议，发现他们都没有工作。所以在几个小时后，我根据捕获窗口大小事件编写了我自己的。

这里是我的解决方案，它可能看起来像一个很大的努力，但它出色的扩展时窗口大小的图像（这主要是基于JavaScript）：

灯箱。JS做到以下几点：

创建两个全局变量：

var preloader_Height; 
var preloader_Width; 

填充它们在preloader.onload功能在脚本的底部如下

preloader_Height = preloader.height; 
preloader_Width = preloader.width; 

那么（就在返回之前声明）：

//Hack is here, modifying scaling when window resize event handler is fired 
$(window).resize(function() { 

//Grabbing the padding (if there is any) 
containerTopPadding = parseInt($('.lb-container').css('padding-top'), 10); 
containerRightPadding = parseInt($('.lb-container').css('padding-right'), 10); 
containerBottomPadding = parseInt($('.lb-container').css('padding-bottom'), 10); 
containerLeftPadding = parseInt($('.lb-container').css('padding-left'), 10); 

//Calculating max image width and height to prevent the image going outside of screen 
windowWidth = window.innerWidth; 
windowHeight = window.innerHeight; 
maxImageWidth = windowWidth - containerLeftPadding - containerRightPadding - 20; 
maxImageHeight = windowHeight - containerTopPadding - containerBottomPadding - 120; 


//Checking for a fitting issue and also defining imageHeight and imageWidth 
if ((preloader_Width > maxImageWidth) || (preloader_Height > maxImageHeight)) { 
if ((preloader_Width/maxImageWidth) > (preloader_Height/maxImageHeight)) { 
     imageWidth = maxImageWidth; 
     imageHeight = parseInt(preloader_Height/(preloader_Width/imageWidth), 10); 
    } else { 
     imageHeight = maxImageHeight; 
     imageWidth = parseInt(preloader_Width/(preloader_Height/imageHeight), 10); 
    } 
} 

    //Forcing internal image to be 100% so it scales with its external container 
$(".lb-image").css("width", "100%"); 
$(".lb-image").css("height", "100%"); 

//Forcing the external container to match the new required image width and height 
$(".lb-outerContainer").css("width", imageWidth); 
$(".lb-outerContainer").css("height", imageHeight); 

//Scaling the information at the bottom showing image number and little cross 
$(".lb-dataContainer").css("width", imageWidth); 

//Defining width for the navigation buttons 
$(".lb-nav").css("width", imageWidth); 

//Centering vertically 
var center_offset = (maxImageHeight - imageHeight)/2.0; 
var top = $(window).scrollTop() + 10 + center_offset; 
$(".lightbox").css("top",top); 

}); 

此外，在lightbox.css中添加：

left:50%; 
transform: translateX(-50%); 

to .lb-nav。

最后，在lightbox.js添加

$(".lb-nav").css("width", imageWidth); //Setting image width for the lb-nav 

var center_offset = (maxImageHeight - imageHeight)/2.0; 
var top = $(window).scrollTop() + 10 + center_offset; 
$(".lightbox").css("top",top); 

到sizeContainer功能。

现在您应该可以随时按比例缩放您的窗口，并且您的图像将相应地缩放。