Lightbox captions only?

On 3/20/2021 at 1:40 AM, hannahrulz said:

hi @tuanphan I was wondering if you might be able to help me with a gallery caption solution as well. I really want the captions only to show up under the images while in lightbox, but right now with captions turned on they only show in the gallery and not in the lightbox.  Any help or advice appreciated!

The gallery Im working on is "paintings" and i was planning on making other galleries in the same way for other work: hannahabelow.com

pw: helpplease

Hi,

This will require JavaScript, need a Business Plan or higher. Which plan do/will you use?

@tuanphan thanks for sticking with this thread!

I also have a 7.1 gallery and want captions showing only in lightbox mode.

The code you shared Jan 15 is not working for me either.

https://kabirbedi.squarespace.com/, home page. You'll see a "Sample Description" on the first image.

On 4/5/2021 at 10:12 PM, KristenRuthSmith said:

@tuanphan thanks for sticking with this thread!

I also have a 7.1 gallery and want captions showing only in lightbox mode.

The code you shared Jan 15 is not working for me either.

https://kabirbedi.squarespace.com/, home page. You'll see a "Sample Description" on the first image.

 

Try adding new code. If it doesnt' work, keep the code & let me know. I can check easier

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

Hey!

Anyone know how to make the lightbox captions have two lines of text? <span> and <br/> don't work.

Thanks!

@ashleyster

Please post the URL for a page on your site with the lightbox captions.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

site: https://www.charlielasansky.com/90s-drawings

Hi there - I have successfully used this code injection to add captions to the lightbox only.  Thank you!

I wanted to make 2 changes and I am unable to figure out how to do it, any help would be much appreciated @tuanphan and @creedon

1) I was hoping to make the captions display automatically in the lightbox, not just on :hover, but so they load with the image and there is no need to :hover
2) Is it possible to make the captions sit directly under the image, or be relative to the image? On mobile, the captions are at the bottom of the screen.

Here is the code I am using:

<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: #656565;
    margin: 10px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -45px;
    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>

Again - thank you for any help!

Amadeo

On 5/5/2021 at 10:10 PM, Amadeo75 said:

site: https://www.charlielasansky.com/90s-drawings

Hi there - I have successfully used this code injection to add captions to the lightbox only.  Thank you!

I wanted to make 2 changes and I am unable to figure out how to do it, any help would be much appreciated @tuanphan and @creedon

1) I was hoping to make the captions display automatically in the lightbox, not just on :hover, but so they load with the image and there is no need to :hover
2) Is it possible to make the captions sit directly under the image, or be relative to the image? On mobile, the captions are at the bottom of the screen.

Here is the code I am using:

<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: #656565;
    margin: 10px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -45px;
    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>

Again - thank you for any help!

Amadeo

Q1. Remove style code & add new style code

<style>
.tlightbox-caption {
    color: #656565;
    margin: 10px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -45px;
    z-index: 9999;
}
.gallery-lightbox-wrapper {
	cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .tlightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
</style>

Q2. Edit bottom: -45px value

@tuanphan

Thank you for the style code to load the caption automatically on lightbox, instead of on hover. Works great!

As far as moving the caption closer to the image or making it relative to the image, editing the bottom value doesn't work on mobile because when you move it up on mobile, the caption moves into the image on desktop. Is it possible to make the caption relative to the image, only on mobile? Any thoughts?

Thanks again for the styling code! Much appreciated.

Amadeo

On 5/10/2021 at 2:43 AM, Amadeo75 said:

@tuanphan

Thank you for the style code to load the caption automatically on lightbox, instead of on hover. Works great!

As far as moving the caption closer to the image or making it relative to the image, editing the bottom value doesn't work on mobile because when you move it up on mobile, the caption moves into the image on desktop. Is it possible to make the caption relative to the image, only on mobile? Any thoughts?

 

Thanks again for the styling code! Much appreciated.

 

Amadeo

Sorry for the delay. Have you solved it yet?

On 5/15/2021 at 9:20 PM, tuanphan said:

Sorry for the delay. Have you solved it yet?

@tuanphan No worries! I have not solved making the captions positioned relative to the media area, especially on mobile.

Thanks for checking in - Amadeo

Hi! It's very cool that this thread is still active after such a long time!

I'm trying to display captions only when opening photos of a gallery in lightbox and hiding them from the general gallery view, but for some reason the codes above aren't working for me...

My website is https://www.jorqueraphoto.com and it's SS 7.1. The gallery I want to work on is the one in /automotive.

Thanks a lot in advance if anyone can help!

On 5/18/2021 at 12:39 AM, diegofjorquera said:

Hi! It's very cool that this thread is still active after such a long time!

I'm trying to display captions only when opening photos of a gallery in lightbox and hiding them from the general gallery view, but for some reason the codes above aren't working for me...

My website is https://www.jorqueraphoto.com and it's SS 7.1. The gallery I want to work on is the one in /automotive.

Thanks a lot in advance if anyone can help!

First, edit Gallery Images >> Add description

next, add this code 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>

On 5/20/2021 at 11:51 AM, tuanphan said:

First, edit Gallery Images >> Add description

next, add this code 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>

 

Thanks a lot for this! It works like a charm now 🙂 Is there an easy way to change the font used for the caption?

On 5/31/2021 at 2:43 AM, diegofjorquera said:

Thanks a lot for this! It works like a charm now 🙂 Is there an easy way to change the font used for the caption?

adjust this code

.lightbox-caption {
    color: white;
    font-weight: bold;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -65px;
    z-index: 9999;
}

I've tried all code posted here they all add captions to my Lightbox but you can still see the captions in my masonry grid. How do I remove the captions from that grid? I've left the code in the footer and changed the color to grey. My website url is: https://ricardomusicstudio.com/filmography 

7 minutes ago, RicardoRMS said:

I've tried all code posted here they all add captions to my Lightbox but you can still see the captions in my masonry grid. How do I remove the captions from that grid? I've left the code in the footer and changed the color to grey. My website url is: https://ricardomusicstudio.com/filmography 

Add to Design > Custom CSS

/* Filmography caption */
body#collection-5e388895b9b4566c6962ec61 figcaption.gallery-caption.gallery-caption-grid-masonry {
    display: none;
}

