Frick74

Hello! 
I am also trying to get captions to display under my images on the Beaumont 7.1 template but not while in the grid view. This code works except that there is a lag in the caption switch when I go to the next image: the previous images' caption remains overlayed on the current caption for one second before disappearing. I've tried chat GPT solutions and haven't found a solution. thanks for any help. Do I need to share my website info?
 
<script>
document.addEventListener("DOMContentLoaded", function () {
  // configure the classes we're looking for
  const listClass = "div.gallery figure";
  const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a";
  const lightBoxCaption = "lightbox-caption";
  const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']";
  // select all gallery elements, find their captions
  // if they exist then extract the slide id and update the caption element
  // in the lightbox slide below the image
  document.querySelectorAll(listClass).forEach((element) => {
    const a = element.querySelector(linkClass);
    const c = element.querySelector("figcaption");
    if (a && a.href && c) {
      const id = a.href.split("=")[1];
      const lbSelector = lightboxSlideSelector.replace("{0}", id);
      const lb = document.querySelector(lbSelector);
      if (lb) {
        // Update the lightbox caption text content with the new content
        const lbCaption = lb.querySelector(`.${lightBoxCaption}`);
        if (lbCaption) {
          lbCaption.textContent = c.textContent;
        } else {
          // Create a new caption element and set its text content
          const newCaption = document.createElement("figcaption");
          newCaption.className = lightBoxCaption;
          newCaption.textContent = c.textContent;
          // Append the new caption below the image in the lightbox slide
          lb.appendChild(newCaption);
        }
      }
    }
  });
});

hi,
For me it is also frustrating that features which were available in 7.0, are not available in 7.1. Simple things like captions showing in a Lightbox, indexpages etc. I have to find work arounds through css and javascript to arrange certain outcomes which were available in the past, but are gone now. I my option these ( 'simple' ) features should be available for paying users of this platform.
I totally agree with craigcarmean that 7.1 should be improved to make things better for us.
 

Fantastic @tuanphan
It works as a charm, this will be a great upscale for my site.
I put some html in the description to style the text a little bit, maybe this will be helpful for somebody. If you would like to put an internal link in the description leave out your website address.
I will try to get this effect with a class, but for now this is oke. 
<b>Scalda</b> Campagne <a href = /cases/samenmakenwezeeland> &nbsp <span style="font-family:krete;font-weight: bold;"> | &nbsp Ga naar case</a></span>
 
Thanks again @tuanphan
 I really appreciate it.
 
 
 

Add this code under
<style> .light-caption { z-index: 999999 !important; } figure.gallery-lightbox-item { pointer-events: initial !important; } </style>  

Did you ever figure this out? I’m interested in having links in some of my Lightbox captions. 

Add to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> jQuery(document).ready(function($){ var texts = document.getElementsByClassName('gallery-caption-content'); $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){ var text = texts[idx] var id = $(ele).attr('data-slide-url') if (text) { $(ele).append('<p id="' + id + '" class="light-caption sqsrte-small">' + text.innerHTML + '</p>'); if ($(ele).attr('data-active')) { $(`#${id}`).css('visibility', 'visible') } } }) $('.gallery-masonry-lightbox-link').click(function() { var id = $(this).attr('href').split('=')[1] $('.light-caption').css('visibility', 'hidden') $(`#${id}`).css('visibility', 'visible') }) $('.gallery-lightbox').click(function() { $('.light-caption').css('visibility', 'hidden') var id = location.search.split('=')[1] $(`#${id}`).css('visibility', 'visible') }) }) </script> <style> figcaption.gallery-caption.gallery-caption-grid-masonry { display: none; } .light-caption { visibility: hidden; position: fixed; font: p2; font-family: source code pro; color:grey; font-size: 14px; bottom: 20px; left: 50%; transform: translateX(-50%); margin: 0; } .gallery-lightbox-item[data-active='true'] .light-caption { visibility: visible; } .gallery-lightbox-controls { display: flex !important; } </style>  

Thanks Tuanphan,
I appreciate it and it's clear to me what the problem is. 
I used 'scale' to get a similar effect, it's isn't perfect like 'transform: scale, but if gives the hover some movement. I can only use it with a small amount, because it isn't working from the middle, I thinks it's scales from the top-left of the total masonry.
div.blog-masonry article:hover { scale:1.002; } Thanks again
Kind regards

My question is how to get captions to appear within the popup, NOT the gallery, either static or as rollover in the example shown. Rational: thumbnails just to be scanned and extra detail to be visible on larger image, such as date, medium etc. 
CSS please?!

hi,
For me it is also frustrating that features which were available in 7.0, are not available in 7.1. Simple things like captions showing in a Lightbox, indexpages etc. I have to find work arounds through css and javascript to arrange certain outcomes which were available in the past, but are gone now. I my option these ( 'simple' ) features should be available for paying users of this platform.
I totally agree with craigcarmean that 7.1 should be improved to make things better for us.
 

For a few weeks I've been trying to find a clean solution for the 7.1 lightbox on Gallery pages. It should support: 
Styling in the description text of the images (i.e. via html tags and CSS) to be able to use formatting and margins Swipe to go to next image on Mobile  Using keyboard arrow on Desktop  Using mouse click on arrow on Desktop  Advance cleanly at the same time as the image as text  Here's my current solution with my own (questionable) html and CSS, but with code from these forums: https://theflore.com/portfolio-1 
Here are the two approaches I used: 
Option 1:
The problem here is that when the Lightbox is open it works perfectly when advancing to the next image via mouse click on the arrows. However, when using the keyboard arrows or more crucially swiping on mobile, it doesn't advance the caption until a click event from the mouse or a tap on the image. 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){     var texts = document.getElementsByClassName('gallery-caption-content');     $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){         var text = texts[idx]         var id = $(ele).attr('data-slide-url')         if (text) {             $(ele).append('<div id="' + id + '" class="light-caption">'  + text.innerHTML + '</div>');                          if ($(ele).attr('data-active')) {                 $(`#${id}`).css('visibility', 'visible')             }         }     })     $('.gallery-masonry-lightbox-link').click(function() {         var id = $(this).attr('href').split('=')[1]         $('.light-caption').css('visibility', 'hidden')         $(`#${id}`).css('visibility', 'visible')     })     $('.gallery-lightbox').click(function() {         $('.light-caption').css('visibility', 'hidden')         var id = location.search.split('=')[1]         $(`#${id}`).css('visibility', 'visible')     }) }) </script> Option 2: 
This one doesn't have the problem above, but has two other issues: A) It uses the "alt" tag of the image and not the caption / description and B) It has a small glitch that the caption text advances around 1s slower than the image and overlaps briefly, looking a bit odd. 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){     $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){         var text = $(this).find('img').attr("alt");         console.log(text);         $(this).append('<div class="lightbox-caption">' + text + '</div>');     }) }) </script> Judging from the various threads and people with this issue on the forums, it would be good to find a final solution and post it here. Would appreciated anyone's input! 
Thanks!
 

Honestly SquareSpace, this topic has been an embarrassment for you guys. There is a request for in this Forum from 2019.

Same here. I've added the exact code with no changes to my site. What might I be doing wrong?

Just like Envela, I would like to add captions to my images in light box on a gallery page, but when I inserted the custom CSS code exactly as she uploaded here, the change didn't show up!  Any idea why this might be? I've very frustrated.

I answered my own question. Manually enter the html code in the Description or Caption field:
<a href = “/url slug”>Visible Caption</a>