阿权的书房

lightbox适合在网页展示图片使用，使用起来很方便，可以参考官网：

http://leandrovieira.com/projects/jquery/lightbox/
也有protype的lightbox版本，不讨论此版本

使用方法官网有介绍，这里不介绍。

此次改造的目的：

有上千个图片需要展示，但是显然不能放在一页解决，那就考虑分页处理，但默认情况lightbox不会自动翻页，我们需要的就是改良此种状况，已经完成的展示 必应Bing背景图片欣赏，地址 http://www.aslibra.com/bing/

改造方案：

1 把所有图片分页显示，这个对php来说很简单
2 最后一个图片总是显示下一个的按钮，第二页之后总是显示上一个按钮（注：默认情况下，在一个页面，第一个图片不显示pre，最后一个图片不显示next）
3 按键支持也做类似修改

先做约定：

1 展示时最后一个图片点击下一个是翻页，并且带上参数 showDetail=1，这样会自动开始第一个图片的展示
2 同样，点击上一个是 showDetail=-1
3 页面定义是否有下一页 HAS_NEXT
4 定义当前页码CUR_PAGE

修改工作：

1 页面html



2 php根据实际情况产生的代码：



3 脚本（jquery.lightbox-0.5.js）前翻页修改的地方：



点击事件里加上：
}).show().bind('click',function() { 后面加上点击事件，跳到上一页



键盘事件：
找到 if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) {
后面加上翻页的处理



4 脚本（jquery.lightbox-0.5.js）后翻页修改的地方：

还有下一页的话，所有图片显示下一个的按钮


点击事件里加上：



键盘事件：
找到 if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) {，后面加上






原创内容如转载请注明：来自 阿权的书房