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

我正在使用花式方框显示我的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 : {}
        },        
      });
    });

jQuery（document）.ready（function（）{
$（'.fancybox按钮'）.attr（“rel”，“gallery”）.fancybox（{
后加载：函数（）{
this.title=this.title？
''+这个名字
:
'';
},   
openEffect:'无'，
closeEffect:'无'，
效果：“无”，
下一个效果：“无”，
closeBtn:false，
助手：{
标题：{
类型：“内部”
},
按钮：{}
},        
});
});

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

---

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

<a href="imagelocation" download>

    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>';
        },   

“+this.title
:
'';
},   

HTML5有一个可用于强制下载的图标，但是，较旧的浏览器仍然会在浏览器窗口中打开图像

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

“”+this.title

---

这是一个列表，您可以将该图像作为href，因此它将按原样链接到该图像。您需要将“下载”作为“a”标记的属性，而不是其属性innerhtml@APAD1Man u r真棒，工作非常出色，谢谢你。不用担心，如果你想更改下载文件的名称，只需调整

=“filename.jpg”

部分，你可以根据需要使用变量。否则，如果您只想下载与服务器上相同的文件名，您可以删除

=“filename.jpg”

部分，就像@Zeshan answer中一样。