这次给大家带来JQuery的FancyBox插件做出图片展示功能，FancyBox插件做出图片展示功能的注意事项有哪些，下面就是实战案例，一起来看一下。

FancyBox是一个用于显示图像，HTML内容和多媒体的lightbox工具。

jquery插件之fancybox弹出框特效，与广为人之的lightbox插件比较类拟,可以展示单张图片，也可展示一组图片，它还可以展示自定义的内容与ajax载入外部文件的内容等，功能也是很方便与实用的。

Demo effect(image gallery):

Sample code:

<link><p>  </p><h2>First test(Image gallery)</h2>  <a><img  alt="JQuery的FancyBox插件做出图片展示功能" ></a>  <a><img  alt="JQuery的FancyBox插件做出图片展示功能" ></a>

<ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ>    $(document).ready(function () {      $(".fancybox1").fancybox();          });</ｓｃｒｉｐｔ>

Demo effect(single images):

Sample code:

<link><p>  </p><h2>Single images</h2>  <a>    <img  alt="JQuery的FancyBox插件做出图片展示功能" >  </a>  <a>    <img  alt="JQuery的FancyBox插件做出图片展示功能" >  </a>  <a>    <img  alt="JQuery的FancyBox插件做出图片展示功能" >  </a>  <a>    <img  alt="JQuery的FancyBox插件做出图片展示功能" >  </a>

<ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ>    $(document).ready(function () {      $("#single_1").fancybox({        helpers: {          title: {            type: &#39;float&#39;          }        }      });      $("#single_2").fancybox({        openEffect: &#39;elastic&#39;,        closeEffect: &#39;elastic&#39;,        helpers: {          title: {            type: &#39;inside&#39;          }        }      });      $("#single_3").fancybox({        openEffect: &#39;none&#39;,        closeEffect: &#39;none&#39;,        helpers: {          title: {            type: &#39;outside&#39;          }        }      });      $("#single_4").fancybox({        helpers: {          title: {            type: &#39;over&#39;          }        }      });          });  </ｓｃｒｉｐｔ>

Demo effect(thumbnail):

Sample code:

<link><link><p>  </p><h2>Thumbnail helper</h2>  <a>    <img  alt="JQuery的FancyBox插件做出图片展示功能" >  </a>  <a>    <img  alt="JQuery的FancyBox插件做出图片展示功能" >  </a>  <a>    <img  alt="JQuery的FancyBox插件做出图片展示功能" >  </a>  <a>    <img  alt="JQuery的FancyBox插件做出图片展示功能" >  </a>

<ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ></ｓｃｒｉｐｔ>  <ｓｃｒｉｐｔ></ｓｃｒｉｐｔ>  <ｓｃｒｉｐｔ>    $(document).ready(function () {      $(".fancybox-thumb").fancybox({        prevEffect: &#39;elastic&#39;,        nextEffect: &#39;elastic&#39;,        helpers: {          title: {            type: &#39;inside&#39;          },          thumbs: {            width: 50,            height: 50          }        }      });    });  </ｓｃｒｉｐｔ>

相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！

推荐阅读：

jquery+php实现动态数字显示效果

jQuery动画效果图片轮播实现（附代码）