On 6/5/2021 at 4:45 PM, tuanphan said:

Add to Design > Custom CSS

/* Filmography caption */
body#collection-5e388895b9b4566c6962ec61 figcaption.gallery-caption.gallery-caption-grid-masonry {
    display: none;
}

 

Hey the code in the footer from before broke my social links on my website except for tiktok, is there another version of the code that I could try? 

Kindly, 

Ricardo.

On 6/5/2021 at 4:45 PM, tuanphan said:

Add to Design > Custom CSS

/* Filmography caption */
body#collection-5e388895b9b4566c6962ec61 figcaption.gallery-caption.gallery-caption-grid-masonry {
    display: none;
}

 

On 6/7/2021 at 8:26 AM, RicardoRMS said:

Hey the code in the footer from before broke my social links on my website except for tiktok, is there another version of the code that I could try? 

Kindly, 

Ricardo.

 

Which footer code? And where is social links?

Now my social links are fine but I can't scroll my pages. 

This Code: 

<style>
.lightbox-caption {
    color: grey;
    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>

@tuanphan Still kindly waiting on a solution - this code and other ones affect the function of my website and I need to know if its fixable. 

Kindest regards. 

7 hours ago, RicardoRMS said:

@tuanphan Still kindly waiting on a solution - this code and other ones affect the function of my website and I need to know if its fixable. 

 

Kindest regards. 

In Code Injection or Page Header, remove this code

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: 'Raleway';
    overflow: hidden;
}

Fixed - you are a miracle worker! 😗 You probably don't get enough gratitude for the amazing work you do but thank you so much. 

@tuanphan last question I promise! On mobile the formatting of the captions is weird its a bit too low how do I adjust it just for mobile ? And now that I ran google page speed insites - how do I get the whole Lightbox to load at the same time. Apparently it loads each photo individually totally 34.3 seconds on mobile which is awful. 

Kindest regards.

On 5/8/2021 at 9:10 PM, tuanphan said:

Q1. Remove style code & add new style code

<style>
.tlightbox-caption {
    color: #656565;
    margin: 10px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -45px;
    z-index: 9999;
}
.gallery-lightbox-wrapper {
	cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .tlightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
</style>

Q2. Edit bottom: -45px value

@tuanphan My captions on lightbox only no longer display. Can you take a look at the code and let me know if there is a fix?

https://www.charlielasansky.com/90s-drawings

here is the code I am using:

<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: #656565;
    margin: 10px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -45px;
    z-index: 9999;
}
.gallery-lightbox-wrapper {
	cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .tlightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
</style>

Any help would be greatly appreciated. 

Thanks!

Amadeo

@creedon

Thank you for your reply! My temporary site is pike-pear-tr22.squarespace.com/collage and the password is helpplease

I'm still looking for a way to make lightbox captions into multiple lines if you have any ideas. Super grateful for any help! I've figured out how to make it transparent and show on hover, but I'd love at least two lines in the caption.

Thanks again!