Jump to content

Captions for Lightbox with a mosaic gallery

Recommended Posts

Posted

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?

Posted
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 (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

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 (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

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
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
Posted

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 (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted

Thank you so much @Beyondspace

The only thing I'm running into is the transitions overlaying one another for about a second. This is only happening in Safari for some reason.

See attached.

Screenshot-2024-06-04-at-2.05.24 PM.jpg

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.