在 LightBox 中,有没有办法始终显示导航 Next 按钮?
问问题
5265 次
2 回答
2
似乎我拥有的每个客户都喜欢 Lightbox,但抱怨“必须”关闭每个大图像,以便他们可以单击下一个缩略图。他们从未意识到他们可以将鼠标悬停在大图像上以查看导航箭头并立即单击下一个图像。这是我的解决方案(使用 Lightbox 2.51):
在“lightbox.css”中更改:
.lb-prev, .lb-next {
width: 49%;
height: 100%;
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
/* Trick IE into showing hover */
display: block;
}
/* line 72, ../sass/lightbox.sass */
.lb-prev {
left: 0;
float: left;
}
/* line 76, ../sass/lightbox.sass */
.lb-next {
right: 0;
float: right;
}
/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
background: url(../images/prev.png) left 48% no-repeat;
}
/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
background: url(../images/next.png) right 48% no-repeat;
}
到:
.lb-prev, .lb-next {
width: 49%;
height: 100%;
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
/* Trick IE into showing hover */
display: block;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
/* line 72, ../sass/lightbox.sass */
.lb-prev {
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
}
/* line 76, ../sass/lightbox.sass */
.lb-next {
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
}
/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
希望这可以帮助那里的人。干杯。
于 2012-11-14T14:03:07.600 回答
1
我假设您使用的是Lightbox 2
打开您的 lightbox.css 文件并更改这两行:
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
到
#prevLink { left: 0; float: left; background: url(../images/prevlabel.gif) left 15% no-repeat;}
#nextLink { right: 0; float: right; background: url(../images/nextlabel.gif) right 15% no-repeat;}
我只在 Safari 中对此进行了测试,但其他一切都应该没问题。著名的遗言是吗?
于 2009-11-28T23:39:09.957 回答