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

Lightbox captions only?


Recommended Posts

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

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. 

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Link to comment
  • 1 month later...

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:

1228933595_Screenshot2020-08-19at19_24_54.png.d7845d4747ba03ba595ffa97b8d06664.png

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

Edited by Tonmeister
simplify
Link to comment
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.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

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

 

 

Screen-Shot-2020-08-21-at-10.46.21-AM.jpg

Edited by RayR
Link to comment
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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Edited by RayR
Link to comment
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.

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 months later...

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.

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