使用 jquery.fancybox进行图片预览查看的代码举例

吉星9527ABC

已于 2023-12-08 10:02:44 修改

阅读量561

点赞数 8

文章标签： jquery 前端 javascript

于 2023-12-07 16:38:56 首次发布

本文链接：https://blog.csdn.net/jinsedeme0881/article/details/134859285

版权

jquery建议使用3.0以上的。

代码举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业资质</title>
    <link rel="stylesheet" type="text/css" href="./fancybox-master/dist/jquery.fancybox.css">
</head>
<body>
    <!-- 头部  data-fancybox data-caption="My caption" -->
    <div id="webheader"></div>
    <div>
        <div class="product_List">
            <div class="product_List_box certificate_box">
                <div  data-fancybox="gallery" data-caption="质量管理体系认证证书4"  href="./images/certificate_4.jpg"><img src="./images/certificate_4.jpg" ></div>
                <div class="product_List_text">质量管理体系认证证书4</div>
            </div> 
            <div class="product_List_box certificate_box">                   
                <div  data-fancybox="gallery" data-caption="质量管理体系认证证书5" href="./images/certificate_5.jpg"><img src="./images/certificate_5.jpg" ></div>
                <div class="product_List_text">质量管理体系认证证书5</div>
            </div>  
            <div class="product_List_box certificate_box">                       
                <div  data-fancybox="gallery" data-caption="质量管理体系认证证书2" href="./images/certificate_2.jpg"><img src="./images/certificate_2.jpg"  ></div>
                <div class="product_List_text">质量管理体系认证证书2</div>
            </div>        
        </div>     
    </div>
    <!-- 底部 -->
    <div id="webfooter"></div>
    <div id="floatInfo"></div>
</body>
<script src="./js/jquery-3.6.2.min.js"></script>

<script src="./fancybox-master/dist/jquery.fancybox.js"></script>
<script type="text/javascript">
    /**
     *  type: 'image',  
            openEffect: 'fade',  
            closeEffect: 'fade',  
            nextEffect: 'fade',  
            prevEffect: 'fade',  
            padding: 0,  
            margin: [20, 60, 20, 60] ,// Increase if the images are small and you want to have more space between them.  
              $('.fancybox').fancybox({  
           
            nextClick:'true',
            openEffect      : 'elastic',
            closeEffect     : 'fade',
            nextEffect      : 'easeOutBack',
            prevEffect      : 'easeInBack',
            helpers : {
                title : {
                    type : 'outside'
                }
            },
        });  
     */
    $(document).ready(function () {
        // $('.fancybox').fancybox();

        $('[data-fancybox]').fancybox({
            // 在此进行自定义设置
        });
    })
    
</script>

</html>

进一步设置按钮样式的代码

 $('[data-fancybox]').each(function(index, obj){
            //console.log(index, $(obj).children(0).attr('src'))
            $(obj).attr('href', $(obj).children(0).attr('src'))
           // console.log(index, $(obj).attr('href'))
           $(obj).attr('data-caption', $(obj).siblings(0).text())
          
        });
        $('[data-fancybox]').fancybox({
            // 是否显示顶部的toolbar
            toolbar : false,
            
            // 控制顶部toolbar里显示的图表
            // 通过`btnTpl`选项的模板创建按钮，并被放置在toolbar(class="fancybox-toolbar"`的元素)中
            buttons : [
            'slideShow',
            'fullScreen',
            'thumbs',
            'share',
            'download',
            'zoom',
            'close'
            ],
            // 在此进行自定义设置
            btnTpl : {
 
                download : '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="下载">' +
                '<svg viewBox="0 0 24 24">' +
                '<path d="M18.62 17.09V19H5.38v-1.91zm-2.97-6.96L17 11.45l-5 4.87-5-4.87 1.36-1.32 2.68 2.64V5h1.92v7.77z"/>' +
                '</svg>' +
                '</a>',
                
                zoom : '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="缩放">' +
                '<svg viewBox="0 0 40 40">' +
                '<path d="M 18,17 m-8,0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 M25,23 L31,29 L25,23" />' +
                '</svg>' +
                '</button>',
                
                close : '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="关闭">' +
                '<svg viewBox="0 0 40 40">' +
                '<path d="M10,10 L30,30 M30,10 L10,30" />' +
                '</svg>' +
                '</button>',
                
                // 如果'smallBtn'没有设置为 false，默认关闭按钮将会被放置在你的 html/inline/ajax 内容中
                smallBtn : '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>',
                
                // 箭头
                arrowLeft : '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="上一张">' +
                '<svg viewBox="0 0 24 24">' +
                '<path d="M15 3l-9 9 9 9"></path>' +
                '</svg>' +
                '</button>',
                
                arrowRight : '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="下一张">' +
                '<svg viewBox="0 0 24 24">' +
                '<path d="M9 3l9 9-9 9"></path>' +
                '</svg>' +
                '</button>'
            },
        });