Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Captions in lightbox mode 7.1


mathildenicoline

Question

Site URL: https://orchid-piano-9tpj.squarespace.com/ragnaroken

I have searched but not found the correct code. I want captions to appear on hover in the gallery - this I have found a code for.

I also want captions to appear when the image is opened in lightbox - this I can't find a code that does the trick. I want this on all pages.

This is the code I have for hover in galleries

figure.gallery-strips-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-strips-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
    background: #000000; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Link to comment

6 answers to this question

Recommended Posts

  • 1

Kindly copy this snippet in Code injection, 

<style>
  .lightbox-caption {
    display: block;
    z-index: 9999;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
</style>
<script>
  $(document).ready(function(){
    $('.gallery-lightbox-item-img').each(function(){
    var alt = $(this).find('img').attr('alt');
    $(this).append('<div class="lightbox-caption">' + alt + '</div>');
    });
});
</script>

image.thumb.png.70dc4923bfbadc79f90396def1a070ab.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
23 minutes ago, mathildenicoline said:

Thank you @bangank36 - Finally it worked! 

You rock!

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

Hi there. Wondering if there is any CSS that can be inserted to achieve this effect? I inserted some CSS code to make it so hovering over images in my gallery reveals captions. But, now clicking on the images does nothing. I can't have them link to anything and spotlight doesn't work at all! Do you know of a simple fix for this only using CSS? Thanks.  

Link to comment
  • 0
16 hours ago, jimmydisplayname said:

Hi there. Wondering if there is any CSS that can be inserted to achieve this effect? I inserted some CSS code to make it so hovering over images in my gallery reveals captions. But, now clicking on the images does nothing. I can't have them link to anything and spotlight doesn't work at all! Do you know of a simple fix for this only using CSS? Thanks.  

No. You need to use above JavaScript/CSS to achieve this.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

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

×
×
  • Create New...