Lightbox captions only?

@Asher2020

@tuanphan

Thanks for sharing code and helping out on this topic - this is also something I am trying to achieve!

Site: https://ferret-goose-4blj.squarespace.com/

PW: TrialSite

I am trying to also have captions on my gallery images JUST on light box. I'd like the caption to always meet the bottom of the photo (see example), be right aligned, and I am also wondering if there is a way to get a caption on two lines, the quote italic & the top line bold (again, see example)

I used the code above but it did nothing for me. Perhaps some other code or CSS I am using is getting in the way? Any advice or solutions would be fantastic!

Thank you.

17 hours ago, denisebmitchell said:

@Asher2020

@tuanphan

Thanks for sharing code and helping out on this topic - this is also something I am trying to achieve!

Site: https://ferret-goose-4blj.squarespace.com/

PW: TrialSite

I am trying to also have captions on my gallery images JUST on light box. I'd like the caption to always meet the bottom of the photo (see example), be right aligned, and I am also wondering if there is a way to get a caption on two lines, the quote italic & the top line bold (again, see example)

I used the code above but it did nothing for me. Perhaps some other code or CSS I am using is getting in the way? Any advice or solutions would be fantastic!

Thank you.

Can you share link to page in screenshot? I don't see it on homepage

@tuanphan it's /who.

If you click "who" on the homepage it will take you to that gallery, and this is one of the photos expanded.

Does that help?

@tuanphan where you able to see this photo on the 'who' page at all?

I have injected code into the site header and then used CSS to ensure that the captions ONLY display when on lightbox. 

Now I need to focus on styling the captions so I can include a line break, bold text and italic text. 

This is what I have been able to create:

This is what I would like it to look like: (not black & white!)

So the main styling I want to achieve is:

1. Having the caption meet the bottom of the photo, each photo is a different size and ratio

2. The caption is right aligned

3. Their is a line break between the person's name & their quote

4. The top line is bold and the bottom line is italic

Do you think this is achievable?

Thanks!

Denise

Yes. Possible.

I remember I used to code each client, to let the lightbox caption allow the use of HTML tags. Trying to find that code again, it's been a long time.

@tuanphan Great! So I've actually got the lightbox captions working through code injection I found in the forum (it was probably from you!)

And now my main focus is styling these captions.

Hey so thank's for the code everyone.
 

We're trying to figure out how to either adjust the image so it's fully visable above the text OR to only allow the text to show.

Any ideas?

https://polygon-coral-y2k5.squarespace.com

PW: earthbound

The code we're using 

<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>
  figcaption.gallery-caption.gallery-caption-grid-simple {
    display: none;
}
.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: .3em
    text-align: left;
}

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

Hello everyone, Hi @tuanphan

I would like to have image captions but on the lightbox view only (below the image) – would someone be kind enough to share how best to achieve this?

URL – 
https://apricots-pufferfish-lzk3.squarespace.com/

PW –
Passw0rd!

Thanks in advance.
Mike

On 12/21/2020 at 11:29 PM, MDouglas said:

Hello everyone, Hi @tuanphan

I would like to have image captions but on the lightbox view only (below the image) – would someone be kind enough to share how best to achieve this?

URL – 
https://apricots-pufferfish-lzk3.squarespace.com/

PW –
Passw0rd!

Thanks in advance.
Mike

You can add some caption, then add this to Code Injection Header

<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: 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'] .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>

This is excellent – thanks so much @tuanphan – Merry Christmas!

hello everybody and @tuanphan,

I'm so  glad i found this topic!

I have the same problem like many of you have. I don't want my caption to show in the gallery grid but I do want the captions to show under the image when you click on the image and view it in lightbox mode. 

a second thing I've been struggling with is to make the text appear in lines beneath each other. 

for example this is what I write in the description of the image :

JACQUES CHOCOLADE
AGENCY SUMMER
PRODUCTION DIPLOMAT

but this is how it appears as caption
JACQUES CHOCOLADE AGENCY SUMMER PRODUCTION DIPLOMAT

I've tried adding the code provided by tuanphan but it doesn't do anything. I must say that adding code is totally new to me so i have no idea what to do to make it work.

could somebody please help me ? :)

this is the page:
https://bat-apple-45hg.squarespace.com/config/pages

email adres ; lichtwaas@gmail.com

password ; Tessie11

thank very much 

Arno

17 hours ago, lichtwaas said:

hello everybody and @tuanphan,

 

I'm so  glad i found this topic!

I have the same problem like many of you have. I don't want my caption to show in the gallery grid but I do want the captions to show under the image when you click on the image and view it in lightbox mode. 

a second thing I've been struggling with is to make the text appear in lines beneath each other. 

for example this is what I write in the description of the image :

JACQUES CHOCOLADE
AGENCY SUMMER
PRODUCTION DIPLOMAT

but this is how it appears as caption
JACQUES CHOCOLADE AGENCY SUMMER PRODUCTION DIPLOMAT

I've tried adding the code provided by tuanphan but it doesn't do anything. I must say that adding code is totally new to me so i have no idea what to do to make it work.

could somebody please help me ? :)

