Squarespace 7.0 Wells - Gallery Page Hover Titles

Hello!

I have a 7.0 Wells template site and I would like for the gallery to show image titles when hovering

Site: https://lily-bat-7al9.squarespace.com/
Password: hover

I've found other conversations about this but haven't had any luck using the code I've come across

Appreciate any help!

@townlyy Displaying image title on hover would require a custom script. Custom script can only be added on a business plan. Do you have a business plan on your website?

It is still under the trial period so I'm not sure what plan that would be. I can certainly sign up for a business plan though if that's what it takes. 

Wow, thanks so much. I'll give this a try on my end. Where do you recommend pasting the code? 

So I added it to the Page / Advanced / Page Header Code Injection and it looks great. If there's a better place to add the code, let me know otherwise it working perfectly on my end. Really appreciate the help! 

Would you happen to know how to have the clickthrough link work when you click on a gallery thumbnail? Ideally, when you click on an image it would open in a new tab and go to an external Spotify URL. I added the Spotify URLs to the images...Image Settings / Options / Click Through URL but that's as far as I've got. Thanks!

2 hours ago, townlyy said:

So I added it to the Page / Advanced / Page Header Code Injection and it looks great. If there's a better place to add the code, let me know otherwise it working perfectly on my end. Really appreciate the help! 

Would you happen to know how to have the clickthrough link work when you click on a gallery thumbnail? Ideally, when you click on an image it would open in a new tab and go to an external Spotify URL. I added the Spotify URLs to the images...Image Settings / Options / Click Through URL but that's as far as I've got. Thanks!

I think how you added it is fine.  Unfortunately, it looks like the Wells template doesn't do anything with the click through URL for Galleries. 

30 minutes ago, jpeter said:

I think how you added it is fine.  Unfortunately, it looks like the Wells template doesn't do anything with the click through URL for Galleries. 

Thanks jpeter. Yea I was just reading how it's not set up for that. I did find this page with some code that did allow the 1st image click-through link to work when I tried it. Not sure if that's a dead end though.

@townlyy Here's updated JS that will also account for clickthrough urls being set on the image loosely based on the article you found:
 

(function () {
  // The amount of time in milleseconds to intialize the code. 
  // This allows other code to run before our code is initialized.
  const DELAY = 500;

  /*********************************************************************
   * DO NOT ALTER CODE BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   *********************************************************************/

  // Initialize after the page has been loaded
  if (document.readyState === 'complete') {
    setTimeout(init, DELAY)
  } else {
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(init, DELAY);
    }, false);
  }

  async function init() {
    try {
      const ids = await getItemsIds();

      document.querySelectorAll('#thumbnails .thumb, #slideshow .slide').forEach(thumb => {
        const img = thumb.querySelector('img');
        const id = thumb.getAttribute('data-slide-id');

        // Create and set title of thumbnail
        if (img) {
          thumb.setAttribute('data-thumb-title', img.alt);
        }

        // Create and set clickthrough url attribute
        if (ids[id]) {
          thumb.setAttribute('data-clickthrough-url', ids[id])
        }
      });

      // Add click event that sends opens up browser in a new tab
      document.addEventListener('click', evt => {
        const thumb = evt.target.closest('.thumb, .slide');
        if (thumb && thumb.getAttribute('data-clickthrough-url')) {
          window.open(thumb.getAttribute('data-clickthrough-url'));
        }
      });

    } catch (error) {
      console.log('Error', error);
    }
  }

  /**
   * Creates on object mapping of slide id's and their associated clickthrough urls.
   * @returns object 
   * @example 
   *  {
   *    '45s329gdds0322343fs': 'https:/www.example.com',
   *  }
   */
  async function getItemsIds() {
    const url = new URL(window.location.href);
    url.searchParams.set('format', 'json');
    try {
      const res = await fetch(url.toString());
      let { items } = await res.json();
      items = items || [];
      const ids = items.reduce((obj, item) => {
        if (!obj[item.id]) {
          obj[item.id] = item.clickthroughUrl
        }
        return obj;
      }, {});
      return ids;
    } catch (err) {
      throw new Error(err);
    }
  }
})();

On 8/29/2023 at 5:18 PM, jpeter said:

@townlyy Here's updated JS that will also account for clickthrough urls being set on the image loosely based on the article you found:
 

(function () {
  // The amount of time in milleseconds to intialize the code. 
  // This allows other code to run before our code is initialized.
  const DELAY = 500;

  /*********************************************************************
   * DO NOT ALTER CODE BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   *********************************************************************/

  // Initialize after the page has been loaded
  if (document.readyState === 'complete') {
    setTimeout(init, DELAY)
  } else {
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(init, DELAY);
    }, false);
  }

  async function init() {
    try {
      const ids = await getItemsIds();

      document.querySelectorAll('#thumbnails .thumb, #slideshow .slide').forEach(thumb => {
        const img = thumb.querySelector('img');
        const id = thumb.getAttribute('data-slide-id');

        // Create and set title of thumbnail
        if (img) {
          thumb.setAttribute('data-thumb-title', img.alt);
        }

        // Create and set clickthrough url attribute
        if (ids[id]) {
          thumb.setAttribute('data-clickthrough-url', ids[id])
        }
      });

      // Add click event that sends opens up browser in a new tab
      document.addEventListener('click', evt => {
        const thumb = evt.target.closest('.thumb, .slide');
        if (thumb && thumb.getAttribute('data-clickthrough-url')) {
          window.open(thumb.getAttribute('data-clickthrough-url'));
        }
      });

    } catch (error) {
      console.log('Error', error);
    }
  }

  /**
   * Creates on object mapping of slide id's and their associated clickthrough urls.
   * @returns object 
   * @example 
   *  {
   *    '45s329gdds0322343fs': 'https:/www.example.com',
   *  }
   */
  async function getItemsIds() {
    const url = new URL(window.location.href);
    url.searchParams.set('format', 'json');
    try {
      const res = await fetch(url.toString());
      let { items } = await res.json();
      items = items || [];
      const ids = items.reduce((obj, item) => {
        if (!obj[item.id]) {
          obj[item.id] = item.clickthroughUrl
        }
        return obj;
      }, {});
      return ids;
    } catch (err) {
      throw new Error(err);
    }
  }
})();

 

You are a wizard! Thanks @jpeter!