记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

js弹出层浏览一组图片【colorbox实例演示及应用】

作者:Kaka    时间:2015-11-16 15:7:12    浏览:    评论:4

      当我们需要浏览一组图片时,往往是采用弹出一个层来单独显示那些图片的方法,这是通过jquery+css来实现的。可能在很多精通jquery和css的设计人员眼里认为实现此功能并不复杂,不过本文要介绍并推荐给大家使用的是一个经过了5年历程的插件:colorbox。为什么选择colorbox?这是因为此插件就一个js文件,只有28k,可说是一个轻量级的插件,方便调用又不会拖慢网速,另外此插件是2009年3月就开发出来了,并且一直在更新,经历了上百次更新,现在最新版本Version 1.6.3 ,更新时间为2015年07月27。

colorbox: 弹出层浏览一组图片

▲colorbox: 弹出层浏览一组图片

      colorbox弹出层浏览一组图片的应用

      在卡卡网的图片压缩优化工具里,使用了colorbox来实现弹出层浏览一组图片(原始图和压缩图)的功能。

点击图片放大浏览原图和压缩图

▲点击图片放大浏览原图和压缩图

浏览原图和压缩图

▲浏览原图和压缩图(点击上图放大)

      colorbox插件简单实用,轻巧速度快,不像其他插件要加载一大堆文件,显得臃肿又拖慢网速,对网站有不利影响,有种得此失彼的感觉。

      colorbox使用范例

      colorbox的使用是很简单的,不需要你懂jquery,也不需要你懂css,只需要认识一点html知识就行。

      请先打开colorbox官方演示页面。 

▲colorbox演示

      上图中,点击任何一个组里的任一链接,都会弹出一个层浏览该组图片。效果看到了吧。

      好了,我们现在就要在此基础上进行模仿,并能将效果应用到自己的网页里。

      查看网页的源文件(右键点击网页-查看源文件),下图是截取了前面一段源代码:

如何使用colorbox

▲如何使用colorbox

      上图的源代码清晰显示了使用colorbox的方法,分为三个步骤:

      1)、网页引用三个文件:colorbox.css、jquery.min.js、jquery.colorbox.js,要注意路径正确。

      2)为同组图片的链接里加上相同的属性rel,例如rel="example1"、rel="example2"、rel="andy"等等。

      3)在jquery里加上一句执行语句,例如:$("a[rel='example1']").colorbox(); ,要注意,这里面的“example1”要与2)里自定义的rel的属性值一致。

      通过上述三个步骤,就可以在自己的网页里使用colorbox的插件功能了。

      最后附上colorbox插件的下载地址:

https://github.com/jackmoore/colorbox/archive/master.zip

      你也可以进入作者官方的网站了解更多关于colorbox的资料:

http://www.jacklmoore.com/colorbox/

      特别注意,官网中的demo(演示)在国内是运行无效的,因为其使用的jquery.min.js是调用https://ajax.googleapis.com/的公共文件,而该网站在国内打不开,从而造成网页jquery文件加载失败,自然无法弹出层了。

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

上一篇: 阿里云主机windows系统Apache启用浏览器缓存的方法
下一篇: 快速通道查询:域名是否在百度联盟黑名单里

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009 All Rights Reserved.