Show Caption in Lightbox 71.

Site URL: https://jonathan-gaber.squarespace.com/work/bricks

I was following this topic from a previous post but it seems my request for help got lost. As so many others, I am looking for a solution to show a caption in lightbox. The code below works but looks awful as it sits oddly on the art work. The other part of this is that I have added code to the caption to control bold and line breaks specific to art. 

If anyone can help I would be grateful and if anyone knows how to request this be added to 7.1 even better. 

Thank you!

------

<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[i].getElementsByTagName('p').length != 0){
            var text = itemGallery[i].getElementsByTagName('p')[0].textContent;
            var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0];
            itemNeedCaption.appendChild(createNodeCaption(text));
        }
    }
});

</script>
<style>

.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: .35em
    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>

It looks like I posted above script code.

Use this new code

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

Tried this code and it works. Thank you! However I wanted to add a hyperlink right after the caption, possibly on the second line, inside the light box. Is that possible? 

So it would appear:
Line 1: Caption of the image
Line 2: Click here to view the actual work

Line 2 is the hyperlink, which only appear in the light box.
I've added this into the image description:
Caption of the image <br><a href="www.google.com">. Click here to view the actual work</a>

Indeed the text appear in the light box, but the hyperlink doesn't work, it just appears as a normal text.

Thank you in advance!

On 3/13/2022 at 11:34 PM, dee88 said:

Tried this code and it works. Thank you! However I wanted to add a hyperlink right after the caption, possibly on the second line, inside the light box. Is that possible? 

So it would appear:
Line 1: Caption of the image
Line 2: Click here to view the actual work

Line 2 is the hyperlink, which only appear in the light box.
I've added this into the image description:
Caption of the image <br><a href="www.google.com">. Click here to view the actual work</a>

Indeed the text appear in the light box, but the hyperlink doesn't work, it just appears as a normal text.

Thank you in advance!

Hi.

Can you share link to gallery page on your site?

9 hours ago, tuanphan said:

Hi.

Can you share link to gallery page on your site?

here you go:
https://blackbird-chameleon-l8t2.squarespace.com/testing-page
pw: portfoliotesting

It is located at the most below, and you can click on Project 5

17 hours ago, dee88 said:

here you go:
https://blackbird-chameleon-l8t2.squarespace.com/testing-page
pw: portfoliotesting

It is located at the most below, and you can click on Project 5

Try this new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/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('<div id="' + id + '" class="light-caption">'  + text.innerHTML + '</div>');
            
            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>
.light-caption {
    visibility: hidden;
}
figcaption.gallery-caption.gallery-caption-grid-masonry {
    display: none;
}
  .gallery-lightbox-item[data-active='true'] .light-caption {
    visibility: visible;
}
</style>

Hi Tuan, Thanks for the fast response.
I tried the new code but it doesn't work. The caption is now gone from the gallery section, and only appear inside the lightbox and the link still not clickable 😞

On 3/16/2022 at 3:16 PM, dee88 said:

Hi Tuan, Thanks for the fast response.
I tried the new code but it doesn't work. The caption is now gone from the gallery section, and only appear inside the lightbox and the link still not clickable 😞

Can you keep the code & let me know? I will check it again easier.

If your site is live, you can duplicate gallery, add code to page header & then share link to it.

My site is not live yet, I'm still finishing the portfolio. The url above is a testing page with the gallery I wanted to use for my homepage.
That link, is now already with a new code to the page header.

Have a look at my screenshot below, that is how it looks like.

Is there anything else I need to do, to make it easier for you to check?
 

Many Thanks!

On 3/18/2022 at 8:28 AM, dee88 said:

My site is not live yet, I'm still finishing the portfolio. The url above is a testing page with the gallery I wanted to use for my homepage.
That link, is now already with a new code to the page header.

Have a look at my screenshot below, that is how it looks like.

Is there anything else I need to do, to make it easier for you to check?
 

Many Thanks!

Hi,

Did you remove the code? I checked & dont see the code

7 hours ago, tuanphan said:

Hi,

Did you remove the code? I checked & dont see the code

No, didn't change or remove anything since my last post above.

I've added the code as per screenshot but nothing changed and the hyperlink doesn't work still. Anything I can do, so you could easily check my code?

Thank you

22 hours ago, dee88 said:

No, didn't change or remove anything since my last post above.

I've added the code as per screenshot but nothing changed and the hyperlink doesn't work still. Anything I can do, so you could easily check my code?

Thank you

You can also duplicate your site & add me as an admin there. I will try test some code

1 hour ago, tuanphan said:

You can also duplicate your site & add me as an admin there. I will try test some code

sure, thanks a lot. 
can you give me your email address?

Done.

New code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/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('<div id="' + id + '" class="light-caption">'  + text.innerHTML + '</div>');
            
            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>

  .gallery-lightbox-item[data-active='true'] .light-caption {
    visibility: visible;
}
  .gallery-lightbox-item {
    pointer-events: initial !important;
}
</style>

Howdy people, 1st post here.

