Lightbox captions only?

I've been through 8 pages of this discussion and have had NO luck getting captions on Lightbox (while being hidden on the masonry grid). It's a an artist's portfolio and its a pretty simple ask. Not sure why it is not natively available on SQuarespace. Can anyone help please? Thanks in advance. 

On 3/23/2024 at 2:04 PM, taradesigns said:

I've been through 8 pages of this discussion and have had NO luck getting captions on Lightbox (while being hidden on the masonry grid). It's a an artist's portfolio and its a pretty simple ask. Not sure why it is not natively available on SQuarespace. Can anyone help please? Thanks in advance. 

You can follow code in this comment

On 7/22/2023 at 1:40 AM, tuanphan said:

Add to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script>
jQuery(document).ready(function($){
 var texts = document.getElementsByClassName('gallery-caption-content');
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){
        var text = texts[idx]
        var id = $(ele).attr('data-slide-url')
        if (text) {
            $(ele).append('<p id="' + id + '" class="light-caption sqsrte-small">'  + text.innerHTML + '</p>');
            
            if ($(ele).attr('data-active')) {
                $(`#${id}`).css('visibility', 'visible')
            }
        }
    })
    $('.gallery-masonry-lightbox-link').click(function() {
        var id = $(this).attr('href').split('=')[1]
        $('.light-caption').css('visibility', 'hidden')
        $(`#${id}`).css('visibility', 'visible')
    })
    $('.gallery-lightbox').click(function() {
        $('.light-caption').css('visibility', 'hidden')
        var id = location.search.split('=')[1]
        $(`#${id}`).css('visibility', 'visible')
    })
})
</script>
<style>
  figcaption.gallery-caption.gallery-caption-grid-masonry {
  	display: none;
  }
  
.light-caption {
    visibility: hidden;
    position: fixed;
  	font: p2;
  	font-family: source code pro;
  	color:grey;
    font-size: 14px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}
  .gallery-lightbox-item[data-active='true'] .light-caption {
    visibility: visible;
}
.gallery-lightbox-controls {
	display: flex !important;
  } 
</style>

 

Hello Tuan,

this injection has worked great for me but there are a few issues. Firstly, is it possible to make it so the captions only appear in the lightbox? Right now they show up outside of the lightbox as well. Also is it possible to change the color and font to align with the rest of my website? Here is a page I am trying to accomplish this on: https://lancewilson.com/portfolio/mountains 

Hi Tuan and Lance! 

My gallery is similar to the one lance shared https://lancewilson.com/portfolio/mountains 

 I would also like to have the captions appear only on the lightbox, not outside!  For Code Injection, we have to upgrade to a Business plan I think?  The person who I am designing this site for wants to stay with the cheaper plan. Any Custom CSS options for this?

