开发者

LightBox Next button always on setting?

In LightBox, is there a way to always show the navigation Next button?开发者_Go百科


Seems every customer I have loves Lightbox but complains about "having to" close each large image so they can click on the next thumbnail. They never realize that they can mouseover the big image to see nav arrows and click to the next image immediately. Here's my solution (using Lightbox 2.51):

In "lightbox.css" change this:

.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;
}

to:

.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 */
}

Hope this helps someone out there. Cheers.


I'm assuming you're using Lightbox 2

Open your lightbox.css file and change these two lines:

#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }

to

#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;}

I've only tested this in Safari but it should be OK in everything else. Famous last words eh?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