Slideshow Thumbnails to Custom Image

Description

• change slideshow simple thumbnails to custom image
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use Slideshow Simple + Enabled Thumbnails

#1.2. Edit each image > Enter Image URL (we will use code to change thumbnail to this custom image). But wrap URL in # and # symbol. Something like this

#https://images.squarespace-cdn.com/content/v1/67e3b2e4cd573b229af279fd/1764379752130-XA3C2E2G3OADQAZ3OSSV/unsplash-image-1o2071GOVp0.jpg?format=1000w#

#1.4. Hover on Page where you use Slideshow > Click Gear icon

#1.5. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c04v2 Slideshow Thumbnails to Custom Image -->
<script>
window.SlideshowThumbConfig = {
  slideshowSelector: '.gallery-slideshow',
  marker: '#',
  clearAlt: true
};
</script>
<script>
(function () {
  var cfg = window.SlideshowThumbConfig || {};
  var slideshowSelector = cfg.slideshowSelector || '.gallery-slideshow';
  var marker = cfg.marker || '#';
  var clearAlt = cfg.clearAlt !== false;

  function base(url) {
    return (url || '').split('?')[0];
  }

  function extractLink(text) {
    if (!text) return '';
    var s = text.indexOf(marker);
    if (s === -1) return '';
    var e = text.indexOf(marker, s + marker.length);
    if (e === -1) return '';
    return text.slice(s + marker.length, e).trim();
  }

  function process(sw) {
    var slideImgs = sw.querySelectorAll('.gallery-slideshow-item .gallery-slideshow-item-img img');
    var map = {};

    slideImgs.forEach(function (img) {
      var link = extractLink(img.getAttribute('alt'));
      if (!link) return;
      var key = base(img.getAttribute('data-image') || img.getAttribute('src') || '');
      if (key) map[key] = link;
      if (clearAlt) img.setAttribute('alt', '');
    });

    var thumbs = sw.querySelectorAll('.gallery-slideshow-thumbnails-thumb img');
    if (!thumbs.length) return false;

    var allDone = true;
    thumbs.forEach(function (img) {
      if (img.dataset.customThumbDone === '1') return;
      var key = base(img.getAttribute('data-image') || img.getAttribute('src') || '');
      var link = map[key];
      if (!link) { allDone = false; return; }
      var baseLink = base(link);
      img.setAttribute('src', link);
      img.setAttribute('data-src', baseLink);
      img.setAttribute('data-image', baseLink);
      img.removeAttribute('srcset');
      img.dataset.customThumbDone = '1';
    });

    return allDone;
  }

  function watch(sw) {
    if (sw.dataset.customThumbWatching === '1') return;
    sw.dataset.customThumbWatching = '1';
    var obs = new MutationObserver(function () {
      if (process(sw)) {
        sw.dataset.customThumbComplete = '1';
        sw.dataset.customThumbWatching = '0';
        obs.disconnect();
      }
    });
    obs.observe(sw, { childList: true, subtree: true });
  }

  function run() {
    document.querySelectorAll(slideshowSelector).forEach(function (sw) {
      if (sw.dataset.customThumbComplete === '1') return;
      if (process(sw)) {
        sw.dataset.customThumbComplete = '1';
      } else {
        watch(sw);
      }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', run);
  } else {
    run();
  }
  window.addEventListener('load', run);
  document.addEventListener('mercury:load', run);
})();
</script>

#2. Customize

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use slideshow) > Add a Markdown Block

Add this code into Markdown

<script>
window.SlideshowThumbConfig = {
  slideshowSelector: '.gallery-slideshow',
  marker: '#',
  clearAlt: true
};
</script>
<script>
(function () {
  var cfg = window.SlideshowThumbConfig || {};
  var slideshowSelector = cfg.slideshowSelector || '.gallery-slideshow';
  var marker = cfg.marker || '#';
  var clearAlt = cfg.clearAlt !== false;

  function base(url) {
    return (url || '').split('?')[0];
  }

  function extractLink(text) {
    if (!text) return '';
    var s = text.indexOf(marker);
    if (s === -1) return '';
    var e = text.indexOf(marker, s + marker.length);
    if (e === -1) return '';
    return text.slice(s + marker.length, e).trim();
  }

  function process(sw) {
    var slideImgs = sw.querySelectorAll('.gallery-slideshow-item .gallery-slideshow-item-img img');
    var map = {};

    slideImgs.forEach(function (img) {
      var link = extractLink(img.getAttribute('alt'));
      if (!link) return;
      var key = base(img.getAttribute('data-image') || img.getAttribute('src') || '');
      if (key) map[key] = link;
      if (clearAlt) img.setAttribute('alt', '');
    });

    var thumbs = sw.querySelectorAll('.gallery-slideshow-thumbnails-thumb img');
    if (!thumbs.length) return false;

    var allDone = true;
    thumbs.forEach(function (img) {
      if (img.dataset.customThumbDone === '1') return;
      var key = base(img.getAttribute('data-image') || img.getAttribute('src') || '');
      var link = map[key];
      if (!link) { allDone = false; return; }
      var baseLink = base(link);
      img.setAttribute('src', link);
      img.setAttribute('data-src', baseLink);
      img.setAttribute('data-image', baseLink);
      img.removeAttribute('srcset');
      img.dataset.customThumbDone = '1';
    });

    return allDone;
  }

  function watch(sw) {
    if (sw.dataset.customThumbWatching === '1') return;
    sw.dataset.customThumbWatching = '1';
    var obs = new MutationObserver(function () {
      if (process(sw)) {
        sw.dataset.customThumbComplete = '1';
        sw.dataset.customThumbWatching = '0';
        obs.disconnect();
      }
    });
    obs.observe(sw, { childList: true, subtree: true });
  }

  function run() {
    document.querySelectorAll(slideshowSelector).forEach(function (sw) {
      if (sw.dataset.customThumbComplete === '1') return;
      if (process(sw)) {
        sw.dataset.customThumbComplete = '1';
      } else {
        watch(sw);
      }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', run);
  } else {
    run();
  }
  window.addEventListener('load', run);
  document.addEventListener('mercury:load', run);
})();
</script>