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>