Jump to content

Lightbox and Caption issues

Recommended Posts

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.

 

Link to comment
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


 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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 */

Link to comment
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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.