Add Caption to image in masonry grid Squarespace 7.1

Site URL: https://www.jfkjets.com/airport-movements

Hi, i'd like to have the ability to enable captions when someone opens a lightbox.

The page URL is: https://www.jfkjets.com/airport-movements, and I have included an example of one of the images that has a description but the caption won't show up.

Thank you!

10 hours ago, TanveerSaini said:

Site URL: https://www.jfkjets.com/airport-movements

Hi, i'd like to have the ability to enable captions when someone opens a lightbox.

The page URL is: https://www.jfkjets.com/airport-movements, and I have included an example of one of the images that has a description but the caption won't show up.

Thank you!

You can extract the alt tag of the image to lighbox by doing this

1. Add this snippet into Settings->Advanced->Code Injection->Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.gallery-lightbox-item-img').each(function(){
    var alt = $(this).find('img').attr('alt');
    $(this).append('<div class="lightbox-caption">' + alt + '</div>');
    });
});
</script>

2. Add this to Design->Custom CSS

.lightbox-caption {
    display: block;
    z-index: 9999;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

12 hours ago, bangank36 said:

You can extract the alt tag of the image to lighbox by doing this

1. Add this snippet into Settings->Advanced->Code Injection->Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.gallery-lightbox-item-img').each(function(){
    var alt = $(this).find('img').attr('alt');
    $(this).append('<div class="lightbox-caption">' + alt + '</div>');
    });
});
</script>

2. Add this to Design->Custom CSS

.lightbox-caption {
    display: block;
    z-index: 9999;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

Hii, thank you, it works really well!! Just one concern, all of the other images have their image titles in them as well (if there's no caption it will show the file name), can we disable that?

Thank you!!!

9 hours ago, TanveerSaini said:

Hii, thank you, it works really well!! Just one concern, all of the other images have their image titles in them as well (if there's no caption it will show the file name), can we disable that?

Thank you!!!

It would be tricky since squarespace takes the image name as alt by default, on other images with proper alt text, is there anything in common? such as the same prefix: Edited by: ??

15 hours ago, bangank36 said:

It would be tricky since squarespace takes the image name as alt by default, on other images with proper alt text, is there anything in common? such as the same prefix: Edited by: ??

It would be preferred if it stayed empty but I should be able to handle it. Thank you so much for the answer!