闲篇-利用fancybox插件做一个图片弹窗工具

共计 1314 个字符，预计需要花费 4 分钟才能阅读完成。

最近公司的古董项目中有用到这款插件，就查找了一下相关资料和用法，下面是一些基本的简单用法，比较容易掌握，有需要的小伙伴可以参考。

FancyBox相较来说 算是非常老的一款弹窗工具了，站长一直使用到现在的主要原因是懒得重构了。

FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

相对与Lightbox而言，阴影效果更好。但是比Lightbox绚丽。

可以点击下面的图片 查看演示效果：

使用方法

1 需要下载jquery–fancybox的文件，可以直接右击本站，查看源码，然后找到css 和JS文件，直接复制即可

2 引入对应的js和css文件

<pre class="brush:html;toolbar:false">    <!--首先要引入jQuery库和fancybox插件库-->
    <script src="https://ailcc.com/storage/template/default/assets/js/jquery.min.js">
    </script>
    <!--FancyBox核心js和css文件：-->
    <script src="https://ailcc.com/storage/template/default/assets/js/fancybox.min.js">
    </script>
    <link rel="stylesheet" href="https://ailcc.com/storage/template/default/assets/css/fancybox.min.css" type="text/css" media="all">

站内使用相对简单，因为仅仅需要图片弹窗效果 ，所以只需引入上面的JS和CSS即可。

创建一个链接元素

<pre class="brush:html;toolbar:false">    <a href="xxxxxx.jpg" data-fancybox="portfolio">
        <img src="xxxxxxxx.jpg">
    </a>

需要注意的是 “data-fancybox="portfolio” 这句是必须的

PS：不能添加在img里面，不然弹出图片后，关闭弹窗，图片会丢失。

假如是文章编辑中，添加图片，而不能自动添加A标签的话，那面可以在一个全局JS文件中，添加下方JS代码，调用fancybox弹窗功能。

<pre class="brush:js;toolbar:false">$(function(){ $(".post-content img").wrap(function(){ return '
    <a data-fancybox="portfolio" href="'+ $(this).attr(" src="" ")="" +'"="">
        <img src="'+ $(this).attr(" ")="" +'"="" alt="post-title"></a>'; }); });

至于其他的参数，自行百度即可。