您现在的位置是:首页 > 教程 > dedecms教程dedecms教程
dedecms实现LightBox图片效果的代码实例
幻柏2023-11-28 23:49:11dedecms教程已有人查阅
导读网站上的图片展现方式有很多种,一般的就是在浏览器为图片链接多开一个窗口或标签,像访问网址一样显示出来,但是这种方式的体验较差。
网站上的图片展现方式有很多种,一般的就是在浏览器为图片链接多开一个窗口或标签,像访问网址一样显示出来,但是这种方式的体验较差。毕竟,当访问者每次查看图片的时候还需要再弹出一个窗口来显示,除了占用资源,还降低了图片和内容的关联度,同时提高了用户的操作次数,在一定程度上降低了用户的体验。
LightBox介绍
LightBox图片展示效果的出现,则改变了传统的图片浏览方式,极大地提高了用户的体验。LightBox的原理很简单:通过jQuery在当前页面之上弹出一个层,并遮挡(降低亮度)非弹出层的部份,然后把图片显示在弹出层内,这种方式的好处就是查看图片的时候页面不会刷新,更不会跳到另一个窗口或标签。而且还有一个体验相当棒的功能,当你点击非弹出层的部份时,脚本会关闭LightBox的弹出层。
LightBox图片展示效果的功能也分很多,比如有些只是简单地放大图片,有些提供了缩放功能,有些提供了前一张、后一张图片查看的功能……等等,但是基本的实现方式都是类似的。
接下来通过简单的几个步骤说明,为织梦CMS页面上的图片添加LightBox展示效果。
上传文件及添加代码
首先,下载LightBox插件的源代码,该份源代码包括有一个index.htm示例页面以及相关的JS、CSS文件。把除index.htm文件的整个lightbox目录上传至DedeCMS的默认模板(Default)目录下,再将下面所示的代码复制到默认模板(Default)目录下的article_image.htm文件内,放在<head></head>之间:
LightBox介绍
LightBox图片展示效果的出现,则改变了传统的图片浏览方式,极大地提高了用户的体验。LightBox的原理很简单:通过jQuery在当前页面之上弹出一个层,并遮挡(降低亮度)非弹出层的部份,然后把图片显示在弹出层内,这种方式的好处就是查看图片的时候页面不会刷新,更不会跳到另一个窗口或标签。而且还有一个体验相当棒的功能,当你点击非弹出层的部份时,脚本会关闭LightBox的弹出层。
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="https://img.genban.orgjs/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文件的调用路径。
本文标签:
很赞哦! ()
相关文章
- dedecms实现tags云标签随机颜色与字体大小的方法
- 织梦dedecms实现键盘翻页效果的实现方法
- dedecms实现将表单订单发送到邮箱实例代码
- 织梦dedecms实现{dede:arclist keyword='[field:title/]'}效果
- dedecms实现表单分步提交的思路方法
- 织梦dedecms实现无觅相关文章功能步骤代码
- dedecms实现首页内页调用不同的友情链接的实现方法
- 简单几步为dedecms实现LightBox效果
- 让dedecms实现shtml包含的实现方法
- dedecms实现自定义表单(模型)分步提交的方法
- 织梦dedecms实现三级栏目_二级栏目_一级栏目_网站名称效果代
- dedecms实现大图showphoto.htm输出图集内容简介的实现方法
随机图文
-
dedecms模板中用彩色tag做关键词的方法
dedecms模板中用彩色tag做彩色关键词,这是我的无奈之举 呵呵,分享一下吧 -
织梦dedecms获取图片集多张图片及注释的方法
在为客户做网站的时候需要做到的效果是每个案例都要很多图片,并且用一定的效果进行展示。但是发现织梦本身自带的调取方法实现的效果是一次性调取多个参数 -
dedecms织梦验证码不能正常显示的解决方法
dede织梦验证码 为了方便大家解决问题,在此整理了三个经典的解决方案。 注:执行方案一和方案二的前提是支持GB库。方案一:赋予sessions读、写、可 -
dedecms手机wap网站图片自适应的bug修复
在安装调试代码号手机版网站的时候,发现一个问题,图片无法很好的适应屏幕,宽度可以与屏幕同宽,而高度却没有按比例调整,导致图片看起来像被挤扁了一样,为什么会这样呢?
留言与评论 (共有 条评论) |