Falconer

On 6/19/2020 at 10:00 PM, jpeter said:

@Falconer You can add the JS below. This will treat the text as a clickable.

JavaScript

(function(document){

  if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    addClosestPolyfill();

    delegate(document, 'click', '.gallery-caption-grid-masonry', function(evt){
      var item = evt.target.closest('.gallery-masonry-item.has-clickthrough');
      if(item) {
        item.querySelector('a').click();
      }
    });
  }

  function delegate (target, eventName, selector, handler) {
    target.addEventListener(eventName, function (event) {
      if (matches(event)) {
        handler(event);
      }
    });

    function matches(event) {
      const element = event.target.closest(selector);
      return element !== null;
    };
  }

  function addClosestPolyfill(){
    if (!Element.prototype.matches) {
      Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                  Element.prototype.webkitMatchesSelector;
    }
    
    if (!Element.prototype.closest) {
      Element.prototype.closest = function(s) {
        var el = this;
    
        do {
          if (Element.prototype.matches.call(el, s)) return el;
          el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
      };
    }
  }

})(document);

Be sure to add the code to <script> tags, example:

<script>
  // add js code here
</script>

 

The code checks out. Many thanks for your help jpeter and I'm sure many others will find it helpful

44 minutes ago, jpeter said:

@Falconer You can add the JS below. This will treat the text as a clickable.

JavaScript

(function(document){

  if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init(){
    addForEachPolyfill();
    addClosestPolyfill();

    delegate(document, 'click', '.gallery-caption-grid-masonry', function(evt){
      var item = evt.target.closest('.gallery-masonry-item.has-clickthrough');
      if(item) {
        item.querySelector('a').click();
      }
    });
  }

  function delegate (target, eventName, selector, handler) {
    target.addEventListener(eventName, function (event) {
      if (matches(event)) {
        handler(event);
      }
    });

    function matches(event) {
      const element = event.target.closest(selector);
      return element !== null;
    };
  }

  function addClosestPolyfill(){
    if (!Element.prototype.matches) {
      Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                  Element.prototype.webkitMatchesSelector;
    }
    
    if (!Element.prototype.closest) {
      Element.prototype.closest = function(s) {
        var el = this;
    
        do {
          if (Element.prototype.matches.call(el, s)) return el;
          el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
      };
    }
  }

  function addForEachPolyfill(){
    if (window.NodeList && !NodeList.prototype.forEach) {
        NodeList.prototype.forEach = Array.prototype.forEach;
    }
  }

})(document);

Be sure to add the code to <script> tags, example:

<script>
  // add js code here
</script>

 

Many thanks for this. I'm going away to learn about adding JavaScript to Squarespace and then I'll let you know how I got on!

.gallery-caption-grid-masonry p.gallery-caption-content {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}

I added this which is a start - it makes the text non-selectable. But the captioned part of the image still doesn't support clickthrough

I suppose what I'm asking is, can the text in the gallery be 'unselectable'? 

This is a pretty small detail but I don't suppose there's a way for the caption to also support the clickthrough url? Currently when you rollover the text you get the text edit cursor. I guess it's not a big deal, just wondering if there's an easy fix?

31 minutes ago, jpeter said:

@Falconer You can try adding the CSS below to the page

.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  padding: 0;
}


.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  opacity: 0;
  transition: all .5s;
}

.gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
  height: auto;
}

.gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
}


.gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
  opacity: 1;
  transition: all .5s;
}

.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 1.3rem;
}

This will add the following effect:

 

You did it! Thanks so much and I'm sure this will be a help to many others searching

There is the option to bed the caption in the image png.. just not the cleanest method and means the text will also darken on rollover 

no option for that no

3 hours ago, RyanDejaegher said:

Hey @Falconer do you have your gallery set to display a caption?

I have now...

Site URL: https://round-mouse-b95a.squarespace.com/

Hi guys,

In 7.1 I want the masonry grid gallery on my homepage to show text descriptions on rollover. I've been searching everywhere for this code and have managed to find code that darkens the images but doesn't show the link title. 

My Site

Password: thefalcon

Any ideas?

Many thanks,

Martin