简单几步为DedeCMS实现LightBox效果

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

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>之间:

上面这部份代码即是LightBox源代码中index.htm文件内的一部份,只是在复制到DedeCMS模板文件的时候注意一下JS文件的调用路径。

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

附:lightbox-source-codeLightBox演示页面

更多精彩内容其他人还在看

DedeCMS调用相关文章likearticle附加自定义字段

DedeCMS非常灵活,可以根据关键词、文章标题调用文章,以提高内容之间的相关度,提高页面权重。这篇文章主要介绍了DedeCMS调用相关文章likearticle附加自定义字段,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

详解火车头采集器免登录采集数据发布到DEDECMS织梦的方法

这篇文章主要介绍了详解火车头采集器免登录采集数据发布到DEDECMS织梦的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

织梦DEDE会员空间文章列表无法分页的问题的解决

这篇文章主要介绍了织梦DEDE会员空间文章列表无法分页的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解DEDECMS后台会员消费记录人性化时间显示不准的解决方法

EDECMS的后台会员消费记录存在BUG,在消费时间后边跟随的人性化时间不准确,需要进行修改。本文就提供了修改的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

详解解决织梦dede:title字数限制的两种方法

织梦title字数怎样限制呢?相信对织梦cms熟悉的朋友来说,这真不是一个问题。本文给大家贴两种常用的方法吧。非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

解决织梦DEDE导航栏默认首页无法高亮的问题

默认织梦的首页没有设置高亮属性,只要其他栏目可以。这篇文章主要介绍了解决织梦DEDE导航栏默认首页无法高亮的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

织梦模板正则批量替换文章内容内链变成绝对路径的方法

这篇文章主要介绍了织梦模板正则批量替换文章内容内链变成绝对路径的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解织梦DedeCMS栏目页分页标题Title添加“第N页”的方法

织梦DedeCMS栏目页的标题,不管是第几页都是不变的,不利于网站的SEO,本文章主要介绍了详解织梦DedeCMS栏目页分页标题Title添加“第N页”的方法,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

织梦dedecms两种内容模型的文档进行合并的方法

这篇文章主要介绍了织梦dedecms两种内容模型的文档进行合并的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

关于制作织梦的网站地图实例的示例代码

这篇文章主要介绍了关于制作织梦的网站地图实例的示例代码,这里主要和大家分享的是织梦sitemap.xml格式的网站地图制作实例,这里主要和大家分享的是织梦sitemap.xml格式的网站地图制作实例
收藏 0 赞 0 分享
查看更多