Lightbox captions only?

59 minutes ago, HoaLT said:

 

5 hours ago, GabrielD said:

Hi,

I've used the code from @tuanphan , and it works perfectly on desktop. However, on mobile, the arrows are on top of the images and don't align very well. What I want to do instead is hide the arrows and use a swipe to switch between images on mobile. I tried to ask ChatGPT for help, but it can't figure it out without messing up the captions.

Does anyone here know a solution to this problem?

Thanks!

Expand  

Can you share your URL here so we can check it more easily?

 

Sorry, forgot that.

https://bumblebee-harp-k75n.squarespace.com/automotive

Password: rayan

7 minutes ago, GabrielD said:

Sorry, forgot that.

https://bumblebee-harp-k75n.squarespace.com/automotive

Password: rayan

This is the best thing i can set style for the arrow on mobile

@media only screen and (max-width: 767px){
  .gallery-lightbox-control[data-previous] button {
    margin-left: -5.5vw;
  }

  .gallery-lightbox-control[data-next] button {
    margin-right: -5.5vw;
  }
}

The action to pinch zoom on lightbox I have no idea

32 minutes ago, HoaLT said:

This is the best thing i can set style for the arrow on mobile

@media only screen and (max-width: 767px){
  .gallery-lightbox-control[data-previous] button {
    margin-left: -5.5vw;
  }

  .gallery-lightbox-control[data-next] button {
    margin-right: -5.5vw;
  }
}

Thank you. This worked in order to get the arrows further out, but when looking more closely on mobile and desktop the arrows don't align the same on both sides.

34 minutes ago, HoaLT said:

This is the best thing i can set style for the arrow on mobile

@media only screen and (max-width: 767px){
  .gallery-lightbox-control[data-previous] button {
    margin-left: -5.5vw;
  }

  .gallery-lightbox-control[data-next] button {
    margin-right: -5.5vw;
  }
}

The action to pinch zoom on lightbox I have no idea

Oh, that I don't want, sorry if I was unclear. What I do want if possible is to hide the arrows on mobile and use swipe instead.

Hi @tuanphanI tried the new code to create captions for light boxed images but it doesn't seem to be working... 

could you help see where I am going wrong? 🙂

Thank you! https://www.coreyceccarelli.com/home

4 hours ago, Ceccarelli said:

Hi @tuanphanI tried the new code to create captions for light boxed images but it doesn't seem to be working... 

could you help see where I am going wrong? 🙂

Thank you! https://www.coreyceccarelli.com/home

 

Which code are you using? Can you share it here?

21 hours ago, Ceccarelli said:

Hi @tuanphanI tried the new code to create captions for light boxed images but it doesn't seem to be working... 

could you help see where I am going wrong? 🙂

Thank you! https://www.coreyceccarelli.com/home

 

It doesn't work because you haven't enabled Caption yet

4 hours ago, tuanphan said:

It doesn't work because you haven't enabled Caption yet

Hi @tuanphan, Thank you! I just emailed as the captions are enabled but the problem is persisting 🙂

21 hours ago, HoaLT said:

Which code are you using? Can you share it here?

Thank you! I am using this code: 

<script>
function createNodeCaption(textContent){
    var divElement = document.createElement("div");
    var pElement = document.createElement("p");
    pElement.innerHTML = textContent;
    divElement.classList.add("style-gallery-lightbox-text");
    divElement.appendChild(pElement);
    return divElement;
}
$( document ).ready(function() {
    var itemGallery = document.getElementsByClassName('gallery-grid-item');
    var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item');
    var countGalleryItem = itemGallery.length;

    for(var i = 0; i < countGalleryItem; i++){

 if(itemGallery[i].getElementsByTagName('p').length != 0){
            var text = itemGallery[i].getElementsByTagName('p')[0].textContent;
            var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0];
            itemNeedCaption.appendChild(createNodeCaption(text));
        }
    }
});

</script>
<style>
  figcaption.gallery-caption.gallery-caption-grid-simple {
    display: none;
}
.style-gallery-lightbox-text {
    padding: 10px 0px 25px 0px;
    display: block;
    position: absolute;
    left: 50%;
    top: 90%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: .3em
    text-align: left;
}

.style-gallery-lightbox-text p {
    width: 90%;
    padding: 10px 15px;
    margin: auto;
    color: white;
    background-color: rgba(0,0,0,0.5);
}
  @media screen and (max-width:767px) {
.style-gallery-lightbox-text {
    top: 70%;
}
}
</style>

20 hours ago, Ceccarelli said:

Hi @tuanphan, Thank you! I just emailed as the captions are enabled but the problem is persisting 🙂

