I am using the fancy box to display the images in my wordpress theme.
Following is the code i am using to display the images.
<?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;
?>
This is the js i have been using which i got from somewhere
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 : {}
},
});
});
The problem is that when i click on download button it takes me to the new window to the url of image instead of downloading it.
What i am doing wrong or can you provide me with some other alternative
HTML5 has a download attribute which you can use to force the download, however, older browsers will still just open the image in the browser window.
Here’s a list of browser compatibility
Add a download attribute to anchor tag as follow
Change afterLoad as follow