NinaLewis97 Posted February 19, 2022 Share Posted February 19, 2022 Hi there, I am doing a website for a client who is only using a personal plan. As they are a jeweller, I need to be able to have a caption showing the details of the work in the Lightbox section of the gallery. I don't want the captions to show in the grid view. I'm having a lot of trouble trying to work this out, and I'm stuck because they do not want to upgrade to a business plan. Any help would be much appreciated! Nina Link to comment
tuanphan Posted February 25, 2022 Share Posted February 25, 2022 Hi, Can you share link to the site? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
NinaLewis97 Posted September 13, 2022 Author Share Posted September 13, 2022 Hi there! here is the link: https://www.janedodd.co.nz Link to comment
tuanphan Posted September 16, 2022 Share Posted September 16, 2022 On 2/19/2022 at 8:59 AM, NinaLewis97 said: Hi there, I am doing a website for a client who is only using a personal plan. As they are a jeweller, I need to be able to have a caption showing the details of the work in the Lightbox section of the gallery. I don't want the captions to show in the grid view. I'm having a lot of trouble trying to work this out, and I'm stuck because they do not want to upgrade to a business plan. Any help would be much appreciated! Nina Thank you. Which page are you referring to? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
NinaLewis97 Posted September 21, 2022 Author Share Posted September 21, 2022 hello! The portfolio pages thank you. Link to comment
NinaLewis97 Posted October 3, 2022 Author Share Posted October 3, 2022 On 9/16/2022 at 1:47 PM, tuanphan said: Thank you. Which page are you referring to? The portfolio pages thank you! here are the links: https://www.janedodd.co.nz/jewellery/three https://www.janedodd.co.nz/jewellery/two https://www.janedodd.co.nz/jewellery/one Link to comment
tuanphan Posted October 4, 2022 Share Posted October 4, 2022 Business Plan will be easier to achieve this. With Personal Plan, will require a lot of code First, edit Section > Enable Gallery Caption Next, add some caption for images Next, Try editing Site Footer > Add a Markdown Block > Paste this code <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script> Next, add this to Design > Custom CSS /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } gcart 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment