我在这里查看了http://drupal.org/node/1630630，但这只适用于Drupal网站。 有人知道如何调整常规的lightbox2库以使其响应并在小型移动屏幕上显示吗？ “响应式”是指图片应根据屏幕大小进行显示。 目前，它始终具有相同的大小，并且在小屏幕上需要滚动。
6个回答
3
很抱歉回复晚了，但我也需要帮助。答案中的两个代码片段“有点”起作用，但它们看起来真的很糟糕！
在我看来，下面的代码效果要好得多：
.lb-image, .lb-dataContainer {
max-width: 100%;
height: auto !important;
width: 100%;
}
.lb-outerContainer {
max-width: 100%;
height: auto !important;
}
- Mister Oh
1
这段代码失去了从一张图片到另一张图片的“变形”效果。在切换图片时，高度会降至最小值，直到下一张图片加载完成。 - Jago
1
感谢指引...我使用了之前的建议作为起点，然后进行了一些尝试。
我正在处理一个已安装 LightBox2 v2.0 的网站，而不是新安装（需要重新编码图像等），我决定只进行一些调整...
我的 CSS 如下。现在已经完全响应式。
主要点是更改宽度、最大宽度、高度和最大高度以及 !important。我发现一旦我让宽度响应视口，#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; }
- Mike
1
您只需要在图像上设置max-width:100%（使用CSS）。这就是使图像响应的所有要求。如果lightbox2在图像上设置样式，请查看选择器特异性并覆盖它。
- danwellman
1
1我成功地通过以下CSS实现了令人满意的效果：.lb-dataContainer，.lb-outerContainer {
max-width: 100%;
height: auto！important;
width: auto！important;
} - camcam
1
我使用了以下代码：
这段代码与IT相关。
.lb-image, .lb-dataContainer, .lb-outerContainer {
max-width: 100%;
height: auto !important;
width: auto !important;
} 这段代码与IT相关。
- NickW
1
2请不要仅提供“代码解决方案”。描述一下为什么这对您有效。 - Lee Taylor
0
对我来说，像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;}}
灯箱在特定屏幕尺寸下没有问题，因此我使用媒体查询来处理图像开始不适合较小屏幕尺寸的部分（在我的情况下是680px）。当容器不占据屏幕的所有可用宽度时，它对我效果最佳（我只是觉得看起来更好），但这只是一种选择，所以请检查它对您的工作方式。对于.lb-image，请使用上面帖子中编写的代码。
- JaninaSt
0
我尝试了这个页面上的每一个建议，但都没有起作用。所以几个小时后，我根据捕获窗口调整大小事件编写了自己的解决方案。
这是我的解决方案，它可能看起来需要很多努力，但当窗口调整大小时，它可以完美地缩放图像（这主要基于JavaScript）：
在lightbox.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%);
到.lb-nav。
最后，添加
$(".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 函数中。
现在，您应该能够实时按需缩放窗口，您的图像也会相应地缩放。
- Single Entity
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接