If Code Injection is the only way to do this,  there should be a preview option! Would help to convince a client to upgrade... especially since on Wix this (text on lightbox on artist's portfolios using masonry galleries) is very easily done - and cheaper!  I much prefer Squarespace, but I may have to shift the whole job to Wix because of this 😞

Thank you in advance. 

PS: Ok so there is a preview! When I injected the code into the footer instead of the header - it worked to give me a preview. Now I hope the client agrees to upgrade to have this - and that Squarespace 7.1 lets us do this easily in the future. Thanks Tuan & Lance 🙂 

So the client wants to shift the project to Wix because though the code injection worked to bring captions on the lightbox there is no option from that text for a link to enquirely and/or add to cart.  All of this - caption on hover on image galleries which then clicks through to larger image on a lightbox/slideshow with info next to it which has a link to buy the item - is available on Wix easily and more cheaply. Does Squarespace not have these options at all on galleries? Or am I doing something wrong? Sorry to have to migrate this project, wish there was a solution! 

On 3/30/2024 at 8:44 AM, lancewilson said:

Hello Tuan,

this injection has worked great for me but there are a few issues. Firstly, is it possible to make it so the captions only appear in the lightbox? Right now they show up outside of the lightbox as well. Also is it possible to change the color and font to align with the rest of my website? Here is a page I am trying to accomplish this on: https://lancewilson.com/portfolio/mountains 

You can keep code, then I will check easier. But I think this should be possible with some CSS code.

On 4/1/2024 at 12:51 AM, tuanphan said:

You can keep code, then I will check easier. But I think this should be possible with some CSS code.

Great, thank you. What can I do at this point, what CSS should I use?

On 4/3/2024 at 11:42 AM, lancewilson said:

Great, thank you. What can I do at this point, what CSS should I use?

You can add & keep code, I can check problem easier.

Currently I don't see any text in lightbox and outside lightbox

16 hours ago, tuanphan said:

You can add & keep code, I can check problem easier.

Currently I don't see any text in lightbox and outside lightbox

I updated it, there should be text in and outside the lightbox now.

On 4/6/2024 at 4:18 AM, lancewilson said:

I updated it, there should be text in and outside the lightbox now.

To hide caption outside lightbox ,use this code to Website > Website Tools > Custom CSS

figcaption.gallery-caption.gallery-caption-grid-strips {
    max-width: 100% !important;
    display: none;
}

On 4/6/2024 at 7:00 PM, tuanphan said:

To hide caption outside lightbox ,use this code to Website > Website Tools > Custom CSS

figcaption.gallery-caption.gallery-caption-grid-strips {
    max-width: 100% !important;
    display: none;
}

 

Great thank you. Is it possible to change the font and color? I would like it to be Futura PT and solid white. Also it seems that when you navigate through the gallery without pressing the slideshow arrows it gets glitchy and the captions dont change/get covered up by the next ones. Is it possible to fix this? I really appreciate all the help

4 hours ago, lancewilson said:

Great thank you. Is it possible to change the font and color? I would like it to be Futura PT and solid white. Also it seems that when you navigate through the gallery without pressing the slideshow arrows it gets glitchy and the captions dont change/get covered up by the next ones. Is it possible to fix this? I really appreciate all the help

https://lancewilson.com/portfolio/mountains?itemId=edk5vkpw47x6vld2xsn4vx9wpl4bhw

Use this code to Custom CSS box

.light-caption {
    color: #fff !important;
    font-family: futura-pt !important;
}
.gallery-lightbox-item[data-next='true'] .light-caption {
    visibility: visible !important;
    background-color: #000;
}

Dear Lance and Tuan

Quick question, were you able to get captions in Lightbox only and not on the gallery using just CSS?

I managed to do it but with a code injection for which I had to ask my client to upgrade to a business plan - something he was not very happy about as he did not need it yet.  

Now that we upgraded to a business plan for the Code Injection to work, we still cannot link a caption in light box of the gallery to an order form or a Shop. 

Is there anyway around this? Quite confused as to why all this is not an easy option on SquareSpace when it is available on Wix and other platforms. 

I look forward to some guidance. 

URL https://round-capybera-nbry.squarespace.com/

PW KP24

Thanks in advance 🙂

Tara

PS: This is the gallery that we have added captions to so far https://round-capybera-nbry.squarespace.com/painting-2024 ... Not yet launched as work still on. The PW to view is: KP24. Any help will be much appreciated! Everything about the site is looking and working great, but there is this one missing piece - a pretty big one for my client 😞

37 minutes ago, taradesigns said:

Dear Lance and Tuan

Quick question, were you able to get captions in Lightbox only and not on the gallery using just CSS?

I managed to do it but with a code injection for which I had to ask my client to upgrade to a business plan - something he was not very happy about as he did not need it yet.  

Now that we upgraded to a business plan for the Code Injection to work, we still cannot link a caption in light box of the gallery to an order form or a Shop. 

Is there anyway around this? Quite confused as to why all this is not an easy option on SquareSpace when it is available on Wix and other platforms. 

I look forward to some guidance. 

URL https://round-capybera-nbry.squarespace.com/

PW KP24

Thanks in advance 🙂

Tara

Possible with CSS, but you need to enter manually caption for each image.

If you used script in Code Injection, actually you can add a Markdown Block in Site Footer > Then paste script. It still works with Personal Plan.

Okay, thank you so much - will try! 

Any advice about the linking of Caption within the lightbox to a form / shop ? 

19 hours ago, taradesigns said:

Okay, thank you so much - will try! 

Any advice about the linking of Caption within the lightbox to a form / shop ? 

When you enter caption description, use a format like this

Here is caption with <a href="https://google.com">button link</a>

Thank you Tuan! But I think I am doing something wrong... added the code: 

But when I save and exit and try on the site, it looks like this, and the button does not link to anything. Sorry for the back and forth, but if you could point out what I am doing wrong I will try again... Thanks. 

On 5/2/2024 at 2:21 PM, taradesigns said:

Thank you Tuan! But I think I am doing something wrong... added the code: 

But when I save and exit and try on the site, it looks like this, and the button does not link to anything. Sorry for the back and forth, but if you could point out what I am doing wrong I will try again... Thanks. 

 

I see the link already shows, but some attribute prevents click

You can use this code to Website Tools > Custom CSS to enable click + change style

figure.gallery-lightbox-item {
    pointer-events: initial !important;
}
figure.gallery-lightbox-item p a {
    color: blue;
    border-bottom: 2px solid;
}

Hi again Tuan

I have not tried the markdown block on footer yet, as the client may add a shop later for which a Business plan is required anyway

What is still an issue is that the captions (using a script in Code Injection) work well in Lightbox on the desktop view but on mobiles and tablets, they go across the image. Wondering if there is a workaround? 

The site is now live :www.kaushalparikhart.com

Many thanks in advance. 

NOTE All these issues have cropped up because the client do not want captions in the galleries only in lightbox... we needed custom code for that, which is causing all these glitches...  I wonder why this simple ask (gallery with captions on in lightbox only) is not possible on SS. Is this likely to be corrected? Asking as it will determine the jobs I take ... and I imagine it would affect many others on SS too. ... 

2 hours ago, taradesigns said:

Hi again Tuan

I have not tried the markdown block on footer yet, as the client may add a shop later for which a Business plan is required anyway

What is still an issue is that the captions (using a script in Code Injection) work well in Lightbox on the desktop view but on mobiles and tablets, they go across the image. Wondering if there is a workaround? 

The site is now live :www.kaushalparikhart.com

Many thanks in advance. 

 

NOTE All these issues have cropped up because the client do not want captions in the galleries only in lightbox... we needed custom code for that, which is causing all these glitches...  I wonder why this simple ask (gallery with captions on in lightbox only) is not possible on SS. Is this likely to be corrected? Asking as it will determine the jobs I take ... and I imagine it would affect many others on SS too. ... 

You can use this code to Code Injection

<style>
  @media screen and (max-width:1024px) {
  .light-caption {
    width: calc(100% - 20px) !important;
}
  }
</style>

Thank you. This has worked for phone... but not tablet! Will try by increasing the px... 

15 hours ago, taradesigns said:

Thank you. This has worked for phone... but not tablet! Will try by increasing the px... 

Which tablet do you use?

Hi!

I have managed to follow the instructions so that the caption is only visible when I hover over the image. However, it is not possible to click on the image so it appears as a lightbox? Could that be solved? I only have Personal plan and i'm trying to avoid business plan. 

Thank you so much for all the help so far!!