dedecms二次开发(简单几步为DedeCMS实现LightBox效果)
dedecms二次开发
简单几步为DedeCMS实现LightBox效果网站上的图片展现方式有很多种,一般的就是在浏览器为图片链接多开一个窗口或标签,像访问网址一样显示出来,但是这种方式的体验较差。毕竟,当访问者每次查看图片的时候还需要再弹出一个窗口来显示,除了占用资源,还降低了图片和内容的关联度,同时提高了用户的操作次数,在一定程度上降低了用户的体验。
LightBox介绍
LightBox图片展示效果的出现,则改变了传统的图片浏览方式,极大地提高了用户的体验。LightBox的原理很简单:通过jQuery在当前页面之上弹出一个层,并遮挡(降低亮度)非弹出层的部份,然后把图片显示在弹出层内,这种方式的好处就是查看图片的时候页面不会刷新,更不会跳到另一个窗口或标签。而且还有一个体验相当棒的功能,当你点击非弹出层的部份时,脚本会关闭LightBox的弹出层,
LightBox图片展示效果的功能也分很多,比如有些只是简单地放大图片,有些提供了缩放功能,有些提供了前一张、后一张图片查看的功能……等等,但是基本的实现方式都是类似的。
接下来通过简单的几个步骤说明,为织梦CMS页面上的图片添加LightBox展示效果。
上传文件及添加代码
首先,下载LightBox插件的源代码,该份源代码包括有一个index.htm示例页面以及相关的JS、CSS文件。把除index.htm文件的整个lightbox目录上传至DedeCMS的默认模板(Default)目录下,再将下面所示的代码复制到默认模板(Default)目录下的article_image.htm文件内,放在
之间:
上面这部份代码即是LightBox源代码中index.htm文件内的一部份,只是在复制到DedeCMS模板文件的时候注意一下JS文件的调用路径。
完成这两步后,即可在DedeCMS的图片展示模块中实现LightBox效果,如果打算在织梦内容管理系统的文章模块或软件下载模块也实现LightBox效果,建议把上面的代码添加到head.htm文件中,这样就可以保证凡是调用了head.htm的文件都实现LightBox效果。
- dedecms安全补丁(防止Dedecms入侵、漏洞问题的4点安全防范建议)
- dedecms手机独立域名(DedeCMS Wap.php 绑定域名的解决办法)
- dedecms伪静态要怎么设置(DedeCMS系统自定义字段图片调用问题的解决方法)
- dedecms标签怎么用(浅析DedeCMS GBK版安装sphinx全文索引无法查询无结果的解决方法)
- dedecms怎样查看网页源文件(dedecms批量更新静态时提示:没有该栏目数据 可能缓存的解决方法)
- dedecms怎么调用标签(dedecms日期调用详细说明)
- dedecms添加站点(dedecms 栏目列表页链接优化方法)
- dedecms投稿页面(dedecms artlist读取全站最新文章的代码)
- dedecms 目录生成(dedecms实现自动打包文章中图片并下载的方法)
- dede模板栏目调用(织梦DEDECMS5.7栏目列表页分页URL优化列表页重复的解决方案)
- 织梦标签怎么设置网站(织梦模板DEDECMS文章页实现让用户选择字体大小的代码的方法)
- dedecms屏蔽规则(使用Dedecms中七个容易忽略的安全细节介绍)
- dedecms屏蔽规则(织梦dedecms修改任意管理员漏洞处理方法)
- 织梦dedecms网站后台数据(DEDECMS织梦系统的会员调用方法详细介绍)
- dedecms语法教程(dedecms 获取描述信息限制字数的语法)
- dedecms标签怎么调用(DEDECMS自定义表单提交后的跳转链接修改方法)
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
- NVIDIA显卡份额冲上88 A饭发愁 游戏优化恐没A卡份了(NVIDIA显卡份额冲上88A饭发愁)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
- 读卖乐园的彩灯(读卖乐园的彩灯)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9