Lightbox captions only?

22 hours ago, TahoeBound said:

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

Individual Plan, you mean Personal Plan or Business Plan?

Where is gallery? I don't see it on homepage

13 hours ago, KWP said:

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

Do you still need help or fixed all?

On 11/10/2021 at 6:54 PM, tuanphan said:

Individual Plan, you mean Personal Plan or Business Plan?

Where is gallery? I don't see it on homepage

Yes, I meant a Personal Plan. Here is the direct link (I think).

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

It's under Artworks>Linocuts and Woodprints

Thanks!

On 11/12/2021 at 3:31 PM, TahoeBound said:

Yes, I meant a Personal Plan. Here is the direct link (I think).

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

It's under Artworks>Linocuts and Woodprints

Thanks!

 

For 42 images?

With Business Plan, we can use script code to achieve this with 1 code

With Personal Plan, 1 image = 1 code. If you still want to continue, I will give code for some images, then you can repeat it.

On 11/13/2021 at 7:23 PM, tuanphan said:

For 42 images?

With Business Plan, we can use script code to achieve this with 1 code

With Personal Plan, 1 image = 1 code. If you still want to continue, I will give code for some images, then you can repeat it.

Yes, I can only afford the Personal Plan. C an you please give code for some images then I can repeat it? Thank you so much!!!

On 11/16/2021 at 4:05 AM, TahoeBound said:

Yes, I can only afford the Personal Plan. C an you please give code for some images then I can repeat it? Thank you so much!!!

Add to Design > Custom CSS

/* Prints lightbox */
body#collection-613b162453dc1e545b4abe76 {
.gallery-lightbox-list .content-fit:after {
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 9999;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
}
.gallery-lightbox-list .content-fit:nth-child(1):after {
    content: "enter description enter description";
}
.gallery-lightbox-list .content-fit:nth-child(2):after {
    content: "enter description enter description 2";
}
.gallery-lightbox-list .content-fit:nth-child(3):after {
    content: "enter description enter description 3";
}
.gallery-lightbox-list .content-fit:nth-child(4):after {
    content: "enter description enter description 4";
}
}

Hello @tuanphan, This forum topic seems to be exactly what I was looking for - getting captions appearing in lightbox and not in the gallery grid view. I added the code you supplied in a few posts to Settings/Advanced/Code Injection/Header and yes, the caption now appears in Lightbox. Ya! Thanks. 

But the captions still appear in the Gallery view (Grid Masonry). I did see you provided some additional code to someone that was also asking how to remove the captions from the grid view but that code looked to be page specific and did nothing for me. 

I'm just starting out and working on getting one gallery working perfectly and then plan to duplicate that one finished gallery multiple times and populate those others with different photos, so I'm looking for some code that will remove the caption from the grid view for all galleries on the site. 

The one gallery that is a work in progress is: scottdimond.squarespace.com/landscape/aurora

Password: letmein

As you will see, all the test images have captions ("Image x description"), captions are on, they appear in lightbox, but also, undesirably, they also appear in the grid view.  

Thanks very much for your help, Scott

btw, this is the code I read that should remove captions in grid view but does not work for me. I'm not sure what the collection-"hex code" does and if it is unique to a site/gallery/page/etc. 

/* Filmography caption */
body#collection-5e388895b9b4566c6962ec61 figcaption.gallery-caption.gallery-caption-grid-masonry {
    display: none;
}

16 hours ago, ScottDimond said:

Hello @tuanphan, This forum topic seems to be exactly what I was looking for - getting captions appearing in lightbox and not in the gallery grid view. I added the code you supplied in a few posts to Settings/Advanced/Code Injection/Header and yes, the caption now appears in Lightbox. Ya! Thanks. 

But the captions still appear in the Gallery view (Grid Masonry). I did see you provided some additional code to someone that was also asking how to remove the captions from the grid view but that code looked to be page specific and did nothing for me. 

I'm just starting out and working on getting one gallery working perfectly and then plan to duplicate that one finished gallery multiple times and populate those others with different photos, so I'm looking for some code that will remove the caption from the grid view for all galleries on the site. 

The one gallery that is a work in progress is: scottdimond.squarespace.com/landscape/aurora

Password: letmein

As you will see, all the test images have captions ("Image x description"), captions are on, they appear in lightbox, but also, undesirably, they also appear in the grid view.  

Thanks very much for your help, Scott

 

btw, this is the code I read that should remove captions in grid view but does not work for me. I'm not sure what the collection-"hex code" does and if it is unique to a site/gallery/page/etc. 

/* Filmography caption */
body#collection-5e388895b9b4566c6962ec61 figcaption.gallery-caption.gallery-caption-grid-masonry {
    display: none;
}

Don't remove/edit any code in your current code. Add this code into Landscape Page Header

<style>
  div:not(.gallery-lightbox-wrapper) p.gallery-caption-content {
    display: none;
}
</style>

The code works somewhat for me, but it doesn't really fit nicely on the image. I tried editing it but it seems to break the code completely. (I'm a graphic designer with very basic knowledge of html/css). Any idea on what I should do?

On 1/12/2022 at 1:22 AM, davinavogrig said:

The code works somewhat for me, but it doesn't really fit nicely on the image. I tried editing it but it seems to break the code completely. (I'm a graphic designer with very basic knowledge of html/css). Any idea on what I should do?

Text cannot be adjusted based on individual images, it will change based on the element containing the image, so there will be problems like above.
The only way is to reduce the width of the lightbox text.

What do you think? We will give the code to reduce text width

