Lightbox captions only?

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 

Still having two issues with the lightbox. Any help would be greatly appreciated.

1) In the lightbox, the arrow keys (on desktop) only trigger the image to advance. When advancing images using the arrow key, the caption for the previous image remains visible for about one second, then the captions disappear entirely.

2) When the lightbox is closed then reopened, it opens with the caption for the last viewed image visible, which disappears after about a second. If using clicks to advance the images the correct caption shows up for the next image, but if using arrows to advance the images no caption appears (as mentioned above).

My site is https://www.jeff-castleman.com

Not sure if this is a java or CSS issue, and my knowledge of both is basically non-existent, so I'm at a loss. 

Thanks in advance for any time anyone spends to figure this out!

--Jeff

Hi @tuanphan

Thank you for this code! All is working well on my site except I'm trying to use this as a way to feature bios for my client's salon and there seems to be a character limit. 

Is there any way to increase this? It's cutting off my image description after a few lines.

7 hours ago, redtailcreative said:

Hi @tuanphan

Thank you for this code! All is working well on my site except I'm trying to use this as a way to feature bios for my client's salon and there seems to be a character limit. 

Is there any way to increase this? It's cutting off my image description after a few lines.

What is your site url?