Lightbox captions only?

Site URL: https://www.oxbowphoto.com/new-page

Hi, I would like to show image captions only when I click an image and view it in the Lightbox. Right now, if I enable captions in the gallery settings it only shows descriptions below the image in gallery/grid view which isn't ideal. Does anyone know how to fix this with CSS? Any help is greatly appreciated. 

Above link doesn't exist. Can you check url again?

Hi, sorry about that. Here it is: https://www.oxbowphoto.com/oliviagallery

On 6/14/2020 at 8:03 AM, mbike999 said:

Site URL: https://www.oxbowphoto.com/new-page

Hi, I would like to show image captions only when I click an image and view it in the Lightbox. Right now, if I enable captions in the gallery settings it only shows descriptions below the image in gallery/grid view which isn't ideal. Does anyone know how to fix this with CSS? Any help is greatly appreciated. 

I assumed you are mentioning to the caption on these gallery images?

https://www.oxbowphoto.com/bobbygallery

Hi again, just checking if anyone has any ideas of how to go about doing this. Thanks for the help. 

On 6/18/2020 at 11:21 AM, mbike999 said:

Hi again, just checking if anyone has any ideas of how to go about doing this. Thanks for the help. 

Enable Caption first, then add this to Home > Settings > Advanced > Code Injection > Header

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

Code from another member on Forum.

Hello,

I tried the code but didn't work for me... 😕

If using 7.0 then its simple. Enable the caption under the image, type it in then save. Make sure your text shows up in lightbox, I use the dark background. Then go back edit the image and change to don't show the caption, but don't erase the text, save again. The text will now show only when the image is in  the lightbox . I don't know if this works the same for 7.1 but worth a try. 

@derricksrandomviews I'm using 7.1 version, would it work the same?

Don't know but certainly can't hurt to give it a try. 

. 

@derricksrandomviews it worked! But not with the 7.1 gallery mode, just when you add images manually. Btw the lightbox appear with the image and the caption, is it possible to just show the text?

1 hour ago, elizamoraes said:

@derricksrandomviews it worked! But not with the 7.1 gallery mode, just when you add images manually. Btw the lightbox appear with the image and the caption, is it possible to just show the text?

You can disable image with code. Can you share link to gallery?

On 6/21/2020 at 5:54 AM, tuanphan said:

Enable Caption first, then add this to Home > Settings > Advanced > Code Injection > Header

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

Code from another member on Forum.

Thank you so much, this worked for me!

Website: https://wisteria-panda-z2eg.squarespace.com/services
pw: rotorrotor

Dear @tuanphan,

Thank you, this is marvelous.

You mentioned that below code was written by a member of the forum:

<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));
		}
	}
});

I understand, that this code takes the plain text out of the description of a grid item, labels it as p  .style-gallery-lightbox-text and and then displays it in the lightbox. Excellent!

To complicate things further, I labeled text as <h3> and <h4> in my grid items description field:

<h3>This title should be visible as grid caption and in lightbox</h3><h4>This text should only be visible in lightbox</h4>

Which shows up correctly in gallery grid like this:

However, the jquery code does not forward the h3 and h4 classes, so they don't actually display in the lightbox.
Could the somehow be adjusted in order to forward basic html elements, or in my case, the classes h3 and h4? In know this is a lot to ask for.

Thanks in advance for your help and insight! You will find website link and pw at the top of my post. Let me know if there is anything else I should clarify.

All the Best!
Gregor

13 hours ago, Tonmeister said:

Website: https://wisteria-panda-z2eg.squarespace.com/services
pw: rotorrotor

 

Dear @tuanphan,

Thank you, this is marvelous.

You mentioned that below code was written by a member of the forum:

<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));
		}
	}
});

I understand, that this code takes the plain text out of the description of a grid item, labels it as p  .style-gallery-lightbox-text and and then displays it in the lightbox. Excellent!

To complicate things further, I labeled text as <h3> and <h4> in my grid items description field:

<h3>This title should be visible as grid caption and in lightbox</h3><h4>This text should only be visible in lightbox</h4>

Which shows up correctly in gallery grid like this:

 

However, the jquery code does not forward the h3 and h4 classes, so they don't actually display in the lightbox.
Could the somehow be adjusted in order to forward basic html elements, or in my case, the classes h3 and h4? In know this is a lot to ask for.

Thanks in advance for your help and insight! You will find website link and pw at the top of my post. Let me know if there is anything else I should clarify.

All the Best!
Gregor

Can you share link to gallery? We can check easier.

Hi there @tuanphan,

Website: https://wisteria-panda-z2eg.squarespace.com/services
pw: rotorrotor

This is the link to the gallery! It looks a bit messy right now, but the first gallery item is what i am testing with:

Im trying to get both of these texts to display inside lightbox. Any ideas?

Thank you!

Gregor

@tuanphan,

Perhaps you remember who wrote the original jquery (above)?

Thx + All the best!

Gregor

@tuanphan

Joining this thread as well. I see you've been so helpful to everyone on these forums. 🙏

I have a question along the same lines. I have been trying to code myself with little success.

Firstly, I am hoping to add descriptions to the lightbox similar to what you all did above. However all of my items are videos in a grid.  Is it possible to add a single line of the description below the video in lightbox mode?

And I had one other question - is it possible to place all of the Item Captions as White Text with a black box on top of the gallery image? Like this? Ideally the black box always would be in the same position but would be responsive size to the length of white caption text

Thank you so much for your time and consideration!

20 hours ago, RayR said:

@tuanphan

Joining this thread as well. I see you've been so helpful to everyone on these forums. 🙏

I have a question along the same lines. I have been trying to code myself with little success.

Firstly, I am hoping to add descriptions to the lightbox similar to what you all did above. However all of my items are videos in a grid.  Is it possible to add a single line of the description below the video in lightbox mode?

SITE LINK: https://www.tahomafilms.com/portfolio-1 PW: tahoma

 

And I had one other question - is it possible to place all of the Item Captions as White Text with a black box on top of the gallery image? Like this? Ideally the black box always would be in the same position but would be responsive size to the length of white caption text

 

Thank you so much for your time and consideration!

password incorrect

On 8/22/2020 at 7:32 AM, tuanphan said:

password incorrect

@tuanphan

Oops. Sorry about that!

PW: tahomaf

I've found a css code that works for the caption overlay! - my only remaining question is whether it is possible to add the description to the lightbox of each video. Perhaps the video lightbox would need to not fill screen?

Thank you!

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

On 8/27/2020 at 7:15 PM, 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

 

Hey, Ray!

How did you create video Lightboxes??? I've been trying to do this since I left Wix and came over to Squarespace.

16 hours ago, BoPolo786 said:

Hey, Ray!

How did you create video Lightboxes??? I've been trying to do this since I left Wix and came over to Squarespace.

To create video lightbox, you can also use this tool.

On 8/28/2020 at 6: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

 

Sorry. I'm overloading. Do you still need help on this?

Hi @tuanphan 

This worked perfectly for me being someone with no experience in CSS or anything much...

Does anyone know what I would have to change to make the description text centered (under the image) and the font slightly larger?

I have played around with what things that said font in this code but it didn't have much effect. 

Thanks in advance anyone that can help.

@Asher2020

Please post the URL to the page where you want this effect to occur.

We can then take a look at your issue.