Looking to see if this thread is still active - I've been able to frankenstein some css and Java from various threads to have captions appear only on lightbox, however they affect the gallery spacing on the main page, bumping each gallery section down so that it looks awful when viewed on mobile. It's almost are actually still visible on the main page, but the font colour is set to white so you can't actually see them - if that makes sense.

Have tried some gallery padding css fixes but none seem to work - any help would be greatly appreciated!

website: https://manjumps.squarespace.com/paintings

Let me know if someone can help with this and I'll provide a password - thanks!!

Sorry to flog a dead horse... I am trying to do the same thing as everyone else - show captions only on Lightbox view and not gallery.  I have tried entering the code under design, where is tells me 'line 1 syntax error".  I have also tried in code injection both header and footer.  Nothing changes on the display of my photos, however.  Trial website is https://marigold-dalmatian-9yf3.squarespace.com/config/ and pw is helpme.  I have not added captions yet to all my images but you can see them in galleries-vancouver.  Thanks very much.  

UPDATE: @tuanphan I found some code on your website (thanks!) that works to hover the captions over the photos in grid view.  This is way better than having them visible under the photos all the time.  However, I still think I prefer to only have them show in Lightbox view.  I would also love to add a second line of title in some cases.  Can you help?  Thanks!

On 2/6/2022 at 12:06 AM, RileyP said:

Looking to see if this thread is still active - I've been able to frankenstein some css and Java from various threads to have captions appear only on lightbox, however they affect the gallery spacing on the main page, bumping each gallery section down so that it looks awful when viewed on mobile. It's almost are actually still visible on the main page, but the font colour is set to white so you can't actually see them - if that makes sense.

Have tried some gallery padding css fixes but none seem to work - any help would be greatly appreciated!

website: https://manjumps.squarespace.com/paintings

Let me know if someone can help with this and I'll provide a password - thanks!!

What is access password?

On 2/6/2022 at 4:46 AM, KimES said:

Sorry to flog a dead horse... I am trying to do the same thing as everyone else - show captions only on Lightbox view and not gallery.  I have tried entering the code under design, where is tells me 'line 1 syntax error".  I have also tried in code injection both header and footer.  Nothing changes on the display of my photos, however.  Trial website is https://marigold-dalmatian-9yf3.squarespace.com/config/ and pw is helpme.  I have not added captions yet to all my images but you can see them in galleries-vancouver.  Thanks very much.  

UPDATE: @tuanphan I found some code on your website (thanks!) that works to hover the captions over the photos in grid view.  This is way better than having them visible under the photos all the time.  However, I still think I prefer to only have them show in Lightbox view.  I would also love to add a second line of title in some cases.  Can you help?  Thanks!

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

On 2/7/2022 at 2:26 AM, tuanphan said:

What is access password?

manjumps2022

On 6/10/2021 at 6:16 PM, 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.

@tuanphan I have the same problem On the Mobile format the captions in light box are all the way at the bottom of the phone and cannot really be read. Is there a way to fix this so on the mobile opine the captions are just under the image. TIA for any help/ suggestions.

Cheers

Kim

Hi,

I have read through this entire forum and all of the links and i still can't find a fix to make captions only appear in the lightbox and not the grid.

here is the page i need help with https://www.cultus.live/photos/project-one-ephnc-5acgd

Right now I have one of the codes from this forum in use which makes captions appear in lightbox but also in the grid view. I dont want them to appear in grid.

2 hours ago, Winter123 said:

Hi,

I have read through this entire forum and all of the links and i still can't find a fix to make captions only appear in the lightbox and not the grid.

here is the page i need help with https://www.cultus.live/photos/project-one-ephnc-5acgd

Right now I have one of the codes from this forum in use which makes captions appear in lightbox but also in the grid view. I dont want them to appear in grid.

Hi,

I see you solved? I don't see caption in grid view

Hi, I'm just getting started and need to add images of artwork. I want to be able to click on the small image of individual images on my gallery and have the image enlarge and the text be visible next to the image . I have been using the Montclaire template and when you click on one of my images it goes to a new page with the original image and texts. How do I access lightbox and do I need to start over or can I use the gallery I set up so far?

2 hours ago, Bobruss said:

I want to be able to click on the small image of individual images on my gallery and have the image enlarge and the text be visible next to the image .

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

I have tried several pieces of the code in this thread but still am unable to enable the caption appearing on the lightbox display only (whether it will be displayed over the image, or below the image is a bridge that's further away.. I would like the option to display it under the image for starters).

I am trying to do this on a portfolio page. 

Here's the page:HIDDEN

Any help would be greatly appreciated. Thanks!!

On 7/19/2023 at 2:11 PM, AKN said:

I have tried several pieces of the code in this thread but still am unable to enable the caption appearing on the lightbox display only (whether it will be displayed over the image, or below the image is a bridge that's further away.. I would like the option to display it under the image for starters).

I am trying to do this on a portfolio page. 

 

Here's the page: https://primrose-pomegranate-a2yl.squarespace.com/work/wildlifepastels

here's the pw: enter!

 

Any help would be greatly appreciated. Thanks!!

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>

@tuanphanThis worked perfectly, thank you very much!

Tuan,

I'd like to be able to have the lightbox on desktop and mobile to work as in this posting, where the title and/or the description is UNDER the image (not overlayed).  It looks great with what was done for 7.1, but I am using Avenue in 7.0 (business plan).

Thanks,

Steve

3 hours ago, smdreyer said:

Tuan,

I'd like to be able to have the lightbox on desktop and mobile to work as in this posting, where the title and/or the description is UNDER the image (not overlayed).  It looks great with what was done for 7.1, but I am using Avenue in 7.0 (business plan).

Thanks,

Steve

This code won't work on 7.0 version. If you share link to your site, we can take a look