Danozwa Posted September 5, 2021 Posted September 5, 2021 Hi I have a photography website and my main portfolio is a gallery (masonary) type, it already has a lightbox pop up when images are clicked revealing a little bit of info about the picture. Is there a way of adding a button to the lightbox view only so when pressed it can take you to that particular item in the shop? basically a button added to lightbox view only, thanks, Dan Beyondspace 1
tuanphan Posted September 7, 2021 Posted September 7, 2021 On 9/5/2021 at 11:50 AM, Danozwa said: Hi I have a photography website and my main portfolio is a gallery (masonary) type, it already has a lightbox pop up when images are clicked revealing a little bit of info about the picture. Is there a way of adding a button to the lightbox view only so when pressed it can take you to that particular item in the shop? basically a button added to lightbox view only, thanks, Dan Hi, Can you share link to gallery? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
fercoresc Posted April 10 Posted April 10 On 9/7/2021 at 2:25 AM, tuanphan said: Hi, Can you share link to gallery? We can check easier Hi @tuanphan, I would like to add this to by website, as well as a caption under the Lightbox. My website is www.fernandacortina.com/gallery
tuanphan Posted April 13 Posted April 13 On 4/11/2024 at 12:36 AM, fercoresc said: Hi @tuanphan, I would like to add this to by website, as well as a caption under the Lightbox. My website is www.fernandacortina.com/gallery First, edit image caption, from this KOMODO to this KOMODO <a href="https://google.com">View project</a> Next, use this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> jQuery(document).ready(function($){ var texts = document.getElementsByClassName('gallery-caption-content'); $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){ var text = texts[idx] var id = $(ele).attr('data-slide-url') if (text) { $(ele).append('<p id="' + id + '" class="light-caption sqsrte-small">' + text.innerHTML + '</p>'); if ($(ele).attr('data-active')) { $(`#${id}`).css('visibility', 'visible') } } }) $('.gallery-masonry-lightbox-link').click(function() { var id = $(this).attr('href').split('=')[1] $('.light-caption').css('visibility', 'hidden') $(`#${id}`).css('visibility', 'visible') }) $('.gallery-lightbox').click(function() { $('.light-caption').css('visibility', 'hidden') var id = location.search.split('=')[1] $(`#${id}`).css('visibility', 'visible') }) }) </script> <style> figcaption.gallery-caption.gallery-caption-grid-masonry { display: none; } .light-caption { visibility: hidden; position: fixed; font-size: 14px; bottom: 20px; left: 50%; transform: translateX(-50%); margin: 0; } .gallery-lightbox-item[data-active='true'] .light-caption { visibility: visible; } .gallery-lightbox-controls { display: flex !important; } .light-caption a { background-color: #000; color: #fff; padding: 10px 20px; display: inline-block; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Beyondspace Posted May 20 Posted May 20 (edited) On 9/5/2021 at 11:50 AM, Danozwa said: Hi I have a photography website and my main portfolio is a gallery (masonary) type, it already has a lightbox pop up when images are clicked revealing a little bit of info about the picture. Is there a way of adding a button to the lightbox view only so when pressed it can take you to that particular item in the shop? basically a button added to lightbox view only, thanks, Dan May I suggest a streamline approach here... You can insert a buy button on lightbox with Lightbox Studio plugin. it is because the Squarespace lightbox caption supports HTML so you can insert a button there. If you wish to display Lightbox captions only, the plugin supports it too Visit this site for the reference in action here Then the plugin Lightbox Studio can help turn the link in caption into buttons if you want, check the live playground for your site here Fyi: I am author of Lightbox Studio and may benefit if you choose to use it Edited November 25 by Beyondspace BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> No-code customisations for Squarespace
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment