我在这里查看：http: //drupal.org/node/1630630但这仅适用于 Drupal 站点。有人知道如何调整常规的lightbox2库以使其响应并显示在小型移动屏幕上吗？
“响应式”是指图片应根据屏幕尺寸显示。现在，它始终具有相同的大小，并且在小屏幕上需要滚动。
问问题
12306 次
6 回答
3
好吧，这已经很晚了，但我也遇到了这种需要帮助的情况。答案中的两个代码片段“有点”工作，但它们看起来很糟糕！
这工作得更好，IMO：
.lb-image, .lb-dataContainer {
max-width: 100%;
height: auto !important;
width: 100%;
}
.lb-outerContainer {
max-width: 100%;
height: auto !important;
}
于 2013-01-17T20:53:05.623 回答
1
您应该能够max-width:100%在图像上进行设置（使用 CSS）。这就是使图像具有响应性所需的全部内容。如果 lightbox2 在图像上设置样式，只需查看选择器特异性并覆盖它
于 2012-07-22T14:16:22.037 回答
1
我用了：
.lb-image, .lb-dataContainer, .lb-outerContainer {
max-width: 100%;
height: auto !important;
width: auto !important;
}
于 2012-11-15T23:19:53.170 回答
1
感谢您的指点...使用以前的一些建议作为起点，然后有一个小提琴。
我正在一个现有安装 LightBox2 v2.0 的网站上工作，而不是新安装（并且必须重新编码图像等）我决定只是有一个小提琴......
我的 CSS 在下面。它现在完全响应。
要点是改变宽度、最大宽度、高度和最大高度 & !important。我发现一旦我得到响应视口的宽度，#outerImagecontainer 就会变得很长，因此是最大高度或固定高度。我还将宽度限制为 768 像素，即站点的宽度以及图像的宽度，放大它们显然是有损的。
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; }
于 2015-04-27T13:59:14.930 回答
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;}}
灯箱在特定屏幕尺寸之前没有问题，所以我使用媒体查询来查找图像开始不适合较小屏幕尺寸的部分（在我的情况下是 680 像素）。当容器没有占用屏幕的所有空闲宽度时，它对我来说效果最好（它对我来说看起来更好），但这只是一个选择，所以只需检查它是如何为你工作的。对于 .lb-image，只需使用上面帖子中编写的代码。
于 2014-11-24T04:32:33.370 回答
0
我尝试了此页面上的所有建议，但发现它们都不起作用。因此，几个小时后，我根据捕获窗口调整大小事件编写了自己的代码。
这是我的解决方案，它可能看起来很费力，但是当调整窗口大小时它会很好地缩放图像（这主要是基于 JavaScript）：
在 lightbox.js 中执行以下操作：
创建两个全局变量：
var preloader_Height;
var preloader_Width;
在 preloader.onload 函数中填充它们，如下所示
preloader_Height = preloader.height;
preloader_Width = preloader.width;
然后在脚本的底部（就在 return 语句之前）：
//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 函数。
现在您应该能够实时随意缩放窗口，并且您的图像将相应缩放。
于 2017-02-17T17:35:47.353 回答