Add a download image/video button to WordPress gallery

Product:

Wonder Gallery

Question:

I need my users to be able to download any of the self hosted video and image files. Is this possible?

Answer:

There are two steps in this tutorial.

Step 1 - In the WordPress post or page, where you have added the gallery shortcode, switch to "Text" edit mode, add the following code to create a button with a class name gallery-download:

<a href="#" class="gallery-download"><button>Download</button></a>

Clicking the download button will download the image or the video that is currently displayed in the gallery.

If you have multiple galleries on the same webpage and each gallery has a download button, make sure to use a unique class name for each gallery. You also need to change the class name gallery-download in the JavaScript code of step 2.

Step 2 - In the plugin, step 3 Options tab, Advanced Options, add the following code to the Custom JavaScript input box:

jQuery(document).ready(function() {
  jQuery(".gallery-download").click(function() {
    var cur = jQuery("#wonderplugingallery-GALLERYID").data("html5galleryobject").curElem;
    var curElem = jQuery("#wonderplugingallery-GALLERYID").data("html5galleryobject").elemArray[cur];
    var downloadlink = (curElem[9] == 1 || curElem[9] == 6) ? curElem[2] : "";
    if (downloadlink)
    {
      var filename = downloadlink.substring(downloadlink.lastIndexOf('/') + 1);
      jQuery(this).attr("href", downloadlink);  
      jQuery(this).attr("download", filename);  
    }
    else
    {
      return false;
    }
  });
});

A demo is as follows. Clicking the download button will download the image or the video file that is currently displayed in the gallery.