Lightbox captions only

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

Hi,

Can you share link to the site? We can check easier

Hi there! here is the link:

https://www.janedodd.co.nz

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?

hello! The portfolio pages thank you.

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

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;
}