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

<script type="text/javascript">
$(function() {
$('a.bingPic').lightBox();
//如果自动展示第一个
if( location.href.indexOf('showDetail=1') > 0 ){
  $('a.bingPic:first').click();
}
//自动展示最后一个
if( location.href.indexOf('showDetail=-1') > 0 ){
  $('a.bingPic:last').click();
}
});
</script>


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

<script language="JavaScript"><!--
  var HAS_NEXT = true;
  var CUR_PAGE = 0;
//--></script>


3 脚本(jquery.lightbox-0.5.js)前翻页修改的地方:


line 262: 第一个图片在第二页之后都启用上一个的链接
if ( settings.activeImage != 0 )
->
if ( CUR_PAGE>0 || settings.activeImage != 0 ) {


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

if( CUR_PAGE>0 && settings.activeImage ==0 ){
  window.location = "index.php?showDetail=-1&page="+(CUR_PAGE-1);
  return false;
}


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

if( CUR_PAGE>0 && settings.activeImage == 0 ){
  window.location = "index.php?showDetail=-1&page="+(CUR_PAGE-1);
  return false;
}


4 脚本(jquery.lightbox-0.5.js)后翻页修改的地方:

还有下一页的话,所有图片显示下一个的按钮
if ( settings.activeImage != ( settings.imageArray.length -1 ) ) {
改为
if ( HAS_NEXT || settings.activeImage != ( settings.imageArray.length -1 ) ) {


点击事件里加上:

if( HAS_NEXT && settings.imageArray.length == settings.activeImage + 1 ){
  window.location = "index.php?showDetail=1&page="+(CUR_PAGE+1);
  return false;
}


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

if( HAS_NEXT && settings.activeImage == ( settings.imageArray.length - 1 ) ){
  window.location = "index.php?showDetail=1&page="+(CUR_PAGE+1);
  return false;
}





原创内容如转载请注明:来自 阿权的书房
收藏本文到网摘
周生
2012/10/29 12:50
我用的是.net 无刷新图片分页,页面跳转需要怎么设置好啊!急
分页: 1/1 第一页 1 最后页
发表评论
AD
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML 打开UBB 打开表情 隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

验证码 不区分大小写
 

阅读推荐

服务器相关推荐

开发相关推荐

应用软件推荐