Clickable Thumbnails on List Section Banners

Mar 13

By default, Squarespace doesn't allow images within List Sections to be clickable. While making images clickable is straightforward for the Simple List layout, Banner and Carousel layouts are a bit more challenging. Specifically, these layouts struggle because browsers have difficulty distinguishing between a simple click and a click-and-drag gesture.

The JavaScript and CSS below resolves this by detecting user interactions. It differentiates clicks from drag actions, allowing Carousel images to become clickable links only when the user isn't dragging.

You’ll need the buttons toggled on for each list section it, but I’ve added some optional CSS below if you’d like to hide it visually.

Add this to your Site Footer Code Injection area:

<!-- Clickable Image in List Section Banners from Will-Myers.com -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const listContainers = document.querySelectorAll(".user-items-list ul");
    if (!listContainers.length) return;

    let startX, startY, startTime;
    const clickThreshold = 10; // pixels
    const timeThreshold = 300; // milliseconds

    function handleStart(e) {
      const clientX = e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : null);
      const clientY = e.clientY || (e.touches && e.touches[0] ? e.touches[0].clientY : null);
      if (clientX === null || clientY === null) return;

      const mediaInner = e.target.closest('.slide-media-container');
      if (!mediaInner) return;

      startX = clientX;
      startY = clientY;
      startTime = Date.now();
    }

    function handleEnd(e) {
      const clientX = e.clientX || (e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : null);
      const clientY = e.clientY || (e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientY : null);

      if (clientX === null || clientY === null) return;

      const mediaInner = e.target.closest('.slide-media-container');
      if (!mediaInner) return;

      const deltaX = Math.abs(clientX - startX);
      const deltaY = Math.abs(clientY - startY);
      const deltaTime = Date.now() - startTime;

      if (deltaX < clickThreshold && deltaY < clickThreshold && deltaTime < timeThreshold) {
        const listItem = mediaInner.closest('li.list-item');
        if (!listItem) return;

        const titleLink = listItem.querySelector(".list-item-content__title a");
        const buttonLink = listItem.querySelector(".list-item-content__button-container a");
        const href = titleLink ? titleLink.getAttribute("href") :
        buttonLink ? buttonLink.getAttribute("href") : null;

        if (href) {
          window.location.href = href;
        }
      }
    }

    // Add event listeners to each list container
    listContainers.forEach(listContainer => {
      listContainer.addEventListener('mousedown', handleStart);
      listContainer.addEventListener('mouseup', handleEnd);
      listContainer.addEventListener("touchstart", handleStart);
      listContainer.addEventListener("touchend", handleEnd);
    });
  });
</script>

Add this to your Custom CSS area

/** 
* Clickable Image in 
* List Section Banners 
* from Will-Myers.com
**/
.user-items-list ul{
  .slide-media-container{
    pointer-events:auto;
  }
  .slide-media-container img {
    pointer-events:none;
  }
}

(Optional) Hide Buttons in Banner Slideshow

/** 
* Hide Buttons in 
* List Section Banners 
* from Will-Myers.com
**/
.user-items-list-banner-slideshow{
  .list-item-content__button-container{
    display: none;
  }
}

Let us know in the comments, if this does or doesn’t work for you so we can keep tweaking on this.

Squarespace 7.1