Jump to content

Lightbox captions only?

Recommended Posts

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

529969622_NEWNAVIGATIONLayout_markedup.png.8544f655adde09259f542e4b2bdbb3c8.png

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

529969622_NEWNAVIGATIONLayout_markedup.png.8544f655adde09259f542e4b2bdbb3c8.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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:1323225853_Screenshot2020-12-17at09_34_40.png.2903b623e35df5de4e0c2ee838d58175.png

 

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

KatzQuote.png.fa49e138e3dc03878f720ef533580567.png

 

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

Link to comment

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>

 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.