fancybox弹出显示关闭后原网页图片消失问题

网页上用了fancybox来显示图片：

1.首先是css，添加：

<link rel="stylesheet" type="text/css" href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" />

2.JavaScript方面：注意要加migrate.min.js，否则会出现“页面报错Cannot read property ‘msie’ of undefined”

<script type="text/javascript" src="../../assets/global/plugins/jquery.min.js"></script>
<script type="text/javascript" src="../../assets/global/plugins/jquery-migrate.min.js"></script>

<script type="text/javascript" src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js"></script>

3.然后页面html控件：

<a href="../../assets/admin/pages/media/works/img1.jpg"> 

<img

    class="fancybox-button"

    data-rel="fancybox-button"

    class="img-responsive"

    src="../../assets/admin/pages/media/works/img1.jpg" alt="">

</a>

运行起来，结果发现点了图片出现fancybox弹出框，点击关闭后，原页面上的图片也消失了！

经过摸索，发现是上面蓝色的class和data-rel这两个属性，应该放在<a>里才行，如下：

<a href="../../assets/admin/pages/media/works/img1.jpg" class="fancybox-button" data-rel="fancybox-button"> 

<img

    class="img-responsive"

    src="../../assets/admin/pages/media/works/img1.jpg" alt="">

</a>

问题解决。