How can I change the name of the file when it's downloaded using Fancybox

Question

I have a div with various images in a grid which is populated when the pages loads and use Fancybox-3 to enable zoom and download functions when an image is clicked.

When the file is uploaded I add an 8 digit random hash to the beginning to ensure there are no duplicates and need this 8 digit hash removed on download so that the user gets the file with the same name it was uploaded with. I've searched various sources and can't find an answer

Answer 1

But where is the problem? Did you try anything? Did you not know that fancybox (like most of js scripts/libraries) provides a rich API so you can easily 1) execute your code using callbacks? 2) access dom elements?

Example:

$('[data-fancybox="images"]').fancybox({
  buttons: [
    'zoom',
    'slideShow',
    'download',
    'thumbs',
    'close'
  ],
  afterShow : function(instance, current) {
    // This is how you can get src of current image
    console.info('current.src: ' + current.src);

    // This is how you can access dom elements
    instance.$refs.toolbar
      .find("[data-fancybox-download]")
      .attr("href", "https://t5.rbxcdn.com/3ec65288167d11dafe3f2dd674add32f");
  }
});

https://codepen.io/anon/pen/KxGLar?editors=1010