Falconer Posted June 18, 2020 Share Posted June 18, 2020 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 Link to comment
RyanDejaegher Posted June 18, 2020 Share Posted June 18, 2020 Hey @Falconer do you have your gallery set to display a caption? Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Falconer Posted June 18, 2020 Author Share Posted June 18, 2020 3 hours ago, RyanDejaegher said: Hey @Falconer do you have your gallery set to display a caption? I have now... Link to comment
RyanDejaegher Posted June 18, 2020 Share Posted June 18, 2020 @Falconer, was there no option to show the title only on hover? Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Falconer Posted June 18, 2020 Author Share Posted June 18, 2020 no option for that no Link to comment
Falconer Posted June 19, 2020 Author Share Posted June 19, 2020 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 Link to comment
jpeter Posted June 19, 2020 Share Posted June 19, 2020 (edited) @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: z8f5SMZ9Is.mp4 Edited June 19, 2020 by jpeter addisonpann and djshiflet 2 Link to comment
Falconer Posted June 19, 2020 Author Share Posted June 19, 2020 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: z8f5SMZ9Is.mp4 1.49 MB · 0 downloads You did it! Thanks so much and I'm sure this will be a help to many others searching Link to comment
Falconer Posted June 19, 2020 Author Share Posted June 19, 2020 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? Link to comment
Falconer Posted June 19, 2020 Author Share Posted June 19, 2020 I suppose what I'm asking is, can the text in the gallery be 'unselectable'? Link to comment
Falconer Posted June 19, 2020 Author Share Posted June 19, 2020 .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 Link to comment
jpeter Posted June 19, 2020 Share Posted June 19, 2020 (edited) @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> Edited June 19, 2020 by jpeter Remove forEach polyfill since we're not using it Link to comment
Falconer Posted June 19, 2020 Author Share Posted June 19, 2020 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! Link to comment
Falconer Posted June 21, 2020 Author Share Posted June 21, 2020 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 Link to comment
ema1 Posted July 22, 2020 Share Posted July 22, 2020 hi I have added this code to my gallery but the background opacity does not show so text is hard to read. also on mobile view the caption fits the whole image, can this be resized smaller? Thanks so much Link to comment
tuanphan Posted July 24, 2020 Share Posted July 24, 2020 On 7/23/2020 at 5:00 AM, ema1 said: hi I have added this code to my gallery but the background opacity does not show so text is hard to read. also on mobile view the caption fits the whole image, can this be resized smaller? Thanks so much Can you share link to gallery page? We can help easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ema1 Posted July 24, 2020 Share Posted July 24, 2020 my page is still not live so I don't know if you will see it? I have added 2 screen shots. The first is the desktop view, with hover on first image. The text shows up but no background opacity, just text on the image. This is ok on the dark image but more difficult to see on the pale images. Below is the mobile view. The text fills the whole box so I wan to resize smaller for a mobile version. The click through doesn't work because the text fills so much of the box. Any help to reduce the size of the text in the mobile view would be amazing. Thank you Link to comment
tuanphan Posted July 25, 2020 Share Posted July 25, 2020 You can setup password & share url Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ema1 Posted August 4, 2020 Share Posted August 4, 2020 my site is now live www.emmawrightphotography.com so you can have a look. Thanks so much Link to comment
danielhaydenh Posted November 28, 2020 Share Posted November 28, 2020 On 6/19/2020 at 9:35 AM, 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: z8f5SMZ9Is.mp4 1.49 MB · 6 downloads @jpeter ive used this code and it works great but when the image has a link attached to it it removed the colour overlay. do you know of how to adjust this? jkurtz 1 Link to comment
danielhaydenh Posted November 28, 2020 Share Posted November 28, 2020 @tuanphan i'm having a similar issue if you can shed some light i would be very grateful I have edited the code to add a background colour to images with links attached to them but i do want it to behave like the 3 and 4 test images www.dhaydendesign.com/portfolio-test Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 On 11/29/2020 at 1:36 AM, danielhaydenh said: @tuanphan i'm having a similar issue if you can shed some light i would be very grateful I have edited the code to add a background colour to images with links attached to them but i do want it to behave like the 3 and 4 test images www.dhaydendesign.com/portfolio-test The url doesn't exist Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sharine Posted January 9, 2021 Share Posted January 9, 2021 On 11/28/2020 at 1:28 PM, danielhaydenh said: @jpeter ive used this code and it works great but when the image has a link attached to it it removed the colour overlay. do you know of how to adjust this? I’m having this problem as well. Has it been resolved yet? Link to comment
tuanphan Posted January 9, 2021 Share Posted January 9, 2021 2 hours ago, sharine said: I’m having this problem as well. Has it been resolved yet? Try this guide. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
superamerickson Posted November 28, 2022 Share Posted November 28, 2022 On 6/19/2020 at 3:35 AM, 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: z8f5SMZ9Is.mp4 1.49 MB · 60 downloads Might be a dumb question (as I'm so new to this)...but, I put in your code and it worked brilliantly...but once I assigned a link to my image, the image no longer darkens on rollover. How do I get it to both darken and link? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment