Jump to content

Adding a caption to the video lightbox in Wexley Template

Recommended Posts

Site URL: https://watermelon-robin-nhdz.squarespace.com/config/pages/618c171f9cbcb131a242f035

Hey All, 

I have created a gallery page (of videos) in the Wexley template. I would like to have the description appear as a caption below the video in the lightbox view.  I like how the title is the only thing you see on hover in the Gallery but hoping to add a bit more messaging to the lightbox. Any ideas? I am not a code person but can follow instructions 🙂  I have tried another solution and it doesn't seem to work for videos.

Thanks!

Edited by thirteen38
added details
Link to comment
9 hours ago, thirteen38 said:

Site URL: https://watermelon-robin-nhdz.squarespace.com/config/pages/618c171f9cbcb131a242f035

Hey All, 

I have created a gallery page (of videos) in the Wexley template. I would like to have the description appear as a caption below the video in the lightbox view.  I like how the title is the only thing you see on hover in the Gallery but hoping to add a bit more messaging to the lightbox. Any ideas? I am not a code person but can follow instructions 🙂  I have tried another solution and it doesn't seem to work for videos.

Thanks!

What is your site password

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

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

Here is the code I am using:

.collection-type-gallery #slideshowWrapper .image-description {
    text-align: center;
    width: 100%;
    padding: 10px 0px 0;
    background: #fff;
    display: block;
    position: relative;
    bottom: 0px;
    margin-top: 0px;
      margin-bottom: 25px;
}

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide img {
    max-height: 90%;
    width: auto !important;
    margin: 0 auto !important;
      margin-left: auto;
      margin-right: auto;
    top: 0 !important;
}

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit { 
      position: sticky;
    max-height: 100%;
    width: 800px !important;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(0%, 0%);
    right: auto !important;
}

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit .intrinsic-inner {
    text-align: center;
}

Link to comment
10 hours ago, thirteen38 said:

Here is the code I am using:

.collection-type-gallery #slideshowWrapper .image-description {
    text-align: center;
    width: 100%;
    padding: 10px 0px 0;
    background: #fff;
    display: block;
    position: relative;
    bottom: 0px;
    margin-top: 0px;
      margin-bottom: 25px;
}

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide img {
    max-height: 90%;
    width: auto !important;
    margin: 0 auto !important;
      margin-left: auto;
      margin-right: auto;
    top: 0 !important;
}

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit { 
      position: sticky;
    max-height: 100%;
    width: 800px !important;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(0%, 0%);
    right: auto !important;
}

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit .intrinsic-inner {
    text-align: center;
}

Do you mean adding description in the lightbox? inner the image?

image.thumb.png.7810e7c79e49a310904b312465af7aa4.png

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

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

I am trying to add a caption to below the video that appears in that lighbox/popup. I have gotten close, as you can see from this image.... You can see there is extra space above now but the caption seems visible. 

I do have a new question too. Do you know a way to add a social share button on these gallery items? So that someone can share the video on their social platforms? I tried "Addthis" app and it seems to only let me share the main gallery page as opposed to each individual video. See second screen shot.

 

465829551_ScreenShot2021-11-17at11_20_55AM.thumb.png.5411f8747121be8d68975017a377b577.png

Screen Shot 2021-11-17 at 11.23.43 AM.png

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.