Adding a button to a gallery lightbox

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

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

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

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>

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