fancybox——图片点击放大插件

一、加载文件

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/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

 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

 

五、插件项目GitHub地址

https://github.com/fancyapps/fancybox

　　

转载于:https://www.cnblogs.com/zhaoxlchn/p/8496613.html