FancyBox 插件（一）

最新推荐文章于 2025-06-28 13:40:30 发布

原创最新推荐文章于 2025-06-28 13:40:30 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #插件

本文介绍了如何使用fancyBox插件来创建图片画廊和展示内嵌HTML内容，包括插件的安装、HTML结构、脚本调用及关键参数配置，提供了一个简单且功能丰富的图片与内容展示解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天又碰到一个图片插件，fancyBox插件，这个插件不仅可以用来展现画廊，还可以展现HTML内容。话不多说，来看看怎么使用吧！

1、准备文件

2、html

a、Images画廊

<span style="font-size:18px;"><a class="single_image" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a></span>

<span style="font-size:18px;"></span><pre name="code" class="html"><a class="single_image" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>

<a class="single_image" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a>

b、Inline content （显示内嵌HTML内容）

<a id="inline" href="#data">点这里会显示id为data的div内容</a>

<div style="display:none"><div id="data">我是id为data的div的内容</div></div>

c、Iframe （显示内嵌网页）

<a class="iframe" href="http://www.example">This goes to iframe</a>

3、脚本代码

调用下面代码，会将选中元素指向的href属性显示并内嵌在网页中间。

$("a.single_image").fancybox();

对于inline content：

$("a#inline").fancybox();

4、参数&方法

有时候经常在fancybox方法里面加入各种参数来控制效果：

f

ancybox插件主要参数和方法一览表

参数/方法	描述	默认值
基本
width	设置弹出串口的宽度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false	560
height	设置弹出串口的高度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false	340
cyclic	是否循环显示，当内容为图片集时。	false
centerOnScroll	弹出窗口始终浏览器居中。	false
modal	是否使用模式窗口。当设置为true时，应该同时将：'hideOnOverlayClick'，'hideOnContentClick'， 'enableEscapeButton'， 'showCloseButton' 设置为false，并将'overlayShow' 设置为true	false
titlePosition	标题的位置,可以设置为'outside', 'inside' or 'over'	'outside'
transitionIn, transitionOut	窗口显示的方式，可以设置为'elastic', 'fade' or 'none'	'fade'
send	方法，向服务端发送裁剪图片的数据，以便服务端接收参数进行处理， e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });
方法
$.fancybox.showActivity	显示加载动画
$.fancybox.hideActivity	隐藏加载动画
$.fancybox.close	关闭窗口
$.fancybox.resize	自动调整窗口的高度使之与内容相适应
Centered	是否将选区居中，即显示在容器的中心。

4、参数&方法

参数/方法	描述	默认值
基本
width	设置弹出串口的宽度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false	560
height	设置弹出串口的高度，当内容为swf,iframe或者单行文字时，应该将'autoDimensions' 设置为false	340
cyclic	是否循环显示，当内容为图片集时。	false
centerOnScroll	弹出窗口始终浏览器居中。	false
modal	是否使用模式窗口。当设置为true时，应该同时将：'hideOnOverlayClick'，'hideOnContentClick'， 'enableEscapeButton'， 'showCloseButton' 设置为false，并将'overlayShow' 设置为true	false
titlePosition	标题的位置,可以设置为'outside', 'inside' or 'over'	'outside'
transitionIn, transitionOut	窗口显示的方式，可以设置为'elastic', 'fade' or 'none'	'fade'
send	方法，向服务端发送裁剪图片的数据，以便服务端接收参数进行处理， e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });
方法
$.fancybox.showActivity	显示加载动画
$.fancybox.hideActivity	隐藏加载动画
$.fancybox.close	关闭窗口
$.fancybox.resize	自动调整窗口的高度使之与内容相适应
Centered	是否将选区居中，即显示在容器的中心。