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

Recommended Posts

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. 

Link to post
  • Replies 22
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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"></s

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

Posted Images

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

LASTEST SS ENHANCEMENTS:

Product Delivery Date Time Picker - Support disabled dates and other advanced features
Check out Customer feedback and Sample Site

Geolocation Automatic Currency Converter - Convert currency based on user location, tailored for your own site stylesheet
Customer feedback here and here

Check out my porfolio

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
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 post
  • 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 post
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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

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

 

 

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

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

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

 

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...