Lightbox and Caption issues

Dear experts,

I am a total newbie moving from Wix to Squarespace and I am really struggling with the coding aspect. I am trying to create a gallery with pop-up captions that will fit to the size of the image and lightbox that goes full-screen; essentially mirroring my old Wix website that has all this in place.

I have sort of managed to do job number one (create pop up captions) but getting them to fit the images is difficult because the sizes of my images are not always uniform. 

Second issues is lightbox reduces the size of the images when clicked on.

I have tried various code to make it go full-screen but have so far failed on that front and I promise I have tried to find fixes.

I am happy to provide a link to my site in construction but I am currently unsure how to even password it properly.

Sorry for the newbie questions and thanks in advance.

On 6/10/2024 at 5:22 PM, DolceLuceDolls said:

Dear experts,

I am a total newbie moving from Wix to Squarespace and I am really struggling with the coding aspect. I am trying to create a gallery with pop-up captions that will fit to the size of the image and lightbox that goes full-screen; essentially mirroring my old Wix website that has all this in place.

I have sort of managed to do job number one (create pop up captions) but getting them to fit the images is difficult because the sizes of my images are not always uniform. 

Second issues is lightbox reduces the size of the images when clicked on.

I have tried various code to make it go full-screen but have so far failed on that front and I promise I have tried to find fixes.

I am happy to provide a link to my site in construction but I am currently unsure how to even password it properly.

Sorry for the newbie questions and thanks in advance.

 

You can get the following reference for setting password 

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

22 hours ago, Beyondspace said:

You can get the following reference for setting password 

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

I am actually interested in your lightbox software, I have seen it in use and it looks great. 

Posting my code that is (sort of) now doing what I want. It's still not as elegant as I would like but I hope this helps someone. This is designed for gallery strips layouts but can be adjusted for other types.

.gallery-caption-grid-strips {
  background-color: rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  padding: 2px 2px;
  max-width: 100%;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  text-align: center;
  transform: translateY(100%);
  transition: transform .3s;
}
.gallery-section .gallery-caption.gallery-caption-grid-strips p {
  font-family: 'Omnes-pro';
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
.gallery-strips-item {
  overflow: hidden;
}
.gallery-strips-item:hover .gallery-caption-grid-strips {
  transform: none;
}
#footer-sections .page-section:nth-child(1) {
 position: fixed!important;
 top: 0!important;
 z-index:9 9!important;
 width: 100%!important;
 height: auto!important;
}
header,#page{
margin-top: 8rem!important
}
/* Lightbox images */

On 6/13/2024 at 9:17 PM, DolceLuceDolls said:

Posting my code that is (sort of) now doing what I want. It's still not as elegant as I would like but I hope this helps someone. This is designed for gallery strips layouts but can be adjusted for other types.

 

.gallery-caption-grid-strips {
  background-color: rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  padding: 2px 2px;
  max-width: 100%;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  text-align: center;
  transform: translateY(100%);
  transition: transform .3s;
}
.gallery-section .gallery-caption.gallery-caption-grid-strips p {
  font-family: 'Omnes-pro';
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
.gallery-strips-item {
  overflow: hidden;
}
.gallery-strips-item:hover .gallery-caption-grid-strips {
  transform: none;
}
#footer-sections .page-section:nth-child(1) {
 position: fixed!important;
 top: 0!important;
 z-index:9 9!important;
 width: 100%!important;
 height: auto!important;
}
header,#page{
margin-top: 8rem!important
}
/* Lightbox images */

It looks like you have figured it out on your own, right? Do you still need help?

On 6/17/2024 at 4:08 PM, Beyondspace said:

It looks like you have figured it out on your own, right? Do you still need help?

Yes I'd love some help because my old Wix site did a lot of the things I'm trying to do automatically.

For example, the captions would fit neatly over the image and not scroll off the top or have to be super tiny.

I also cannot figure out how to link to a section of a page, for example if a new product is released I add a header with a link.

I can show you my Wix page I am trying to replicate, it is here, if you are scared of art dolls or action figure type items please be careful before clicking

https://dolcelucebjd.wixsite.com/dolcelucedolls/copy-of-gem-of-doll