Как добавить кнопку скачивания фотографий в галерею сайта сделанного на tilda

09.05.2024

Как не странно, но у галереи на Тильда нет функции скачать фотографию.

Сделал небольшой JS скрпит для добавления кнопки, единственный момент она не созраняет ,а открывает в новом окне фото, но там его сохранить просто.

pic1

 
  <style>
    .soDownload {
      width: 22px;
      display: block;
      position: absolute;
      top: 50px;
      fill: white;
      cursor: pointer;
      z-index: 1;

      margin-left: auto;
      margin-right: auto;
      right: 0px;
      left: 0;
      text-align: center;
    }
  </style>

<script>
  document.body.onload = soUnload;

  function soUnload() {
    const blocksDist = document.querySelectorAll('.t746__imgwrapper');

    blocksDist.forEach(blockDist => {
      const elDownload = document.createElement("div");
      elDownload.classList.add("soDownload");
      elDownload.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>';

      blockDist.appendChild(elDownload);

      const elImg = blockDist.querySelector('.t-slds__bgimg');
      const sImg = elImg.getAttribute('data-original');

      elDownload.addEventListener('click', function() {
        window.open(sImg);
      })
    })


  }
</script>

Категории: JavaScript, CSS
Яндекс.Метрика