Lightbox captions only?

8 hours ago, Flore said:

Thank you - this solution has the problem of the text not advancing in line with the image, there's a small delay in my test. 

Can you share a link to your site? 

I'm working on formatting the caption, so not got a working version to show atm. But this code shouldn't have the delay, at least for desktop, it worked perfectly when I copied and pasted the code. 

Not tested on mobile! Is it just the mobile you're having trouble with? Or desktop and mobile?

16 hours ago, melody495 said:

I'm working on formatting the caption, so not got a working version to show atm. But this code shouldn't have the delay, at least for desktop, it worked perfectly when I copied and pasted the code. 

Not tested on mobile! Is it just the mobile you're having trouble with? Or desktop and mobile?

Hey, the issue I had was on desktop as well, and a few other people have it too (I think in this thread). That's why I was curious to see how it works for you.

I have someone who is fixing it for me at the moment. Will post result once I got it. 

On 9/26/2023 at 1:40 PM, Flore said:

I have tried to do the same (adding Image description on SS 7.1 on the Lightbox of a Gallery section with Masonry style (I managed to sort out the hover on that etc, just missing some formatting and styling).

The problem I have though 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. 

Anyone knows how to fix that? 

Here's the code I used: 

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

On another note, there is another code that doesn't have this problem, but uses the "alt" tag of the image and not the caption / description. Maybe it can be modified. 

It has a small glitch (I saw someone else note this already but don't recall in which thread) 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>

(For anyone else wanting to use these two ways, they require CSS styling).

My site is public: https://theflore.com/portfolio-1 

You're almost there, you're missing some styling code to set the visibility. Check this link. Under <script> there is a block of <style>. 

https://forum.squarespace.com/topic/164356-lightbox-captions-only/?do=findComment&comment=646704

16 hours ago, melody495 said:

You're almost there, you're missing some styling code to set the visibility. Check this link. Under <script> there is a block of <style>. 

https://forum.squarespace.com/topic/164356-lightbox-captions-only/?do=findComment&comment=646704

Thanks, the styling etc is all done and works, that wasn't the issue, I just didn't mention it here.
I found someone who was willing to fix the issue with the swipe and click forward for me.

I'm still curious to see if yours works differently / without this fix though, so once it's presentable I'm curious to see it. 

1 hour ago, Flore said:

Thanks, the styling etc is all done and works, that wasn't the issue, I just didn't mention it here.
I found someone who was willing to fix the issue with the swipe and click forward for me.

I'm still curious to see if yours works differently / without this fix though, so once it's presentable I'm curious to see it. 

Site not live, but I've attached a video below. I've done styling but the code I linked worked as is (again, just desktop and clicks, not a concern for my need about arrows and mobile swipe). Tight with time atm, but happy to look at this for you if you still need help in a week or so.

Good luck!

5 hours ago, melody495 said:

Site not live, but I've attached a video below. I've done styling but the code I linked worked as is (again, just desktop and clicks, not a concern for my need about arrows and mobile swipe). Tight with time atm, but happy to look at this for you if you still need help in a week or so.

Good luck!

I wonder if yours works because it's a Gallery block, not a Gallery section in 7.1. 

1 hour ago, Flore said:

I wonder if yours works because it's a Gallery block, not a Gallery section in 7.1. 

It's a Gallery section 7.1. But you can add the class you need to the code if it's the right one.

You haven't shared your full code, so hard to check. But if you've used the same code and still getting overlap issue, it sounds to me the visibility is not being set properly. There are a few places it gets set in the code, both script and style, so could be missed easily. I definitely messed it up way too many times modifying the original code to format the layout.

On 10/17/2023 at 8:02 AM, JimOldman said:

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?!

On 7/14/2023 at 11:55 AM, tuanphan said:

Can you share link to page where you use masonry?

https://lute-lychee-5bck.squarespace.com/config/pages/website-tools/code-injection?itemId=1hb2axjx68jvy9vgglinq1dzu3jokt%3FitemId%3D1hb2axjx68jvy9vgglinq1dzu3jokt%3FitemId%3D1hb2axjx68jvy9vgglinq1dzu3jokt%3FitemId%3D1hb2axjx68jvy9vgglinq1dzu3jokt

If you click on Painting, this is closest I have got so far using a previous/2020 bit of css from one of your entries

On 10/22/2023 at 12:45 AM, JimOldman said:

 

https://lute-lychee-5bck.squarespace.com/config/pages/website-tools/code-injection?itemId=1hb2axjx68jvy9vgglinq1dzu3jokt%3FitemId%3D1hb2axjx68jvy9vgglinq1dzu3jokt%3FitemId%3D1hb2axjx68jvy9vgglinq1dzu3jokt%3FitemId%3D1hb2axjx68jvy9vgglinq1dzu3jokt

 

If you click on Painting, this is closest I have got so far using a previous/2020 bit of css from one of your entries

 

/config/* is url for site owner, if you edit page > you will see an arrow on top left or top right > click on it > real url will show on browser address bar, you can send me this url

Thanks tuanphan, url is https://lute-lychee-5bck.squarespace.com/new-page-1

On 10/25/2023 at 1:01 PM, JimOldman said:

Thanks tuanphan, url is https://lute-lychee-5bck.squarespace.com/new-page-1

Thank you. What is password?

https://lute-lychee-5bck.squarespace.com/new-page-1?noredirect

amanaplanpanama

hi,

I understand this is a real long thread, but I want to check something before I'm going to try an other solution.

I have used the code from @tuanphan  ( if I'm not mistaken 👍 ) to show the caption from a gallery in a lightbox. This works. I would like to add a link to an other internal page in the caption. This link doesn't work when the code is active, but when the code isn't active the link works.

Code place in Footer in Code Injection

<!-- Place caption in lightbox | Masonary Grid -->
<
<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: helvetica;
    font-weight: 100;
  	color:grey;
    font-size: 13px;
    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>

<!-- End - Place caption in lightbox | Masonary Grid -->

Code in description 

<b>Scalda</b> Campagne <a href="https://www.google.com">External site</a>

My question is; Is it possible to use a link in the caption in the lightbox, or is this not possible? And if it's possible, can anyone help with the javascript code? I Understand the basics of css but not from javascript.

Thanks!

Link to page with code enabled in Code Injection Footer:

https://www.kentin.net/advertising

On 10/31/2023 at 6:45 PM, Frick74 said:

hi,

I understand this is a real long thread, but I want to check something before I'm going to try an other solution.

I have used the code from @tuanphan  ( if I'm not mistaken 👍 ) to show the caption from a gallery in a lightbox. This works. I would like to add a link to an other internal page in the caption. This link doesn't work when the code is active, but when the code isn't active the link works.

Code place in Footer in Code Injection

<!-- Place caption in lightbox | Masonary Grid -->
<
<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: helvetica;
    font-weight: 100;
  	color:grey;
    font-size: 13px;
    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>

<!-- End - Place caption in lightbox | Masonary Grid -->

Code in description 

<b>Scalda</b> Campagne <a href="https://www.google.com">External site</a>

My question is; Is it possible to use a link in the caption in the lightbox, or is this not possible? And if it's possible, can anyone help with the javascript code? I Understand the basics of css but not from javascript.

 

Thanks!

Link to page with code enabled in Code Injection Footer:

https://www.kentin.net/advertising

 

 

Add this code under

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

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.

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);
        }
      }
    }
  });
});

8 hours ago, PhotographerM said:

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);
        }
      }
    }
  });
});

We can set background for text, then you won't see problem.

Can you share link to your site? We can check easier

Also, if your site is expired, we can also help to extend it for free, just share site url

Thank you so much to everyone on this thread! I have the captions in the light box but would greatly appreciate some assistance on a couple issues: 

Issue 1:
I'm just having an issue with the captions overlapping the image. I have four lines of caption, and only the last two are outside the image area. This is an issue on both desktop and mobile. Is there a way to make the image resize when the browser window is enlarged/condensed so it never goes below the top line of text?

Issue 2:
I'd like the caption text to align with the left side of the image. Right now it's in the middle. Is there any way to do this?

Here is the site. https://www.jeff-castleman.com/portfolio/photography The issues can be seen in the first two images in this gallery (the lips and the lighter).

Thank you,
-Jeff

1 hour ago, Hombre_de_Castillo said:

Thank you so much to everyone on this thread! I have the captions in the light box but would greatly appreciate some assistance on a couple issues: 

Issue 1:
I'm just having an issue with the captions overlapping the image. I have four lines of caption, and only the last two are outside the image area. This is an issue on both desktop and mobile. Is there a way to make the image resize when the browser window is enlarged/condensed so it never goes below the top line of text?

Issue 2:
I'd like the caption text to align with the left side of the image. Right now it's in the middle. Is there any way to do this?

Here is the site. https://www.jeff-castleman.com/portfolio/photography The issues can be seen in the first two images in this gallery (the lips and the lighter).

Thank you,
-Jeff

#1. You want to move up text or move down under image?

#2. It is not possible, I guess so. See screenshot, The image code is the blue part, but the real image is not equal to the image code. When aligning text, you can only align it according to the blue part, you cannot align it according to the image, each image has a different size, the text will be skewed.

Thank you @tuanphan for the quick response! 

#1: I'd like to move the text down so it's under the image.

#2: That makes sense. Thank you for explaining.

One more thing: I'm also noticing that the font is different on desktop and mobile. I'm using Aktiv Grotesk on my site, so I inserted that into the code for the captions, like this:

.light-caption {
    visibility: hidden;
    position: fixed;
      font: p2;
      font-family: aktiv grotesk;
      color:black;
    font-size: 14px;
    line-height: 1.4em;
      text-align: center;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

It seems to work on desktop but on mobile it looks like a default serif font (maybe Times New Roman?).

Thanks again for the help!

I'm also having the issue of the previous caption remaining visible for about one second after clicking to the next image in the lightbox. Once the pages are cached the captions load normally, but the delay occurs.

I'm only having the issue on desktop, on mobile the captions load fine. Has anyone had any success figuring this out?

Thanks!

On further inspection, it looks like the captions only lag when using the the keyboard arrow keys to advance the image. On chrome when I use the arrow keys sometimes the caption for the next image doesn't even show up. The old caption remains for about a second, then just goes blank.

It now looks fine to me, include font

Yes, when I make the caption one line it's okay. But when I make the caption two lines or more the text overlaps the image depending on the browser window size.

I attached an image where the title is overlapping the image a bit, and it goes even further into the image if I make the browser window smaller.

Only the bottom line of text stays out of the image. Is there a way to add padding around the entire text block? Or a way to increase the space around the bottom of the image to make room for a second line of text?

Okay I think I got it! I used the following code to reduce the size of the lightbox by 10%, which gives the second line of caption text enough room and scales pretty well when the browser window is resized.

.gallery-lightbox-item img {
    top: 0 !Important;
    height: 90% !important;
}

If you wanna see how it works... https://www.jeff-castleman.com