Have you added caption to Images yet? 

3 hours ago, tuanphan said:

Have you added caption to Images yet? 

yes in the simple grid gallery on the homepage they are enabled 

20 hours ago, Ceccarelli said:

yes in the simple grid gallery on the homepage they are enabled 

Your code missing jQuery Library Link. If code has not this library, it won't work.

add this line to top of Code Injection Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

5 hours ago, tuanphan said:

Your code missing jQuery Library Link. If code has not this library, it won't work.

add this line to top of Code Injection Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Thank you that worked! Any idea why it would work for some images but not the others? Also can you advise on how I could get the captions to appear below the image instead of across it?  🙂 Thank you 🙂 

7 minutes ago, Ceccarelli said:

Thank you that worked! Any idea why it would work for some images but not the others? Also can you advise on how I could get the captions to appear below the image instead of across it?  🙂 Thank you 🙂 

6 hours ago, tuanphan said:

Your code missing jQuery Library Link. If code has not this library, it won't work.

add this line to top of Code Injection Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Also the wrong captions are appearing for the image. For example Image 1 is showing Image 14's caption? 

13 hours ago, Ceccarelli said:

 

Also the wrong captions are appearing for the image. For example Image 1 is showing Image 14's caption? 

Try this new code

On 8/23/2024 at 5:27 AM, tuanphan said:

Try this new code

 

Hi @tuanphuan and thread, this still isn't working for me unfortunately - now I have 2 captions on Lightbox but its the wrong caption for each image and some have none too - you can check it out if you take a look at the first gallery on the homepage here www.coreyceccarelli.com - thanks in advance 🙂

19 minutes ago, Ceccarelli said:

Hi @tuanphuan and thread, this still isn't working for me unfortunately - now I have 2 captions on Lightbox but its the wrong caption for each image and some have none too - you can check it out if you take a look at the first gallery on the homepage here www.coreyceccarelli.com - thanks in advance 🙂

Figured it out 🙂

Hello

I am having the same issues. I tried implementing your code in the Code Injection but it's not working.
Could you please help me out? https://dreisicht.squarespace.com/home-1 pw: SF2024.

I added descriptions to the images in the gallery but they don't appear in the Lightbox. 

Thank you very much!
Natasa

18 hours ago, hello_studiofrey said:

Hello

I am having the same issues. I tried implementing your code in the Code Injection but it's not working.
Could you please help me out? https://dreisicht.squarespace.com/home-1 pw: SF2024.

I added descriptions to the images in the gallery but they don't appear in the Lightbox. 

Thank you very much!
Natasa

/home-1 doesn't work. Can you check url again?

Hi @tuanphan, I'm sorry it's https://dreisicht.squarespace.com/home
Pw: SF2024 

Hi! It would be so incredibly helpful if someone would be able to let me know how I could make the caption under the images in this portfolio gallery visible in lightbox. Thank you in advance for your help! 

https://www.mirakallio-tavin.com/paintings/project-one-ephnc-4f5cb

I'm afraid I can't share login details but even general suggestions would help. For instance, is it enough to use the image's uploaded file name to target the specific image in CSS? 

On 9/24/2024 at 7:32 PM, hello_studiofrey said:

Hello

I am having the same issues. I tried implementing your code in the Code Injection but it's not working.
Could you please help me out? https://dreisicht.squarespace.com/home-1 pw: SF2024.

I added descriptions to the images in the gallery but they don't appear in the Lightbox. 

Thank you very much!
Natasa

I see you haven't enabled gallery caption yet. You need to enable it, then the code should work.

You can hover on Gallery > Edit Section > Enable Gallery Caption.

12 hours ago, Aada said:

Hi! It would be so incredibly helpful if someone would be able to let me know how I could make the caption under the images in this portfolio gallery visible in lightbox. Thank you in advance for your help! 

https://www.mirakallio-tavin.com/paintings/project-one-ephnc-4f5cb

I'm afraid I can't share login details but even general suggestions would help. For instance, is it enough to use the image's uploaded file name to target the specific image in CSS? 

With your case, just use code in this thread, it should show caption in lightbox.

Hi @tuanphan, thank you for your help, the captions are enabled but the injection code still doesn't work. You can see the captions in the gallery under the images, but not in the lightbox. However, I would need it to be exactly the other way around - not visible in the gallery but only in the lightbox. Attached you can see where the code is injected - in the settings of the home page. Any idea of what I could be doing wrong?

Thank you very much!

1 hour ago, hello_studiofrey said:

