fancybox——圖片點擊放大插件

說明：教程使用的 fancybox 版本功能有點過時，可以去項目地址下載最新代碼（第五步）

一、加載文件

<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.0.47/jquery.fancybox.min.css">

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<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/1.jpg" title="圖片標題">
        <img alt="" src="images/1.jpg" />
    </a> 
    <a rel="group" href="images/2.jpg" title="圖片標題">
        <img alt="" src="images/2.jpg" />
        </a> 
    <a rel="group" href="images/3.jpg" title="藍天白雲綠草">
        <img alt="" src="images/3.jpg" />
    </a> 
</div>

 

三、JavaScript代碼參考

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

$(function(){
        //預覽效果
        $("a[rel=group]").fancybox({
            'titlePosition' : 'over',
            'cyclic'        : true,
            'titleFormat'    : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">' + (currentIndex + 1) +
                    ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
            }
        });
    });

 

四、第三方教程地址

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

 

五、插件項目GitHub地址

https://github.com/fancyapps/fancybox