Jump to content

Custom captions for lightbox

Recommended Posts

Site URL: https://www.sweetonmaui.com/

Aloha!

I've been reading lots of posts on the editing captions for gallery light boxes, but can't seem to implement the right pieces to get the effect I'm looking for.

My goal is to share photo credits where I need to, but in a subtle way. I thought it would be great to have them appear in the lightbox, so the thumbnail on the gallery page looks clean. I found a piece of code that works to show the caption in the lightbox only, but I don't know enough to then edit it. (see code at the end of the post).

My site is www.sweetonmaui.com.
Click on Gallery > Dessert Gallery to see the example.
First photo of yellow cups - when you click on the lightbox the caption (image description) appears, but not formatted the way I would like.

I'm thinking of a couple of options but not sure yet and hoping to be able to see them on the screen:

 

Option 1

- centered text
- bar same width as photo and align to bottom edge of photo
- smaller font, lower weight font - large enough to read, but small enough to not detract. In other places on my site I've formatted Paragraph 4 to use for photo credits - would be fine to use here too.

 

Option 2

- centered text below photo, in the dark gray color in my palette (no background)
- smaller font, lower weight font - large enough to read, but small enough to not detract. In other places on my site I've formatted Paragraph 4 to use for photo credits - would be fine to use here too.

 

Thanks so much in advance!!!

This is the code I'm using:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
function createNodeCaption(textContent){
    var divElement = document.createElement("div");
    var pElement = document.createElement("p");
    pElement.innerHTML = textContent;
    divElement.classList.add("style-gallery-lightbox-text");
    divElement.appendChild(pElement);
    return divElement;
}
$( document ).ready(function() {
    var itemGallery = document.getElementsByClassName('gallery-grid-item');
    var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item');
    var countGalleryItem = itemGallery.length;

    for(var i = 0; i < countGalleryItem; i++){
        if(itemGallery.getElementsByTagName('p').length != 0){
            var text = itemGallery.getElementsByTagName('p')[0].textContent;
            var itemNeedCaption = itemGalleryLightBox.getElementsByClassName('gallery-lightbox-item-src')[0];
            itemNeedCaption.appendChild(createNodeCaption(text));
        }
    }
});

</script>
<style>
  figcaption.gallery-caption.gallery-caption-grid-simple {
    display: none;
}
.style-gallery-lightbox-text {
    padding: 10px 0px 25px 0px;
    display: block;
    position: absolute;
    left: 50%;
    top: 90%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: .3em
    text-align: center;
}

.style-gallery-lightbox-text p {
    width: 90%;
    padding: 10px 15px;
    margin: auto;
    color: white;
    background-color: rgba(0,0,0,0.5);
}
  @media screen and (max-width:767px) {
.style-gallery-lightbox-text {
    top: 70%;
}
}
</style>

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

The code feels very familiar, it looks like I shared it (I recently wrote new code to handle the lightbox caption)

With option 2, add to Home > Design > Custom CSS

.style-gallery-lightbox-text p {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}

 

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!)

Link to comment
  • 3 weeks later...
  • 1 year later...
  • 4 weeks later...
On 2/25/2022 at 4:28 AM, rwandareseen said:

https://rwandareseen.squarespace.com/bios

I'd like to add descriptive text to the images when they open in light box.   Text could be a sentence long and too busy to add below the thumbnails.

Thx

Add to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="lightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.lightbox-caption {
    color: white;
    font-weight: bold;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -65px;
    z-index: 9999;
}
.gallery-lightbox-wrapper:hover {
	cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
	display: inline-block;
}
  .gallery-lightbox .lightbox-caption {
    display: block !important;
}
</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!)

Link to comment
  • 8 months later...

Hello Tuanphan...tried to use your code on a 7.0 page.


But the Lightbox Caption Block still appears in black 50% and caption text aligned left.
No changes.

 

Not able to find a workaround on lightbox caption design

Would love to have the block below the photo.
No background

And a possibility to change the text and position it in the middle.


Excactly what was asked on the beginning of this thread.

 

THANK YOU

 

 

 

Link to comment
On 11/22/2022 at 12:24 AM, SST said:

Hello Tuanphan...tried to use your code on a 7.0 page.


But the Lightbox Caption Block still appears in black 50% and caption text aligned left.
No changes.

 

Not able to find a workaround on lightbox caption design

Would love to have the block below the photo.
No background

And a possibility to change the text and position it in the middle.


Excactly what was asked on the beginning of this thread.

 

THANK YOU

 

 

 

That code is for 7.1.

What is your site url?

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!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.