Hi @tuanphan, thank you for your help, the captions are enabled but the injection code still doesn't work. You can see the captions in the gallery under the images, but not in the lightbox. However, I would need it to be exactly the other way around - not visible in the gallery but only in the lightbox. Attached you can see where the code is injected - in the settings of the home page. Any idea of what I could be doing wrong?

Thank you very much!

The provided snippet you get is for Grid layout while you are using Masonry layout, thus making it not working

I'd give some context for the code so other can use for their use case

- Website URL: https://dreisicht.squarespace.com/home?password=SF2024

- Gallery layout: 7.1 Gallery Section: Masonry layout

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
function createNodeCaption(textContent){
	var divElement = document.createElement("div");
	var pElement = document.createElement("p");
	pElement.innerHTML = textContent;
	divElement.classList.add("style-gallery-lightbox-text");
	divElement.appendChild(pElement);
	return divElement;
}
$( document ).ready(function() {
    var itemGallery = document.getElementsByClassName('gallery-masonry-item');
	var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item');
	var countGalleryItem = itemGallery.length;

	for(var i = 0; i < countGalleryItem; i++){
		if(itemGallery[i].getElementsByTagName('p').length != 0){
			var text = itemGallery[i].getElementsByTagName('p')[0].textContent;
			var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0];
			itemNeedCaption.appendChild(createNodeCaption(text));
		}
	}
});

</script>
<style>
  figcaption.gallery-caption.gallery-caption-grid-masonry {
    display: none;
}
.style-gallery-lightbox-text {
    padding: 10px 0px 25px 0px;
    display: block;
    position: absolute;
    left: 50%;
    top: 100%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    text-align: left;
}

.style-gallery-lightbox-text p {
    width: 90%;
    padding: 10px 15px;
    margin: auto;
    color: white;
    background-color: rgba(0,0,0,0.5);
}
  @media screen and (max-width:767px) {
.style-gallery-lightbox-text {
    top: 70%;
}
}
</style>

14 hours ago, Aada said:

Hi! It would be so incredibly helpful if someone would be able to let me know how I could make the caption under the images in this portfolio gallery visible in lightbox. Thank you in advance for your help! 

https://www.mirakallio-tavin.com/paintings/project-one-ephnc-4f5cb

I'm afraid I can't share login details but even general suggestions would help. For instance, is it enough to use the image's uploaded file name to target the specific image in CSS? 

Your are using 7.1 Gallery section layout Grid: Strips, so the selectors are different from the above answer

 - Website URL: https://www.mirakallio-tavin.com/paintings/project-one-ephnc-4f5cb?itemId=318iz2zajr3uv9s4kmir3cbue5w5b9

- Gallery layout: 7.1 Gallery Section: Strips layout

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
      <script>
function createNodeCaption(textContent){
	var divElement = document.createElement("div");
	var pElement = document.createElement("p");
	pElement.innerHTML = textContent;
	divElement.classList.add("style-gallery-lightbox-text");
	divElement.appendChild(pElement);
	return divElement;
}
$( document ).ready(function() {
    var itemGallery = document.getElementsByClassName('gallery-strips-item');
	var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item');
	var countGalleryItem = itemGallery.length;

	for(var i = 0; i < countGalleryItem; i++){
		if(itemGallery[i].getElementsByTagName('p').length != 0){
			var text = itemGallery[i].getElementsByTagName('p')[0].textContent;
			var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0];
			itemNeedCaption.appendChild(createNodeCaption(text));
		}
	}
});

</script>
<style>
  figcaption.gallery-caption.gallery-caption-grid-strips {
    display: none;
}
.style-gallery-lightbox-text {
    padding: 10px 0px 25px 0px;
    display: block;
    position: absolute;
    left: 50%;
    top: 95%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: 1.3em;
    text-align: left;
}

.style-gallery-lightbox-text p {
    width: 90%;
    padding: 10px 15px;
    margin: auto;
    color: white;
    background-color: rgba(0,0,0,0.5);
}
  @media screen and (max-width:767px) {
.style-gallery-lightbox-text {
    top: 70%;
}
}
</style>

On 9/3/2024 at 10:50 PM, Ceccarelli said:

Figured it out 🙂

Folk are using different type of layout

 - Website URL: https://www.coreyceccarelli.com/

- Gallery layout: 7.1 Gallery Section: Simple layout

Code below from this reply

<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="tlightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.tlightbox-caption {
    color: #656565;
    margin: 10px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -45px;
    z-index: 9999;
}
.gallery-lightbox-wrapper {
	cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .tlightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;
}
</style>
<style>
  div:not(.gallery-lightbox-wrapper) p.gallery-caption-content {
    display: none;
}
</style>