一、加載文件

1 <link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.0.47/jquery.fancybox.min.css">
2 
3 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
4 
5 <script src="https://cdn.staticfile.org/fancybox/3.0.47/jquery.fancybox.min.js"></script>

二、HTML代碼參考

註：為使特效生效，用a標簽包含img標簽不是固定的，可以用li或者div,重要的是需要讓img父級標簽的rel參數與js一致，以及href參數與img的src參數一致

<div>
    <a rel="group" href="images/b1.jpg" title="圖片標題">
        <img alt="" src="images/s1.gif" />
    </a> 
    <a rel="group" href="images/b2.jpg" title="圖片標題">
        <img alt=""
 
 src="images/s2.gif" />
        </a> 
    <a rel="group" href="images/b3.jpg" title="藍天白雲綠草">
        <img alt="" src="images/s3.gif" />
    </a> 
</div>

三、JavaScript代碼參考

註：$("a[rel=group]").fancybox({}); 中被選元素應與img父級標簽類型相同，如此處都為a標簽

 1 $(function(){
 2         //預覽效果
 3         $("a[rel=group]").fancybox({
 
 4             ‘titlePosition‘ : ‘over‘,
 5             ‘cyclic‘        : true,
 6             ‘titleFormat‘    : function(title, currentArray, currentIndex, currentOpts) {
 7                 return ‘<span id="fancybox-title-over">‘ + (currentIndex + 1) +
 8                     ‘ / ‘ + currentArray.length + (title.length ? ‘   ‘ + title : ‘‘) + ‘</span>‘;
 9             }
10         });
11     });

四、第三方教程地址

https://www.helloweba.com/view-blog-65.html

fancybox——圖片點擊放大插件