@tuanphan looks like you're the community blessing here, thanks for all your help. Your first code works fine for me, but it also gets the filenames when the image description is empty on the galleries, maybe because you're getting the alt text from the lightbox photos, right? (This is the code I'm running now). A reference to your first comment:

On your second and third comments tweaking the original code from the first comment, the javascript somewhat scrambles the descriptions along the slides when I'm navigating through the lightbox (prev/next), which doesn't happen on your first code. Take into consideration that not all my images have descriptions. The styling also needs a correction as the description text now is black with no margin-top from the photo. Let me know if you want me to apply one of the updated codes to see it working.

Check this URL, it's public and I don't care hehe: https://www.leocavallini.com/bts (rememeber it's the first code).

Also, I don't want the descriptions on the masonry grid but I can get rid of it via CSS, I don't mind:

.gallery-caption-grid-masonry { display: none; }

It's currently with display: block; so you can see what photos have descriptions.

Thanks a lot!

Hi there, 

By all means I'm not a coder, but I feel like there is a simple solution to my problem... maybe you can help? 

I've spent the last couple hours copying and pasting different codes from various threads on this site to get captions to appear in my lightbox (rather than captions in the gallery grid). Am I inserting it in the wrong place? After I hit 'save', it always says there's an error in line 1. I've been entering the codes under Design>Custom CSS. 

I would love for the artwork  'captions' to appear right below the image in the lightbox, and have no 'captions' appear in the gallery grid. I have attached screenshots of my problem.

Any help would be greatly appreciated!

Hi Gracie,

I'm not a coder either but I can tell you that the code needs to be moved to SETTINGS, advanced, injected code. That will resolve the issue with the line 1 error and hopefully resolve the caption/lighbox issue as well.

This is the site I used the code on https://www.jonathangaber.com/work/bricks in version 7.1. If you are on 7.0, I'm not sure it would work

I think our code is the same but just to make sure I'm repasting it here:

I hope this resolves it. Please let me know.

Sharon

-----

<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: black;
    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>

Hi Sharon,

WOW, this worked perfectly! Thank you so so much – this is so helpful.

I just checked out your page, and I love how your captions in the grid view are stacked. Do you have a code for that as well!

Again, thank you for much for your response and willingness to help. 

That one is simple, I just added <br> where I wanted the text to break and a soft return  (shift return, not just return)

Title<br>
Medium<br>

I'm so happy this helped. Enjoy the rest of your weekend!

hi!

is it possible to keep the line breaks inside the lightbox, as i have in the gallery grid?

i'm using this code:

<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 {
      font-family: aktiv-grotesk;
      font-size: 1rem;
    font-weight: 400;
      line-height: 1.6em;
      line-break: auto;
    margin: 15px 0;
    text-align: left;
    display: block;
    bottom: 10px;
    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>

site url: https://sawfish-lute-xb5x.squarespace.com/artistas/ana-julia-vilela
password: central202

Hello guys!

I used to have the wonderful code provided by @tuanphan to display the caption on my galleries as a hoover, but since the last update, it is not working anymore and I do not know what to do 😞 . I have switched my homepage to the new "fluid engine" as a temporal solution, but I would still appreciate to have the hoover on all my masonry galleries on my web. 
This is the code I used to use:

<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: grey;
    font-weight: light;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -35px;
    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>
 

-- on a side note, another of my codes broke, the "selected page" used to highlight on a color and now went back to underline. could this be fixed?

Thank you anyone who would help me!!
My website is www.kiyary.com and page with a masonry gallery for example is this one: https://www.kiyary.com/editorial-illustration 
My previous homepage https://www.kiyary.com/home-masonry when the captions used to be on top of the images on a hoover. 

thank you all!! 

9 hours ago, kiyary said:

Hello guys!

I used to have the wonderful code provided by @tuanphan to display the caption on my galleries as a hoover, but since the last update, it is not working anymore and I do not know what to do 😞 . I have switched my homepage to the new "fluid engine" as a temporal solution, but I would still appreciate to have the hoover on all my masonry galleries on my web. 
This is the code I used to use:

<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: grey;
    font-weight: light;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -35px;
    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>
 

-- on a side note, another of my codes broke, the "selected page" used to highlight on a color and now went back to underline. could this be fixed?

Thank you anyone who would help me!!
My website is www.kiyary.com and page with a masonry gallery for example is this one: https://www.kiyary.com/editorial-illustration 
My previous homepage https://www.kiyary.com/home-masonry when the captions used to be on top of the images on a hoover. 

thank you all!! 

I see it still works here, caption appear in lightbox

https://www.kiyary.com/editorial/environment

On 8/21/2022 at 10:21 AM, tuanphan said:

I see it still works here, caption appear in lightbox

https://www.kiyary.com/editorial/environment

Hi!

Oh, my bad, I meant not the Lightbox (that works fine), but the captions on Hover with the mouse. 

On 8/25/2022 at 1:43 AM, kiyary said:

Hi!

Oh, my bad, I meant not the Lightbox (that works fine), but the captions on Hover with the mouse. 

Can you enable Gallery Caption & add some text? Currently It doesn't show anything

I'm using this code to add Lightbox captions to my images, and it seems to work OK, but on mobile view the caption is pushed nearly out of frame, and does not appear under the image in a similar matter as on desktop. I'm using the 7.1 version

My website: https://dove-bumblebee-j2mp.squarespace.com
pw:thomas

Also, this code only works on gallery blocks, can it be applied to single image blocks? I'm very new to code, please be specific in your answer, thanks!

Quote

<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: black;
    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>