根据Slimbox2 documentation,此功能不受支持。但我想知道是否有人遇到任何伎俩来完成这项工作。
我主要担心的是我的一些图像相当冗长,而低分辨率LightBox2会给用户带来烦人的体验。
答案 0 :(得分:2)
我最近开始在我的网站(http://www.trips.elusien.co.uk)上使用slimbox2,并发现它可以从一些修改中受益:
“幻灯片调整大小”:这会使幻灯片放映的大小保持不变,而不是取决于图像的大小(通过指定像素大小),或者您可以使用百分比来使幻灯片变大或变小在幻灯片中。您可以使用2个新选项指定它:
slideWidth: 0, // Initial width of the slide (in pixels or in percent as a string e.g. "50%")
slideHeight: 0, // Initial height of the slide (in pixels or in percent as a string e.g. "50%")
启用幻灯片自动翻转,而不是手动翻转。您可以使用新选项指定:
slideInterval: 0, // Interval between flipping slides (in seconds), 0 means no automation.
从幻灯片中下载幻灯片。
使用slimbox2的原始版本无法完成第一个和最后一个功能,因为在该版本中,图像显示为BACKGROUND图像,而不是使用“IMG”标记。
我已将Javascript和CSS文件放在我的网站上。如果您想尝试它们,请访问我的网站并点击“slimbox examples”链接,您可以从这里下载它们。要查看使用slimbox2的简洁方法,请单击主页上的“photoSLide Show”链接。
问候尼尔
答案 1 :(得分:1)
很容易修复我的代码。
找到并替换slimbox2.js文件中的三行:
$(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
$(sizer).width(preload.width);
$([sizer, prevLink, nextLink]).height(preload.height);
使用:
/* make sure the image won't be bigger than the window */
window.innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //ie fix
window.innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //ie fix
var winWidth = window.innerWidth-200; //browser width
var winHeight = window.innerHeight-100; //browser height
var my_w = preload.width; //original width
var my_h = preload.height; //original height
// scale width
var scaleW1 = winWidth;
var scaleH1 = (my_h * winWidth) / my_w;
// scale height
var scaleW2 = (my_w * winHeight) / my_h;
var scaleH2 = winHeight;
var scale = (scaleW2 > winWidth);
if (scale) {
reswidth = Math.floor(scaleW1);
resheight = Math.floor(scaleH1);
}
else {
reswidth = Math.floor(scaleW2);
resheight = Math.floor(scaleH2);
}
if ($("p").hasClass("slimboxie")){
$(image).css({filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='"+ activeURL + "', sizingMethod='scale')", visibility: "hidden", display: ""});
$(sizer).width(reswidth);
$([sizer, prevLink, nextLink]).height(resheight); }
else {
$(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: reswidth + "px " + resheight + "px", visibility: "hidden", display: ""});
$(sizer).width(reswidth);
$([sizer, prevLink, nextLink]).height(resheight);
}
我是javascript的业余爱好者,但我觉得它很棒。我也使用IE8。您只需要插入:
<!--[if IE 8]>
<p class="slimboxie"></p>
<![endif]-->
答案 2 :(得分:0)
加载图片后,请执行以下操作:
$('#lbImage')。css('background-size','contains');