Lightbox captions only?

On 6/11/2021 at 12:16 AM, RicardoRMS said:

@tuanphan last question I promise! On mobile the formatting of the captions is weird its a bit too low how do I adjust it just for mobile ? And now that I ran google page speed insites - how do I get the whole Lightbox to load at the same time. Apparently it loads each photo individually totally 34.3 seconds on mobile which is awful. 

Kindest regards.

Sorry, missing your comment. Do you still need help?

On 6/25/2021 at 4:23 AM, Amadeo75 said:

@tuanphan My captions on lightbox only no longer display. Can you take a look at the code and let me know if there is a fix?

https://www.charlielasansky.com/90s-drawings

here is the code I am using:

<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: #656565;
    margin: 10px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -45px;
    z-index: 9999;
}
.gallery-lightbox-wrapper {
	cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .tlightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
</style>

Any help would be greatly appreciated. 

Thanks!

Amadeo

Last week SS updated something make all code doén't work. SS fix this. And I can see caption in your site now. Can you check it again?

On 6/26/2021 at 6:20 AM, ashleyster said:

@creedon

Thank you for your reply! My temporary site is pike-pear-tr22.squarespace.com/collage and the password is helpplease

I'm still looking for a way to make lightbox captions into multiple lines if you have any ideas. Super grateful for any help! I've figured out how to make it transparent and show on hover, but I'd love at least two lines in the caption.

Thanks again!

 

Do you still need help?

@tuanphan yes on mobile the captions are a little too low to properly read. And the photos in the Lightbox all load individually which grinds loading the site to a halt. So yes its still an issue. 

Site and specific page url where the issue occurs: https://ricardomusicstudio.com/filmography

22 minutes ago, RicardoRMS said:

@tuanphan yes on mobile the captions are a little too low to properly read. And the photos in the Lightbox all load individually which grinds loading the site to a halt. So yes its still an issue. 

Site and specific page url where the issue occurs: https://ricardomusicstudio.com/filmography

I think setting caption position to fixed may solve it

@media only screen and (max-width: 640px) {
  .lightbox-caption {
      position: fixed;
      bottom: 0;
  }
}

On 1/15/2021 at 4:47 AM, 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

Was there a solution for this? I have the same problem.

@tuanphan

I am having the same problem. I used the code that you provided and the caption now shows in Lightbox but I had added a bit of code to make the title bold and control line breaks. Is there a way to make that work within the code? Thanks! The website is https://jonathan-gaber.squarespace.com/work/bricks

Thank you!

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

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

This isn't working for me in 7.1. What am I missing? I've injected the code into the footer. michael-pressman.com/coast-of-maine-gallery pw: NewWebsite1!

On 7/7/2021 at 4:38 AM, artpimpress said:

@tuanphan

I am having the same problem. I used the code that you provided and the caption now shows in Lightbox but I had added a bit of code to make the title bold and control line breaks. Is there a way to make that work within the code? Thanks! The website is https://jonathan-gaber.squarespace.com/work/bricks

Thank you!

 

Hi. Do you still need help on this?

8 hours ago, KristenRuthSmith said:

This isn't working for me in 7.1. What am I missing? I've injected the code into the footer. michael-pressman.com/coast-of-maine-gallery pw: NewWebsite1!

Try this code. 

https://forum.squarespace.com/topic/164356-lightbox-captions-only/?do=findComment&comment=457516

8 hours ago, tuanphan said:

Try this code. 

https://forum.squarespace.com/topic/164356-lightbox-captions-only/?do=findComment&comment=457516

@tuanphan I've injected the code into the footer with no effect. You can still see "Test description" on the masonry grid, not in the lightbox (both captions and lightbox are activated in the gallery section). Is there CSS code I need as well?

https://www.michael-pressman.com/coast-of-maine-gallery pw NewWebsite1!

On 4/10/2021 at 11:09 AM, tuanphan said:

Try adding new code. If it doesnt' work, keep the code & let me know. I can check easier

<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="lightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.lightbox-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'] .lightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
	display: inline-block;
}
  .gallery-lightbox .lightbox-caption {
    display: block !important;
}
</style>

 

Thank you very much again @tuanphan this code works perfectly fine on my website.

Moreover, i need to add a CSS right after the caption. I succeed to do so but only without your code 😢

Meaning i cannot show the caption text + my CSS (a red or green small circle) only on lightbox like your code.

Would you be able to update your code in order to let this CSS works ?

#dispo::after{
  content:"●";
  color:green;
  
}

#pasdispo::after{
  content:"●";
  color:red;
  
}

With this code i can write on description field of the image if one painting is available (dispo in french) or not (pasdispo in french) 😎.

Cheeerz !

15 hours ago, KristenRuthSmith said:

@tuanphan I've injected the code into the footer with no effect. You can still see "Test description" on the masonry grid, not in the lightbox (both captions and lightbox are activated in the gallery section). Is there CSS code I need as well?

https://www.michael-pressman.com/coast-of-maine-gallery pw NewWebsite1!

Have you enabled Caption yet? Edit Gallery Section (pencil icon) >> Caption -- Choose: Enable

9 hours ago, trstmnd said:

Thank you very much again @tuanphan this code works perfectly fine on my website.

Moreover, i need to add a CSS right after the caption. I succeed to do so but only without your code 😢

Meaning i cannot show the caption text + my CSS (a red or green small circle) only on lightbox like your code.

Would you be able to update your code in order to let this CSS works ?

