Question

我正在使用精美的盒子在我的wordpress主题中显示图像以下是我用来显示图像的代码。

   <?php                    
                     if ( get_post_gallery() ):             
                        $gallery = get_post_gallery($post,false);
                        $ids= explode(',', $gallery['ids']);
                ?>            
                <?php 
                foreach( $ids AS $id ): 
                ?>
                <?php $src = wp_get_attachment_image_src($id,'thumbnail');
                      $src1 = wp_get_attachment_image_src($id,'full');

                ?>
                  <a class="fancybox-buttons col-sm-4 col-xs-6  paper_img" data-fancybox-group="button" href="<?php echo $src1[0];?>" title="">
                    <img src="<?php echo $src[0];?>" class=" fancybox-image img-responsive"/>
                  </a>                      
                <?php 
                endforeach;     
                endif;       
                ?>

这是我一直在使用的js来自某个地方

jQuery(document).ready(function() {    
    $('.fancybox-buttons').attr("rel", "gallery").fancybox({     
        afterLoad: function () {
                this.title = this.title ?
                    '<a href="' + this.href.replace( "download")
                    .replace(".jpg", ".jpg") +
                    '">Download</a> ' + this.title 
                :
                    '<a href="' + this.href.replace( "download")
                    .replace(".jpg", ".jpg") +
                    '">Download</a>';
            },   

        openEffect  : 'none',
        closeEffect : 'none',

        prevEffect : 'none',
        nextEffect : 'none',

        closeBtn  : false,

        helpers : {
          title : {
            type : 'inside'
          },
          buttons : {}
        },        
      });
    });

问题是，当我点击下载按钮时，它会将我带到新窗口，而不是下载它。

我做错了什么，或者你可以提供一些其他选择

Answer 1

向锚标记添加下载属性，如下所示

<a href="imagelocation" download>

更改afterLoad如下

    afterLoad: function () {
            this.title = this.title ?
                '<a href="' + this.href.replace( "download")
                .replace(".jpg", ".jpg") +
                '" download>Download</a> ' + this.title 
            :
                '<a href="' + this.href.replace( "download")
                .replace(".jpg", ".jpg") +
                '" download>Download</a>';
        },

Answer 2

HTML5有download attribute可用于强行下载，但旧版浏览器仍会在浏览器窗口中打开图像。

'<a href="' + this.href.replace( "download")
.replace(".jpg", ".jpg") +
'" download="filename.jpg">Download</a> ' + this.title

这是browser compatibility

的列表

我如何在fancybox中提供下载选项

2 个答案: