LorenAK

Great, thank you for this, I added the new code to the footer code injection.
I deleted the old lightbox code from the header area of the code injection.
Now no captions are showing. Should I have left the old code there?

https://www.janiceweingrod.com/moments-in-time

Hi again, I noticed that these captions (in lightbox mode) get cut off when viewing on a phone. 

https://www.janiceweingrod.com/moments-in-time

https://www.lannyweingrod.com/fictional-characters

Any way to fix this? Thanks!

checking in, I don't think I resolved this. It's not working, all his captions are on one line. Is it possible to have line breaks in a lightbox caption?

I'm trying to style the captions for a client site. I used code injection to have captions show in lightbox only. I want to have a line break for image description under the title and date. Just found out line breaks aren't supported in captions. Is there a workaround?

This is my caption setup:

<span class="artworktitle">Stellar Stories</span>, 2021<br>
painted photo collage, 36 x 43 inches

So far the line break and span aren't working.

This is the code injection:

<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="tlightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.tlightbox-caption {
    color: black;
    font-weight: normal;
    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'] .tlightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .tlightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
</style>

Thanks for any help!

oops sorry about that, she asked me to change it. Now it is: rubies

Here is a screenshot.

Thank you!! That worked!!

1 hour ago, Lesum said:

@LorenAK Can you please share your site URL so I can take a look? Thanks! 

Oops! Here it is: https://www.janiceweingrod.com 

pw: ewn2im8RXa67t3K

I'm working on a client site. I have code injection to have captions appear in lightbox mode, but they are overlapping in transition and it looks messy. How can I fix this? Thanks!!

 https://www.janiceweingrod.com 

site password: ewn2im8RXa67t3K

Hi, 

Building this site for a client. I had this page as a masonry layout and have code to make it 1 column on the phone. But I changed to the gallery grid layout Would it be the same code except using .gallery-grid-wrapper or different code?

The site is password protected: ewn2im8RXa67t3K

Thanks!

never mind, just chatted with squarespace and found out my client would have to upgrade her plan to have code injection work. This is why I usually build sites in WordPress...

I'm building a site for a client (on their own Squarespace account). I added some CSS and code injection to get image captions to show in the lightbox instead of on the gallery layout, etc. It was working well, but now none of my code or CSS seems to work.

We did just hook her site up to a new domain name. Could that break the code? I wouldn't think so.

Hard to show this because she wants her site set to private. Anyone else have a similar issue with their custom code? Thanks!

Site URL: http://www.kathleenhenderson.com/news

I'm updating content on a client's Squarespace site. The site is 5+ years old and uses the Native template. I want to change the blog page (news) to a grid format but there's no option to do this in Native. Is there custom code I can use? Or another solution?

Thanks!