站长之家 - 站长资讯 - 易采站长站

当前位置: > 建站教程 > 源码教程 > CMS 教程 >

简单几步为DedeCMS实现LightBox效果

2015-04-28 00:20 | 来源:网络整理 | 编辑:秋军 |

网站上的图片展现方式有很多种,一般的就是在浏览器为图片链接多开一个窗口或标签,像访问网址一样显示出来,但是这种方式的体验较差。毕竟,当访问者每次查看图片的时候还需要再弹出一个窗口来显示,除了占用资源,还降低了图片和内容的关联度,同时提高了用户的操作次数,在一定程度上降低了用户的体验。

LightBox介绍
LightBox图片展示效果的出现,则改变了传统的图片浏览方式,极大地提高了用户的体验。LightBox的原理很简单:通过jQuery在当前页面之上弹出一个层,并遮挡(降低亮度)非弹出层的部份,然后把图片显示在弹出层内,这种方式的好处就是查看图片的时候页面不会刷新,更不会跳到另一个窗口或标签。而且还有一个体验相当棒的功能,当你点击非弹出层的部份时,脚本会关闭LightBox的弹出层,

LightBox图片展示效果的功能也分很多,比如有些只是简单地放大图片,有些提供了缩放功能,有些提供了前一张、后一张图片查看的功能……等等,但是基本的实现方式都是类似的。

dedecms-lightbox
接下来通过简单的几个步骤说明,为织梦CMS页面上的图片添加LightBox展示效果。

上传文件及添加代码
首先,下载LightBox插件的源代码,该份源代码包括有一个index.htm示例页面以及相关的JS、CSS文件。把除index.htm文件的整个lightbox目录上传至DedeCMS的默认模板(Default)目录下,再将下面所示的代码复制到默认模板(Default)目录下的article_image.htm文件内,放在<head></head>之间:
简单几步为DedeCMS实现LightBox效果
上面这部份代码即是LightBox源代码中index.htm文件内的一部份,只是在复制到DedeCMS模板文件的时候注意一下JS文件的调用路径。

完成这两步后,即可在DedeCMS的图片展示模块中实现LightBox效果,如果打算在织梦内容管理系统的文章模块或软件下载模块也实现LightBox效果,建议把上面的代码添加到head.htm文件中,这样就可以保证凡是调用了head.htm的文件都实现LightBox效果。

附:、

  • dedecms教程:定时生成站点地图sitemap.xml-DedeCms教程
  • 织梦CMS上传服务器后出现数据连接失败是怎么回事如何解决-DedeCms教程
  • 织梦DEDECMS 计划任务使用教程-DedeCms教程
  • DEDECMS自定义表单加入验证码问题修正-DedeCms教程
  • 分享Dedecms的一些seo优化简单技巧-DedeCms教程
  • 怎么解决DedecmsV5.7 SP1广告不能显示-DedeCms教程
  • 谈谈怎样防止Dedecms被挂马的问题-DedeCms教程
  • DedeCMS 5.7不兼容PHP 5.4版本的解决办法-DedeCms教程
  • dedecms实现任意页面调用当前会员信息的方法-DedeCms教程
  • 织梦百度结构化数据地图提交插件常见问题及解决方案-DedeCms教程
  • 网友评论

    关于我们 - 联系我们 - 广告服务 - 版权声明 - 人才招聘 - 友情链接 - 网站地图 - 帮助 - -

    CopyRight © 2010-2016 源码下载 easck.com , All Rights Reserved

    蒙公网安备 15052402000103号

    蒙ICP备14002389-1号