tuanphan Posted November 11, 2021 Share Posted November 11, 2021 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 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 Posted November 11, 2021 Share Posted November 11, 2021 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? 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
TahoeBound Posted November 12, 2021 Share Posted November 12, 2021 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! Link to comment
tuanphan Posted November 14, 2021 Share Posted November 14, 2021 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. 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
TahoeBound Posted November 15, 2021 Share Posted November 15, 2021 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!!! Link to comment
tuanphan Posted November 17, 2021 Share Posted November 17, 2021 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"; } } TahoeBound 1 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
ScottDimond Posted November 28, 2021 Share Posted November 28, 2021 (edited) 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; } Edited November 29, 2021 by ScottDimond Link to comment
tuanphan Posted November 29, 2021 Share Posted November 29, 2021 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> 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
davinavogrig Posted January 11, 2022 Share Posted January 11, 2022 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? Link to comment
tuanphan Posted January 13, 2022 Share Posted January 13, 2022 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 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
RileyP Posted February 5, 2022 Share Posted February 5, 2022 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!! Link to comment
KimES Posted February 5, 2022 Share Posted February 5, 2022 (edited) 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! Edited February 6, 2022 by KimES update Link to comment
tuanphan Posted February 7, 2022 Share Posted February 7, 2022 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? 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 Posted February 7, 2022 Share Posted February 7, 2022 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 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
RileyP Posted February 8, 2022 Share Posted February 8, 2022 On 2/7/2022 at 2:26 AM, tuanphan said: What is access password? manjumps2022 Link to comment
KWP Posted February 9, 2022 Share Posted February 9, 2022 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 Link to comment
Winter123 Posted December 15, 2022 Share Posted December 15, 2022 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. Link to comment
tuanphan Posted December 15, 2022 Share Posted December 15, 2022 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 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
Bobruss Posted December 16, 2022 Share Posted December 16, 2022 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? Link to comment
creedon Posted December 16, 2022 Share Posted December 16, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
AKN Posted July 19, 2023 Share Posted July 19, 2023 (edited) 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!! Edited August 5, 2023 by AKN Link to comment
tuanphan Posted July 22, 2023 Share Posted July 22, 2023 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> AKN, melody495, Frick74 and 2 others 2 1 2 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
AKN Posted July 22, 2023 Share Posted July 22, 2023 @tuanphanThis worked perfectly, thank you very much! Link to comment
smdreyer Posted July 30, 2023 Share Posted July 30, 2023 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 Link to comment
tuanphan Posted July 31, 2023 Share Posted July 31, 2023 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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment