fancybox——图片点击放大插件

Posted 2020-10-26 zhaoxlchn

一、加载文件

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