this is the page:
https://bat-apple-45hg.squarespace.com/config/pages

email adres ; lichtwaas@gmail.com

password ; Tessie11

thank very much 

Arno

Notes: Don't share login info here.

First, you need to edit Gallery > Enable Caption

Next, add some captions

Then, insert into Code Injection Header

<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: 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'] .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>

Hi @tuanphan I'm having the same issue with gallery captions but the code that you posted above isn't working for me, could you possibly help?

I want image captions to show within the lightbox only if this is possible?

I'm using 7.1: 
https://cuboid-decagon-n8zl.squarespace.com/lifestyle
PW: PAnmF34S

Thanks so much!

On 1/20/2021 at 9:25 PM, GBD said:

Hi @tuanphan I'm having the same issue with gallery captions but the code that you posted above isn't working for me, could you possibly help?

I want image captions to show within the lightbox only if this is possible?

I'm using 7.1: 
https://cuboid-decagon-n8zl.squarespace.com/lifestyle
PW: PAnmF34S

Thanks so much!

Can you enable lightbox?

Hey @tuanphan I'm having the same problem as @GBD . I want the captions to show within the lightbox only, but the code is not working for me. Thanks for your help!

The location is in "the works" section of the website under "roots".

https://keyboard-bird-sjkh.squarespace.com/

PW: testsite

On 1/23/2021 at 7:30 AM, tuanphan said:

Can you enable lightbox?

@tuanphan so lightbox is enabled.
As a work around I've used the following code - this removes captions from underneath the images but instead shows them when you hover over the image.
This does however disable the light box feature.
This isn't an ideal fix but it's tidier aesthetically.



/* Remove gallery captions */ 
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-masonry-item {
position: relative;
}
.gallery-masonry-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-masonry {
transition-delay: 0ms;
}
 

Switch out the last three .gallery-xxxxxx for whichever gallery style you're using.

On 8/28/2020 at 12:15 AM, RayR said:

Circling back 🙂 If anyone has a solution for adding the description below the full screen video lightbox that would be so incredible!

Many thanks

Ray

 

I am also searching for a solution to get captions displayed on an embedded video gallery Lightbox (captions only show on images at the moment). Is there a solution for this?

I'm using 7.1 with a hack for video galleries.. it all works fine but I can only get captions to display in the lightbox view when uploading an image (not when its an embedded Vimeo link).. as a film production company our galleries are all videos but without the captions we are losing valuable info such as who directed the film etc. We would like this to only appear when you click through to the lightbox view, as it is too much text to appear underneath the thumbnail in the gallery view.

Just now, paulthomas said:

I am also searching for a solution to get captions displayed on an embedded video gallery Lightbox (captions only show on images at the moment). Is there a solution for this?

I'm using 7.1 with a hack for video galleries.. it all works fine but I can only get captions to display in the lightbox view when uploading an image (not when its an embedded Vimeo link).. as a film production company our galleries are all videos but without the captions we are losing valuable info such as who directed the film etc. We would like this to only appear when you click through to the lightbox view, as it is too much text to appear underneath the thumbnail in the gallery view.

Could you share your site url?

Hi everyone, I'm having trouble enabling captions in lightbox (as well as hiding them in gallery mode). I've used the codes listed in this forum and followed all directions (ie. enabling captions and lightbox), but it doesn't seem to be doing anything for some reason. I also tried using @GBD's code as a work around, but that didn't work either. Let me know if there's anymore info ya'll need. Thanks, any help with this would be very much appreciated. 🙂

The area I'm working on is in "the works" section of the website under "roots".

https://keyboard-bird-sjkh.squarespace.com/

PW: testsite

On 2/1/2021 at 6:11 AM, campbellstudios said:

Hi everyone, I'm having trouble enabling captions in lightbox (as well as hiding them in gallery mode). I've used the codes listed in this forum and followed all directions (ie. enabling captions and lightbox), but it doesn't seem to be doing anything for some reason. I also tried using @GBD's code as a work around, but that didn't work either. Let me know if there's anymore info ya'll need. Thanks, any help with this would be very much appreciated. 🙂

The area I'm working on is in "the works" section of the website under "roots".

https://keyboard-bird-sjkh.squarespace.com/

PW: testsite

Where is gallery?

It's the "rooted series" gallery in the "the works" section of the website. Also trying to do with all the other "series" galleries.

Hi! 

I was trying to do the same thing and the code within this thread worked great for me.

Now i'm just trying to stylize the font on the captions.

(Specifically the font 'Gill Sans Nova').

Any input? I played around within the code but can't get it to work...

8 hours ago, SDavid said:

Hi! 

I was trying to do the same thing and the code within this thread worked great for me.

Now i'm just trying to stylize the font on the captions.

(Specifically the font 'Gill Sans Nova').

Any input? I played around within the code but can't get it to work...

Can you share link to page where you use gallery? WE can help easier

Hello! I Frankensteined a couple of these solutions together to get the design that I want, but I'm stumped on how to make the photo caption have line breaks. I've tried <span> and <br/> but it still shows up as one line.

Any advice out there?

Thanks!

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