Image descriptions in Lightbox view only?

Hi all.

I have a Gallery section, (in 7.1) set to Masonry layout, with Lightboxing activated. I would like to have the images' individual descriptions/captions HIDDEN at the top level (so the masonry grid stays clean), but VISIBLE in full when someone clicks on an image to expand it into the lightbox format. I know it's not natively possible, but is there a way to do it with a code snippet perhaps?

There is so much I need to say about each image, but not at the top, section level. The first impact has to be one of clean lines and no clutter. The second level, is drilling down to the descriptions. The logical way to do that is by creating a lightbox state that also shows the image's description.

Any help or advice greatly appreciate. Happy to venmo some cash to someone who could help me add the right code.

Cheers

Can you share link to page where you use images?

Also, do you use Personal Plan or Business Plan?

Did you figure out the code to inject for this? I want to do the exact same thing, but I can't find the code for it. Thanks!

On 12/3/2020 at 2:23 AM, artistpainter13 said:

Did you figure out the code to inject for this? I want to do the exact same thing, but I can't find the code for it. Thanks!

If you share site url, we can check easier

I have the same question. Galleries require an image name (or description) but it is very messy looking at the top gallery masonry grid layout. Wells does this in version 7.0.  Does anybody have a work around for adding the description below the image in Lightbox? 

23 hours ago, dianedhemingway said:

I have the same question. Galleries require an image name (or description) but it is very messy looking at the top gallery masonry grid layout. Wells does this in version 7.0.  Does anybody have a work around for adding the description below the image in Lightbox? 

Can you share link to your site & Which plan do/will you use?

Hello,

Same situation here, I am designing a web for an artist, I have a Grid Masonry gallery per project without captions, and my client wants the lightbox to show the text of the image. Does anyone have any clue how to do this? Many thanks!!

The web is mariajlhierro.squarespace.com and pw is thetest.

Add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/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-simple {
    display: none;
}
  .gallery-lightbox-item[data-active='true'] .light-caption {
    visibility: visible;
}
.light-caption {
    background-color: rgba(0,0,0,0.5);
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
}
figure:hover .light-caption {
    visibility: visible !important;
}

figure.gallery-lightbox-item {
    pointer-events: initial !important;
}
</style>

On 7/14/2022 at 12:59 AM, tuanphan said:

Add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/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-simple {
    display: none;
}
  .gallery-lightbox-item[data-active='true'] .light-caption {
    visibility: visible;
}
.light-caption {
    background-color: rgba(0,0,0,0.5);
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
}
figure:hover .light-caption {
    visibility: visible !important;
}

figure.gallery-lightbox-item {
    pointer-events: initial !important;
}
</style>

 

Thanks a lot for posting this Tuanphan,

unfortunately for me it is not hiding the description in masonry grid view, everything else is working fine though

20 hours ago, calcal said:

Thanks a lot for posting this Tuanphan,

unfortunately for me it is not hiding the description in masonry grid view, everything else is working fine though

The <style> code is for Grid Gallery Only. With masonry, you need to share page url, we can tweak the code

19 hours ago, tuanphan said:

The <style> code is for Grid Gallery Only. With masonry, you need to share page url, we can tweak the code

My apologies I didn't see your response, thank you

I'll need to perform this action on multiple pages, are you able to post the code and I'll input the page ids myself?

Thanks again Tuanphan

4 hours ago, calcal said:

My apologies I didn't see your response, thank you

I'll need to perform this action on multiple pages, are you able to post the code and I'll input the page ids myself?

Thanks again Tuanphan

You need to share link to a page, we can check easier

If you can't share, we need to create a trial site, add masonry code, add code,...take a lot of time.

On 7/23/2022 at 11:27 AM, tuanphan said:

You need to share link to a page, we can check easier

If you can't share, we need to create a trial site, add masonry code, add code,...take a lot of time.

I too would like to have image description only appearing while the Lightboxing is on, but I'm pretty sure the code you shared won't work on my website right? 

Here is my website : rayanevuillemin.squarespace.com

On 7/23/2022 at 7:27 PM, tuanphan said:

You need to share link to a page, we can check easier

If you can't share, we need to create a trial site, add masonry code, add code,...take a lot of time.

Hi tuanphan, I'm still having trouble working this one out, here are the page links to better help (password pump):

https://www.cals.art/prints

https://www.cals.art/painting

Thanks tuanphan and sorry for the very slow response

On 8/22/2022 at 7:02 PM, calcal said:

Hi tuanphan, I'm still having trouble working this one out, here are the page links to better help (password pump):

https://www.cals.art/prints

https://www.cals.art/painting

Thanks tuanphan and sorry for the very slow response

Can you enable Gallery Caption & add some description? We can help easier

On 7/22/2022 at 5:07 AM, tuanphan said:

The <style> code is for Grid Gallery Only. With masonry, you need to share page url, we can tweak the code

Hi, I am having trouble with this too. I need this added to my entire portfolio (multiple pages, separated by category).

www.rimophoto.com is my site.

On 9/24/2020 at 2:02 PM, broadlawner said:

Hi all.

I have a Gallery section, (in 7.1) set to Masonry layout, with Lightboxing activated. I would like to have the images' individual descriptions/captions HIDDEN at the top level (so the masonry grid stays clean), but VISIBLE in full when someone clicks on an image to expand it into the lightbox format. I know it's not natively possible, but is there a way to do it with a code snippet perhaps?

There is so much I need to say about each image, but not at the top, section level. The first impact has to be one of clean lines and no clutter. The second level, is drilling down to the descriptions. The logical way to do that is by creating a lightbox state that also shows the image's description.

Any help or advice greatly appreciate. Happy to venmo some cash to someone who could help me add the right code.

Cheers

Where you ever able to get this figured out with the help of this forum? 

On 1/4/2023 at 10:27 PM, Mollyrimophoto said:

Hi, I am having trouble with this too. I need this added to my entire portfolio (multiple pages, separated by category).

 

www.rimophoto.com is my site.

Can you enable Gallery Caption + Add some demo caption? We can test code easier

https://www.rimophoto.com/hospitality-retail

On 1/7/2023 at 9:15 AM, tuanphan said:

Can you enable Gallery Caption + Add some demo caption? We can test code easier

https://www.rimophoto.com/hospitality-retail

OK, I have done so. Thanks!

On 1/7/2023 at 9:15 AM, tuanphan said:

Can you enable Gallery Caption + Add some demo caption? We can test code easier

https://www.rimophoto.com/hospitality-retail

Hi! I have done so, thanks! https://www.rimophoto.com/hospitality-retail

On 1/13/2023 at 9:12 PM, Mollyrimophoto said:

Hi! I have done so, thanks! https://www.rimophoto.com/hospitality-retail

The feature is supported natively in my plugin Lightbox Studio, you can turn it on to achieve this, kindly use this URL to check plugin in action on your site