網頁上用了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>

問題解決。