收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2687|回复: 0

改造lightbox,翻页自动循环浏览展示

[复制链接]
发表于 2010-7-4 12:21:14 | 显示全部楼层 |阅读模式
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

  1. <script type="text/javascript">
  2. $(function() {
  3. $('a.bingPic').lightBox();
  4. //如果自动展示第一个
  5. if( location.href.indexOf('showDetail=1') > 0 ){
  6.         $('a.bingPic:first').click();
  7. }
  8. //自动展示最后一个
  9. if( location.href.indexOf('showDetail=-1') > 0 ){
  10.         $('a.bingPic:last').click();
  11. }
  12. });
  13. </script>
复制代码


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

  1. <script language="JavaScript"><!--
  2.         var HAS_NEXT = true;
  3.         var CUR_PAGE = 0;
  4. //--></script>
复制代码


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


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


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

  1. if( CUR_PAGE>0 && settings.activeImage ==0 ){
  2.         window.location = "index.php?showDetail=-1&page="+(CUR_PAGE-1);
  3.         return false;
  4. }
复制代码


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

  1. if( CUR_PAGE>0 && settings.activeImage == 0 ){
  2.         window.location = "index.php?showDetail=-1&page="+(CUR_PAGE-1);
  3.         return false;
  4. }
复制代码


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

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


点击事件里加上:

  1. if( HAS_NEXT && settings.imageArray.length == settings.activeImage + 1 ){
  2.         window.location = "index.php?showDetail=1&page="+(CUR_PAGE+1);
  3.         return false;
  4. }
复制代码


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

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


有后续更新请参考 http://www.aslibra.com/blog/post/lightbox_auto_show_pages.php,蓝色这里就不继续更新了
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-8-8 17:08 , Processed in 0.109101 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表