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