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

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 : {}
        },        
      });
    });

问题是，当我点击下载按钮时，它会将我带到新的 window 图像 url 而不是下载它。

我做错了什么或者你能给我提供一些其他的选择吗

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 可以用来强制下载，但是，旧版浏览器仍然只会在浏览器 window.

中打开图像

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

这是browser compatibility

的列表

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

How do i give download option in fancybox

javascript

wordpress

jquery