Jquery 如何使lightbox2具有响应性

我在这里查看了一下：但这只适用于Drupal站点。有人知道如何调整常规库，使其响应迅速并显示在小型移动屏幕上吗

---

我所说的“响应性”是指图片应根据屏幕大小显示。现在，它的大小总是一样的，在小屏幕上需要滚动。

您应该能够在图像上设置

最大宽度：100%

（使用CSS）。这就是使图像具有响应性所需的全部内容。如果lightbox2在图像上设置样式，只需查看选择器并覆盖它

我使用的：

.lb image、.lb dataContainer、.lb outerContainer{
最大宽度：100%；
高度：自动！重要；
宽度：自动！重要；
}

好吧，这太晚了，但我也遇到了需要帮助的问题。答案中的两段代码“有点”有用，但它们看起来很糟糕

国际海事组织说，这样做效果更好：

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

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

---

对我来说，正如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;}}

lightbox在特定屏幕大小之前没有问题，所以我使用媒体查询来查找图像开始不适合较小屏幕大小的部分（在我的例子中是680px）。当容器不占用屏幕的所有自由宽度时，它最适合我（对我来说它看起来更好），但它只是一个选择，所以请检查它如何适合您。

---

对于.lb图像，只需使用上面文章中编写的代码

谢谢你的指点……用以前的一些建议作为出发点，然后再做些修改

我在一个网站上工作，安装了LightBox2 v2.0，而不是一个新的安装（以及必须重新编码图像等），我决定只做一把小提琴

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

重点是改变宽度、最大宽度、高度和最大高度&！重要的。我发现，一旦获得了与视口对应的宽度，#outerImagecontainer就变得非常长，因此出现了最大高度或固定高度。我还将宽度限制在768px，网站和图像的宽度也限制在768px，放大它们显然是有损的

lightbox、#lightbox img、#outerImageContainer、#hovernav、#imageDataContainer和#overlay都进行了一些编辑。

---

我尝试了这一页上的每一个建议，发现没有一个有效。因此，几个小时后，我根据捕捉到的窗口大小调整事件编写了自己的

这是我的解决方案，看起来可能需要付出很多努力，但当窗口调整大小时，它可以出色地缩放图像（这主要是基于JavaScript的）：

在lightbox.js中，执行以下操作：

创建两个全局变量：

var preloader_Height;
var preloader_Width;

在preload.onload函数中填充它们，如下所示

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

然后在脚本底部（就在return语句之前）：

此外，在lightbox.css中添加：

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

到。磅导航

最后，添加

$(".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);

到lightbox.js中的sizeContainer函数

---

现在，您应该可以随意实时缩放窗口，图像也会随之缩放。

我使用以下css获得了令人满意的效果：.lb dataContainer、.lb outerContainer{max width:100%；height:auto！important；width:auto！important；}请不要只提供“代码解决方案”。描述一下为什么这对你有用。从一张图片到下一张图片的“变形”效果在这个片段中消失了。更改图片时，高度将降至最低，直到加载下一张图片。

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

$(".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);