#dispo::after{
  content:"●";
  color:green;
  
}

#pasdispo::after{
  content:"●";
  color:red;
  
}

With this code i can write on description field of the image if one painting is available (dispo in french) or not (pasdispo in french) 😎.

Cheeerz !

you will need to new js code to keep span tag on lightbox caption

I've read through all of these posts Tuanphan, but still can't quite seem to get the result I can see in this Squarespace site: https://www.lindylee.net/works

As you can see the grid shows a description under each image. The Lightbox shows a different description under the image (with hover effect) while still allowing you to navigate between images staying in the Lightbox.

I've been able to create an image grid manually (not using the built in grids) to show a different description under the grid image than I have under the Lightbox image, BUT then I can't click through to the next image inside the Lightbox view.

Does anyone have a solution to this? Clearly it has been done (I hope not in an earlier version of Squarespace -pre-7.1) as you can see on https://www.lindylee.net/works.

Using the built in Squarespace galleries only gives you a single field for a description, so I assume that's the limitation and means I can't use these built in ones but rather need to create a manual grid as described above. With the aim to have a different description on the grid to the Lightbox.

Thanks in advance. 

15 hours ago, micahet said:

Does anyone have a solution to this? Clearly it has been done (I hope not in an earlier version of Squarespace -pre-7.1)

I don't have a solution.

Unfortunately it is as you hoped it wouldn't be. The site you cite as an example is a v7.0 using the Avenue template. The image grid you see is a gallery block which is not currently supported on v7.1. The titles that you see in the cited site are built-in features of the gallery block.

35 minutes ago, creedon said:

I don't have a solution.

Ahh, thanks all the same @creedon - appreciate you following up on this so quickly!

Really wish Squarespace would open up a few more customisable options for those that wish to use them. Simple things, like: grid description and lightbox description as 2 separate fields.

Thanks.

@micahet

You may still be able to get where you want but it may take a bit more work to get there.

Try to find a method in your v7.1 site that does most of what you want. I would think the lightbox and lb text is the most complex element.

Then with some CSS and/or Javascript add titles to the gallery grid. That part may need to be maintained manually.

Site URL: https://fiddle-guitar-2rwb.squarespace.com/config/pages

Hello everybody,

I’m hoping someone would be able to help here, tried posting a new thread and there was no reply.

I’m making a portfolio using the Beaumont theme, and I’m still on trial version. I would like to be able to type a description of the image that would be visible only in the lightbox, and not on hover but fixed. I’m not able to code, but I can definitely copy & paste 🙂 Does anyone know, is this possible in Beaumont? 
 

On 9/14/2021 at 4:08 PM, Bokki said:

 

Site URL: https://fiddle-guitar-2rwb.squarespace.com/config/pages

Hello everybody,

I’m hoping someone would be able to help here, tried posting a new thread and there was no reply.

I’m making a portfolio using the Beaumont theme, and I’m still on trial version. I would like to be able to type a description of the image that would be visible only in the lightbox, and not on hover but fixed. I’m not able to code, but I can definitely copy & paste 🙂 Does anyone know, is this possible in Beaumont? 
 

 

Hi,

use this code https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two

@tuanphan Thank you so much, it all worked perfectly! I read most of the thread and figured out how to do exactly what I wanted. The only thing that remains is how to make the description box (within the lightbox) totally transparent. If you know a shortcut to this, please let me know…if not, I thin I can figure it out on my own (probably changing the value of background color in the CSS? 

On 9/14/2021 at 4:08 PM, Bokki said:

 

Site URL: https://fiddle-guitar-2rwb.squarespace.com/config/pages

Hello everybody,

I’m hoping someone would be able to help here, tried posting a new thread and there was no reply.

I’m making a portfolio using the Beaumont theme, and I’m still on trial version. I would like to be able to type a description of the image that would be visible only in the lightbox, and not on hover but fixed. I’m not able to code, but I can definitely copy & paste 🙂 Does anyone know, is this possible in Beaumont? 
 

 

Your site is private. Can you setup password & share url again? We can help easier

Thank you @tuanphan, I actually figured out how to do it myself in the meantime 🙂

Hi,

is there any way to add captions in a lightbox view, with masonry grid-gallery (preferably) and without the need to upgrade to business plan and higher?

Thank you.

Juraj

21 hours ago, Jurajsimkovic said:

Hi,

is there any way to add captions in a lightbox view, with masonry grid-gallery (preferably) and without the need to upgrade to business plan and higher?

Thank you.

Juraj

Hi,

Do you use SS 7.1 or 7.0, if 7.0, which template? Can you share link to your site?

Hi,

I think I've found a much simpler way of displaying the necessery text - copyright info. I think I'm just gonna add it in InDesign or something like that.

Thank you for your time so far. :)

Hi!

I have an individual plan and would like to have my captions on lightbox view only. Is that possible? I can only use custom CSS or code blocks? Please help!

https://fife-cornet-fx9g.squarespace.com/config/

pass: squarespace2022

Hi There. 

Totally New to Squarespace and have found this thread after wanting to have captions on my Lightbox and not on my grid gallery. I have followed the instructions as per tuanphan and have copied the coding in to the code injection > Header. It has worked great, but the Captions are in White and will only show up if the background is dark. I want my website to be white and clean in appearance. Is there anyway of making the captions black text instead of white?

TIA

Kim

*Update... I figured it our by changing white to black in the coding*

Many thanks for this thread and for the original code