在LightBox中,有没有办法始终显示导航下一步按钮?
答案 0 :(得分: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 */
}
希望这有助于那里的人。欢呼声。
答案 1 :(得分: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中对此进行过测试,但其他所有内容都应该可以。着名的遗言eh?