Jump to content

Squarespace 7.0 Wells - Gallery Page Hover Titles

Go to solution Solved by jpeter,

Recommended Posts

  • Replies 9
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution

@townlyy

You can use add the following JS and CSS below:

CSS


/* Setup initial styles of pseudo element */
.collection-type-gallery #thumbnails .thumb:after {
  transition: all .2s;
  content: '';
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

/* Change the background and content when user hovers */
.collection-type-gallery #thumbnails .thumb:hover:after {
  content: attr(data-thumb-title);
  background-color: rgba(0,0,0, .7);
}


Javascript

Ensure the JS code is between <script> tags.

(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);
    }
    
    function init() {
      // Loop through thumbnails and add a new `data-thumb-title` attribute based on the 
      // thumbnail's image alt attribute.
      document.querySelectorAll('.collection-type-gallery #thumbnails .thumb').forEach(thumb => {
        const img = thumb.querySelector('img');
        if(img) {
          thumb.setAttribute('data-thumb-title', img.alt);
        }
      });
    }
  })();

 

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

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!

Link to comment
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. 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
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.

Link to comment

@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);
    }
  }
})();

 

Edited by jpeter

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.