在网站设计中，图片展示效果是非常重要的，一个好的图片展示效果可以让网站更加美观，也能够提高用户的浏览体验。而fancybox，则是一款非常适合实现图片展示效果的jQuery插件，它能够轻松实现多种图片展示效果，让你的网站更加出彩。

一、fancybox简介

fancybox是一款非常流行的jQuery图片展示插件，它不依赖于任何第三方库，只需要引入相应的js和css文件即可。它可以轻松实现图片缩放、淡入淡出、从左右上下飞入等多种展示效果。而且，它还可以自适应手机、平板和PC等各种设备，保证在各种设备上都能够正常展示。

二、fancybox基本用法

1、引入CSS和JS文件

要使用fancybox，需要先在head中引入相应的CSS和JS文件：

```

```

其中，jquery-3.3.1.min.js是必须引入的jQuery库，而fancybox的CSS和JS文件则需要自己下载。

2、设置图片链接

接下来，需要在页面中设置图片的链接，需要使用a标签将图片链接起来，例如：

```

```

其中，href属性设置图片的源文件路径，data-fancybox属性设置一组图片的标识（可以自定义，这里设置为“images”）。

3、调用fancybox

在设置好图片链接后，需要调用fancybox来实现图片展示效果，只需要在页面底部添加如下代码：

```

```

其中，$("[data-fancybox]").fancybox()是fancybox的调用方法。animationEffect和animationDuration分别设置了默认的图片展示效果和时间。arrows设置是否显示左右箭头，thumbs则是设置缩略图的显示效果。

三、fancybox高级用法

1、自定义图片展示效果

fancybox支持多种图片展示效果，可以通过设置animationEffect属性来设置，常用的展示效果包括：

- fade：淡入淡出

- zoom：缩放

- slide：从左右上下飞入

此外，还可以通过onPrepare和beforeLoad两个事件来自定义展示效果，例如：

```

$("[data-fancybox]").fancybox({

onPrepare: function (instance, slide) {

//设置弹出层背景颜色和边框效果

instance.$refs.bg.css({

"background-color": "#000",

"border": "10px solid #fff"

});

},

beforeLoad: function (instance, slide) {

//设置图片展示效果

slide.animationEffect = "zoom";

slide.animationDuration = 800;

}

});

```

onPrepare事件在弹出层弹出之前触发，可以自定义弹出层的样式；beforeLoad事件在图片准备展示之前触发，可以自定义图片的展示效果。

2、自定义缩略图样式

fancybox默认支持缩略图显示效果，可以通过thumbs属性来自定义缩略图样式。常用的属性包括：

- autoStart：是否自动显示缩略图，设为true时会自动显示

- axis：缩略图排列方式，可以设置为“x”（水平排列）或“y”（竖直排列）

例如：

```

$("[data-fancybox]").fancybox({

thumbs: {

autoStart: true,

axis: "x"

}

});

```

3、自定义标题和描述

fancybox支持在弹出层下方显示图片标题和描述，可以通过标题和描述属性来设置，例如：

```

```

其中，data-caption属性设置图片的标题和描述，可以使用html标签自定义样式。

四、总结

fancybox是一款非常方便实用的jQuery插件，它能够轻松实现多种图片展示效果，并且非常易于使用。无论是在PC端还是移动端，都能够保证图片的正常展示，很大程度上提高了网站的美观性和用户体验。如果你正在开发一个网站，不妨考虑使用fancybox来打造出色的图片展示效果。