记忆盒子

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

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

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

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

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

▲浏览原图和压缩图（点击上图放大）

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

      colorbox使用范例

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

      请先打开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文件加载失败，自然无法弹出层了。

广告

海外云主机

低至54元 - 可退款

立即选购 >

rxinyun

立即选购 >

标签: JavaScript  

※ 网站速度慢？试试网站自动优化工具 ※