相信建站的同学多少会考虑图片展示的问题, 当用户点击图片时究竟用什么形式向用户展示图片呢? 或许是放大镜, 或许是新开页面, 然而有很多人选择了在本页 popup 展示, 看似 Mac 的 Lightbox 效果, 实用而且洋气.
无论是自己的网站还是公司网站, 都用不到这样的效果, 写这么个文章有点奇怪. 只因最近给一个朋友做了几个页面, 他要求有类似效果. 而且我之前做过一个叫 Highslide4WP 的 WordPress 插件, 所以我也就对比了一下, 希望对其他站长有所帮助.
本文我会对 Highslide JS, Lightbox 2 和 Fancybox 进行简单的对比. 当然, 这些对比维度都是我的需求, 带有个人主观意识.
功能支持
这类插件功能强大得很, 机会你能想到的东西都能做成 popup, 而 Lightbox 2 算里面比较纯正的了.
Highslide JS
支持图片, 图片轮播, HTML 片段, iframe, flash 等媒体. Highslide 还支持拖拽 popup, 在原 popup 点击查看原图.
Lightbox 2
只支持图片, 图片轮播.
Fancybox
支持图片, 图片轮播, HTML 片段, iframe, flash 等媒体.
文件尺寸
因为 CSS 文件相差无几, 所以只比较 JavaScript 文件尺寸, 下面提及的文件尺寸均是压缩和混淆后的大小.
Highslide JS
不依赖任何 JavaScript 库, 有 4 种不同的功能脚本.
- 支持基本功能的 JS (highslide.packed.js) 有 25KB.
- 支持 HTML 片段的 JS (highslide-with-html.packed.js) 有 34KB.
- 支持画廊 (gallery) 的 JS (highslide-with-gallery.packed.js) 有 36KB.
- 支持全功能的 JS (highslide-full.packed.js) 有 46KB.
其中 iframe 和 flash 需要加载 highslide-with-html.packed.js
Lightbox 2
Lightbox 2 应该是用户群最多的, 原作需要引入 prototype 库, 但有人跟随开发出依赖 jQuery 的版本, 听说还有原生 JavaScript 版本. 撇开库文件不说, 压缩后的 JS 文件只有 6KB 到 8KB.
Fancybox
依赖 jQuery, 压缩后的 JS 文件有 15KB.
激活方式
其实就两种激活方式, 一种是工具加载时自动帮你找节点, 一种是使用 JavaScript 自己去找节点. 但因为 jQuery 的兴起和它强大的选择器, 后一种方式被使用得越来越多.
Highslide JS
使用特定 class 作为标记, 使用 JavaScript 为带标记的节点进行处理.
Lightbox 2
prototype 版: 使用特定 rel 作为标记, 使用 JavaScript 为带标记的节点进行处理.
jQuery 版: 使用选择器找到对应节点, 并调用处理方法.
Fancybox
使用选择器找到对应节点, 并调用处理方法.