Jump to content

Captions for Lightbox with a mosaic gallery

Recommended Posts

18 hours ago, BrianBlair said:

In the Lightbox, I'm looking to display captions on the right side underneath the image. I also don't want the captions to show on the mosaic gallery, just on the right side. Can someone help me with this?

Can you share your URL with link to this gallery?

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

It requires to combine js code and CSS code to implement this feature. Do you have business plan or above one?

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
Posted (edited)

You can try the following code on footer injection:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const itemGallery = document.querySelectorAll('.gallery-masonry-item');
    var itemGalleryLightBox = document.querySelectorAll('.gallery-lightbox-item');
    var countGalleryItem = itemGallery.length;

    itemGallery.forEach((item, i) => {
      const link = item.querySelector('.gallery-masonry-lightbox-link');
      const itemP = item.querySelector('p');
      if (link && itemP) {
        const caption = itemP.cloneNode(true);
        const id = link.getAttribute('href').replace('?itemId=','');
        const itemNeedCaption = Array.from(itemGalleryLightBox).find(lightboxItem => {
          return lightboxItem.getAttribute('data-slide-url') === id;
        });
        itemNeedCaption.appendChild(caption);
      }
    })
  })
</script>
<style>
  .gallery-lightbox-outer-wrapper  .gallery-lightbox-item:last-child .gallery-caption-content {
    transition: none !important;
    opacity: 1 !important;
  }
  .gallery-lightbox-outer-wrapper  .gallery-lightbox-item .gallery-caption-content {
    transition: none !important;
    opacity: 0 !important;
  }
</style>

My demo

image.thumb.png.69beb1386686a0db449fccc449b1090e.png

Let me know how it works on your site

 

Edited by Beyondspace

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
Posted (edited)
6 hours ago, Beyondspace said:

You can try the following code on footer injection:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const itemGallery = document.querySelectorAll('.gallery-masonry-item');
    var itemGalleryLightBox = document.querySelectorAll('.gallery-lightbox-item');
    var countGalleryItem = itemGallery.length;

    itemGallery.forEach((item, i) => {
      const link = item.querySelector('.gallery-masonry-lightbox-link');

      const caption = item.querySelector('p').cloneNode(true);
      if (link && caption) {
        const id = link.getAttribute('href').replace('?itemId=','');
        console.log (id);
        const itemNeedCaption = Array.from(itemGalleryLightBox).find(lightboxItem => {
          return lightboxItem.getAttribute('data-slide-url') === id;
        });
        itemNeedCaption.appendChild(caption);
      }
    })
  })
</script>
<style>
  .gallery-lightbox-outer-wrapper  .gallery-lightbox-item:last-child .gallery-caption-content {
    transition: none !important;
    opacity: 1 !important;
  }
  .gallery-lightbox-outer-wrapper  .gallery-lightbox-item .gallery-caption-content {
    transition: none !important;
    opacity: 0 !important;
  }
</style>

My demo

image.thumb.png.69beb1386686a0db449fccc449b1090e.png

Let me know how it works on your site

 

Thank you so much for the code on this.

 

I also added the following in the <style> section to hide the captions on the mosaic gallery and change the font to something custom.

  
  figcaption.gallery-caption {
  display:none;
}

  .gallery-lightbox-item {
  color:black;
  font-family: 'American Typewriter', serif;
}
 

The only thing that seems to be happening is that the copy is overlapping on Safari browsers on my client's side.

Edited by BrianBlair
Link to comment
Posted (edited)

@Beyondspace

For some reason the captions aren't showing up on all of the images. Could it be an issue with the number of characters? Should it maybe go to two lines in this case?

This is the current code I have in Custom CSS

.header-announcement-bar-wrapper  {
  padding-top:0px !important;
  padding-bottom:0px !important;
}

/* Change the background color - gallery*/
.gallery-lightbox-background{
    background: #ffffff;
  opacity:1
}

/* Change the close button color - gallery */
.gallery-lightbox-close-btn-icon *
{color: #000000;
}
/* Change the prev/next controls - gallery */
.gallery-lightbox-control-btn-icon *{
    color: #000000;
}

/* - - Simple Slideshow - - */
@media only screen and (max-width:2560px) {
.gallery-slideshow-item-wrapper, .gallery-slideshow-item img{
width: 100vw!important;
object-fit: cover;
left: 0!important
}
}

 

This is the code in the Code Injection

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const itemGallery = document.querySelectorAll('.gallery-masonry-item');
    var itemGalleryLightBox = document.querySelectorAll('.gallery-lightbox-item');
    var countGalleryItem = itemGallery.length;

    itemGallery.forEach((item, i) => {
      const link = item.querySelector('.gallery-masonry-lightbox-link');

      const caption = item.querySelector('p').cloneNode(true);
      if (link && caption) {
        const id = link.getAttribute('href').replace('?itemId=','');
        console.log (id);
        const itemNeedCaption = Array.from(itemGalleryLightBox).find(lightboxItem => {
          return lightboxItem.getAttribute('data-slide-url') === id;
        });
        itemNeedCaption.appendChild(caption);
      }
    })
  })
</script>

<style>
  .gallery-lightbox-outer-wrapper  .gallery-lightbox-item:last-child .gallery-caption-content {
    transition: none !important;
    opacity: 1 !important;
  }
  .gallery-lightbox-outer-wrapper  .gallery-lightbox-item .gallery-caption-content {
    transition: none !important;
    opacity: 0 !important;
  }
  
  figcaption.gallery-caption {
  display:none;
}

  .gallery-lightbox-item {
  color:black;
  font-family: 'American Typewriter', serif;
}
  
  
</style>

 

Thanks,

Edited by BrianBlair
Link to comment

I check that it works normally (show caption on all images). Which one are you referring?

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

Try the new js code

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const itemGallery = document.querySelectorAll('.gallery-masonry-item');
    const itemGalleryLightBox = document.querySelectorAll('.gallery-lightbox-item');
    itemGallery.forEach((item, i) => {
      const link = item.querySelector('.gallery-masonry-lightbox-link');
      const itemP = item.querySelector('p');
      if (link && itemP) {
        const caption = itemP.cloneNode(true);
        const id = link.getAttribute('href').replace('?itemId=','');
        const itemNeedCaption = Array.from(itemGalleryLightBox).find(lightboxItem => {
          return lightboxItem.getAttribute('data-slide-url') === id;
        });
        itemNeedCaption.appendChild(caption);
      }
    })
  })
</script>

 

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

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.