zoukankan      html  css  js  c++  java
  • 网页图片展示工具 Highslide JS, Lightbox 2, Fancybox 比较

    相信建站的同学多少会考虑图片展示的问题, 当用户点击图片时究竟用什么形式向用户展示图片呢? 或许是放大镜, 或许是新开页面, 然而有很多人选择了在本页 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
    使用选择器找到对应节点, 并调用处理方法.

    相关下载

    Highslide JS
    Lightbox 2
    Lightbox for jQuery
    Fancybox

  • 相关阅读:
    NOJ-1581 筷子 (线性DP)
    UVA-242 Stamps and Envelope Size (DP)
    POJ 1860 (SPFA判断正环)
    POJ 3268 最短路水题
    STL----priority_queue
    STL----unique
    POJ 2031(最小生成树Kruskal算法+几何判断)
    POJ 3468(线段树区间修改+区间求和)
    学习线段树
    POJ 1251(最小生成树裸题)
  • 原文地址:https://www.cnblogs.com/58top/p/2453414.html
Copyright © 2011-2022 走看看