Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Lightbox captions only?


Recommended Posts

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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 weeks later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment

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!

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
Posted (edited)
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?

Edited by diegofjorquera
Mistake
Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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>

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Edited by RicardoRMS
Forgot something
Link to comment
  • 2 weeks later...
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

Link to comment

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

 

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