Captions for Lightbox with a mosaic gallery

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?

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?

https://www.brianblairvisuals.com/test @Beyondspace

Thank you

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

@Beyondspace I have a business plan. I can do CSS code and JS code.

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

Let me know how it works on your site

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

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.

@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,

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

@Beyondspace

https://www.brianblairvisuals.com/gallery-5-2

For example on this page, captions will show up in the lightbox for the first 19 images, but after that, they won't show up. This is one example, but this occurs on the majority of gallery pages.

Thanks,

Garrett

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>

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.

@BrianBlair You try this to Website Tools > Custom CSS to fix problem

div.gallery-lightbox-list p.gallery-caption-content {
    background-color: white;
}