jquery.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>

问题解决。

---

自己用的代码与上面有点区别

<img src="image/051522419pgq.jpg" alt="" data-fancybox="group" data-caption="服务贸易展区">

改为

<a href="image/051522419pgq.jpg" data-fancybox="group" data-caption="服务贸易展区">
                            <img src="image/051522419pgq.jpg" alt="" >
                            </a>
问题解决