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

Lightbox captions only?


Recommended Posts

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?

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

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

image.png.5514a99c463de8b9fe24336e47c47374.png

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, Youtube Gallery for Squarespace
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
  • 2 weeks later...
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.

Link to comment
  • 3 weeks later...
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!

Edited by KristenRuthSmith
Forgot to include pw
Link to comment
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

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

Link to comment
8 hours ago, tuanphan 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!

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

image.thumb.png.72c4ce84cb174c358001c19c0babb5a9.png

Cheeerz !

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

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

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

image.thumb.png.72c4ce84cb174c358001c19c0babb5a9.png

Cheeerz !

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

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

Link to comment
  • 3 weeks later...

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. 

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 weeks later...

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? 
 

 

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

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

Link to comment

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

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

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

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