石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 技术笔记 >

DedeCMS实现LightBox图片效果

发表日期:2019-12-26 14:54文章编辑:织梦DEDECMS教程浏览次数: 标签: 织梦|技术笔记|    

织梦DedeCMS网站上的图片展现方式有很多种,一般的就是在浏览器为图片链接多开一个窗口或标签,像访问网址一样显示出来,但是这种方式的体验较差。毕竟,当访问者每次查看图片的时候还需要再弹出一个窗口来显示,除了占用资源,还降低了图片和内容的关联度,同时提高了用户的操作次数,在一定程度上降低了用户的体验。
  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>之间:
<!-- Arquivos utilizados pelo jQuery lightBox plugin --><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/jquery.lightbox-0.5.js"></script><linkrel="stylesheet"type="text/css"href="css/jquery.lightbox-0.5.css"media="screen"/><!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin --><!-- Ativando o jQuery lightBox plugin --><scripttype="text/javascript">$(function() {
        $('#gallery a').lightBox();
    });
    </script><styletype="text/css">/* jQuery lightBox plugin - Gallery style */
    </style></head>
 
  上面这部份代码即是LightBox源代码中index.htm文件内的一部份,只是在复制到DedeCMS模板文件的时候注意一下JS文件的调用路径。

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/jsbj/714.html

网站设计案例推荐

热门新闻

DEDECMS提示Fatal error错误

Nginx的Gzip压缩配置

织梦DedeCMS定时自动生成首页HTML的实现方法

IIS7下js文件启用Gzip后却不压缩的解决方法

dede织梦教程:列表页、文章页调用所有顶级栏目文章的方法

WordPress 集成百度 Sitemap 实时推送代码

织梦DedeCMS定时自动生成首页HTML的实现方法

WORDPRESS文章中微信打赏功能的2种实现方法

相关新闻

DedeCms织梦TAG标签静态生成html,url拼音及分页优化的方法

织梦文章内容页调用同分类栏目下的其它文章方法

DedeCMSv5.7 tag标签长度限制12字节修改方法

Dedecms如何显示文章数量的方法

dede出现search.php on line 44 search.php报错

dedecms大量删除文章后,列表页显示错误修复办法

推荐新闻

织梦CMS文章模型整合下载功能,可判断点数,会员组等下载权限

帝国cms怎么实现页面自动生成html

帝国cms灵动标签调用字母所属的信息

帝国cms如何在tags列表页获取当前tag的ID方法

IIS7下js文件启用Gzip后却不压缩的解决方法

织梦DedeCMS实现{dede:channel}标签增加数字序号的方法

正确配置 WordPress 邮件SMTP

dede简略标题调用标签

织梦DEDECMS教程:添加RSS订阅功能