简单几步为DedeCMS实现LightBox效果

点评 :这篇文章主要介绍的是如何为DedeCMS的图片添加LightBox展示效果,其它的网页实现方法基本类似 网站上的图片展现方式有很多种,一般的就是在浏览器为图片链接多开一个窗口或标签,像访问网址一样显示出来,但是这种方式的体验较差。毕竟,当访问者每次
点评:这篇文章主要介绍的是如何为DedeCMS的图片添加LightBox展示效果,其它的网页实现方法基本类似
 
 
网站上的图片展现方式有很多种,一般的就是在浏览器为图片链接多开一个窗口或标签,像访问网址一样显示出来,但是这种方式的体验较差。毕竟,当访问者每次查看图片的时候还需要再弹出一个窗口来显示,除了占用资源,还降低了图片和内容的关联度,同时提高了用户的操作次数,在一定程度上降低了用户的体验。 

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效果。 

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

dedecms织梦默认的TAG标签不是很灵活。有时候我们的标签需要进行一个分类,能不能像{dede:arclist}标签的自定义属性(如:flag=c,h),这样全站调用的时候更灵活。 全站调用TAG标签方法一般是: {dede:tag row='100' sort='new' getall='1'}a target="_blank
未审核文档的TAG会显示在TAG列表页面, 固然点击进入TAG时, 相关的未审核文章不会显示出来, 这样对用户体验是很不好的. DEDECMS暂时没有提供这个功能,所以要解决这个问题, 让DEDECMS不显示未审核文档的TAG, 就要修改TAG的显示库文件 tag.lib.php。 方法一 打
我们都知道DEDECMS生成的文件夹是按天生成的,只要传了图片就会自动建立个年月日的文件,centos系统下,都是随便排序的,很难找到对应文件夹,如果要按顺序排列,要怎么操作呢? 一、文件管理器: 修改 /dede/templets/file_manage_main.html $dh = dir($inp
我们在用到织梦dedecms软件模型的时候,手动指定地址通常只能是引用其他网址或者链接,我们要实现直接选取站内的文件,这个要怎么操作呢?下面小编一步步为您解答,最终效果如下图所示: 实现教程 1、打开 /dede/templets/soft_add.htm 找到 input type=text
我们有时候需要对织梦文档的点击量进行批量维护,比如采集来的文章,点击量都为0,需要批量修改,可以用到如下方法1。 1、在数据库里运行下面的代码就可以了,文章的点击量变得随机从500到1000 UPDATE dede_archives SET click=FLOOR(500 + (RAND() * 1000))
用过dedecms的朋友都知道,织梦cms后台系统基本参数里是无法直接上传图片的,我们更换logo图只能到ftp里替换,非常的不方便,我们如果想直接在系统基本参数里上传,要怎么处理呢?在这里需要对代码进行修改,具体流程如下: 实现方法,打开/dede/templets/sy