FB 像图像窗口 JS - JavaScript

简介

FB 像图像窗口 JS 是一种用于创建图像窗口（Image Window）的 JavaScript 库，它可以实现单个或多个图像窗口的切换，支持鼠标或触摸屏的交互，能够提供丰富并友好的用户体验。

安装

你可以从 GitHub 或 官网 上下载最新版本的 fancyBox，然后在 HTML 文件中引入 js 和 css 文件：

<link rel="stylesheet" href="/path/to/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.fancybox.js"></script>

同时，在你的 HTML 中，你需要定义要展示在图像窗口中的元素，通常是图片或者 HTML 元素：

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt=""/></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt=""/></a>
<a class="fancybox" rel="group" href="big_image_3.jpg"><img src="small_image_3.jpg" alt=""/></a>

以上代码中，每个 a 标签都需要添加 fancybox 类名，而 rel="group" 属性则表示这些元素归属于同一组图像，点击任意一个元素后都将展示同一组中的所有元素。

使用

当然，你可以通过 fancyBox 自定义图像窗口的各种展示效果，例如定义缩放比例、添加连续翻页等功能。下面我们就来介绍一些基本的使用方法，以及 fancyBox 的各项默认属性。

基本用法

首先，你需要使用 JavaScript 代码初始化 fancyBox：

$(document).ready(function() { 
    $(".fancybox").fancybox();
});

然后，你就可以愉快地点击链接进入窗口模式了。

自定义属性

你可以使用一些属性来自定义 fancyBox 的行为：

• autoSize：将窗口自动适应被展示内容的大小，默认值为 true。
• width 和 height：定义展示窗口的宽度和高度，默认值为 800 和 600。
• padding：定义窗口内边距（当 autoSize 为 true 时失效），默认值为 15px。
• helpers：定义哪些工具栏组件会被触发，默认包含 'overlay'、'thumbs' 和 'title' 组件。

自定义事件

以下是一些可供自定义的事件：

• beforeLoad：在开始加载数据（如 iframe 或 ajax 内容）之前触发。
• afterLoad：在所有的数据已经加载并且完全打开前触发。
• onCancel：在关闭 fancyBox 之前触发，可以使用该事件作一些清理工作。
• beforeClose 和 afterClose：在关闭 fancyBox 前或后触发，可以使用这些事件作一些额外操作或清理工作。

自定义动画

你也可以通过 CSS3 动画自定义 fancyBox 展示过程的一些效果，例如旋转、淡入淡出等。以下是一个用 CSS3 过渡实现透明度变化动画的代码：

.fancybox-opened {
    animation: opacity 0.8s ease;
}

@keyframes opacity {
    from { opacity: 0; }
    to { opacity: 1; }
}

结语

FB 像图像窗口 JS 是一个实现了可视化和美观的图像窗口展示效果的 JavaScript 库，它简单易用，不仅可以用于展示图片，还可以使用 iframe、内联对象和 ajax 内容等功能。官网提供了完整的文档、demos 和下载地址，欢迎随时前往查看。