Download Button

[bennyb]

Hi,

Loving the new fancybox.

What's the best way to add a download button for the image, think fancybox 3 use to display this by default.

Ben

[bennyb]

I'm currently adding on the reveal event to the caption area. Might be a better way to do this, but basic example of what's working for me.

Fancybox.bind("[data-fancybox]",  {
  on: {
    reveal: (f, slide) => {
      slide.$caption.innerHTML = '"";  //Clear the contents of caption to avoid download link getting added multiple times on galleries.
      var title = document.createTextNode(slide.caption); 
      slide.$caption.appendChild(title); //Set the caption again
      
      var downloadLink = document.createElement('a');
      var downloadLinkTxt = 'Download";
      downloadLink.appendChild(downloadLinkTxt);
      downloadLink.download = slide.caption;
      downloadLink.href = slide.src;
      slide.$caption.appendChild(downloadLink);
    },
  },
});

[fancyapps]

Hi,

It depends on your preferences. For example, you could create a custom top toolbar. v3 had a built-in toolbar plugin, it's in the todo list for v4, but you can easily create your own.

Demo - https://fancyapps.com/playground/pH

JS

Fancybox.bind('[data-fancybox="gallery"]', {
    closeButton : false,
    on: {
      initLayout: (fancybox) => {
        // Create top bar
        const $top = document.createElement("div");
        $top.classList.add("fancybox__top");

        // Create download link
        const $downloadLink = document.createElement("a");
        $downloadLink.classList.add("carousel__button");
        $downloadLink.classList.add("fancybox__download");
        $downloadLink.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" display="block" id="Download"><path d="M12 15V3m0 12l-4-4m4 4l4-4"></path><path d="M2 17l.621 2.485A2 2 0 0 0 4.561 21H19.439a2 2 0 0 0 1.94-1.515L22 17"></path></svg>';

        $downloadLink.addEventListener("click", (event) => {
          event.stopPropagation();
        });

        fancybox.$downloadLink = $downloadLink;

        // Create close button
        const $closeBtn = document.createElement("div");
        $closeBtn.innerHTML = '<button class="carousel__button" title="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"></path></svg></button>';
        $closeBtn.addEventListener("click", () => {
          fancybox.close();
        });

        // Add elements
        $top.appendChild($downloadLink);
        $top.appendChild($closeBtn);

        fancybox.$backdrop.after($top);
      },
      "initCarousel Carousel.change": (fancybox) => {
        // Update link 
        const src = fancybox.getSlide().src;

        fancybox.$downloadLink.href = src;
        fancybox.$downloadLink.setAttribute("download", src);

      },
    },
  });

CSS

.fancybox__top {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

.fancybox__container.is-animated[aria-hidden="false"] .fancybox__top {
    transition: opacity var(--fancybox-ts, 0.25s) ease;
    opacity: var(--fancybox-opacity, 1);
}

.fancybox__container.is-animated[aria-hidden="true"] .fancybox__top {
    transition: opacity 0.2s ease;
    opacity: 0;
}

[bennyb]

Great thanks, very helpful.