How do i give download option in fancybox

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

Read More
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

Related posts

Leave a Reply

2 comments

  1. Add a download attribute to anchor tag as follow

    <a href="imagelocation" download>
    

    Change afterLoad as follow

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