Lightbox captions only?

Tuan, an iPad. Thank you. 

On 5/10/2024 at 2:37 AM, lisah123123 said:

Hi!

I have managed to follow the instructions so that the caption is only visible when I hover over the image. However, it is not possible to click on the image so it appears as a lightbox? Could that be solved? I only have Personal plan and i'm trying to avoid business plan. 

Thank you so much for all the help so far!!

Could you share your site URL and show us the image where you put the links on the image?

Thanks a lot for all the very helpful comments! 

Would it possible to make the Caption in the Lightbox (only) 
Like the below? on Desktop and Mobile? 

URL to gallery: https://samuel-leon.com/sekem-1

Thanks a lot in advance,

Samuel 

11 hours ago, SamLeon said:

Thanks a lot for all the very helpful comments! 

Would it possible to make the Caption in the Lightbox (only) 
Like the below? on Desktop and Mobile? 

 

URL to gallery: https://samuel-leon.com/sekem-1

Thanks a lot in advance,

Samuel 

You mean make text has a white background?

Yes and alignment to the right... :) 

18 hours ago, SamLeon said:

Yes and alignment to the right... 🙂

Can't make white box equal width with image, it will something like this

div.tlightbox-caption {
    width: 100%;
    text-align: right;
    background-color: white;
}

On 5/27/2024 at 9:00 AM, tuanphan said:

Can't make white box equal width with image, it will something like this

div.tlightbox-caption {
    width: 100%;
    text-align: right;
    background-color: white;
}

@tuanphan

Is it a typo?

div.tlightbox-caption {

On 6/21/2020 at 5:54 AM, tuanphan said:

Enable Caption first, then add this to Home > Settings > Advanced > Code Injection > Header

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

Code from another member on Forum.

Could you help me figure out why this doesn't work for me @tuanphan or someone else?

I'm trying to use a grid gallery to show artist bios on an event page.

https://www.ontheboards.org/events/24-25/javaad-alipoor

I was hoping that when the lightbox opens, it shows the photo on left side, followed by the caption on the right, as black text on a solid white background. Also it should switch to vertical stack on mobile. 

6 hours ago, VladaKremenovic said:

Could you help me figure out why this doesn't work for me @tuanphan or someone else?

I'm trying to use a grid gallery to show artist bios on an event page.

https://www.ontheboards.org/events/24-25/javaad-alipoor

I was hoping that when the lightbox opens, it shows the photo on left side, followed by the caption on the right, as black text on a solid white background. Also it should switch to vertical stack on mobile. 

You mean customize current lightbox to your request?

On 6/19/2024 at 1:07 AM, tuanphan said:

You mean customize current lightbox to your request?

Yes, exactly. 

7 hours ago, VladaKremenovic said:

Yes, exactly. 

You can use this to Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:768px) {
.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder img {
    width: 50% !important;
    position: absolute !important;
    height: auto !important;
}
.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder .sqs-lightbox-meta {
    position: absolute !important;
    top:10px;
    left: calc(~"50% + 50px") !important;
}
}

On 6/21/2020 at 10:54 PM, tuanphan said:

Enable Caption first, then add this to Home > Settings > Advanced > Code Injection > Header

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

Code from another member on Forum.

Thanks for this but it doesn't appear to work on my site, any assistance greatly appreciated.

https://sepia-koala-36ck.squarespace.com/gallery

5 hours ago, AdamBlyth said:

Thanks for this but it doesn't appear to work on my site, any assistance greatly appreciated.

https://sepia-koala-36ck.squarespace.com/gallery

It is old code, use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.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('<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-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>

2 hours ago, tuanphan said:

It is old code, use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.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('<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-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>

 

Thank you - that worked for adding the Lightbox descriptions.

A slight issue is sometimes when I first click on an image and the lightbox opens, there is no caption unless I click away from the image, like I have to activate the caption on click and then it appears on all images as I use the Lightbox controls as I click through each image.

https://sepia-koala-36ck.squarespace.com/gallery

18 hours ago, AdamBlyth said:

Thank you - that worked for adding the Lightbox descriptions.

A slight issue is sometimes when I first click on an image and the lightbox opens, there is no caption unless I click away from the image, like I have to activate the caption on click and then it appears on all images as I use the Lightbox controls as I click through each image.

https://sepia-koala-36ck.squarespace.com/gallery

Try this code under

<style>
  p.light-caption {
    visibility: visible !important;
}
</style>

Hi everyone, 

I am trying to have descriptions appearing only underneath the images lightbox and NOT on the thumbnail grid but somehow none of the CSS codes I found on the forum do anything. 

Do you know what it might be due to ? 

Thank you for your help !!! 

On 6/23/2024 at 10:03 AM, tuanphan said:

It is old code, use this new code

 

I created an account just to thank you for this @tuanphan. It worked perfectly for me. Thanks a lot !

On 7/3/2024 at 8:46 PM, PLoughran said:

Hi everyone, 

 

I am trying to have descriptions appearing only underneath the images lightbox and NOT on the thumbnail grid but somehow none of the CSS codes I found on the forum do anything. 

Do you know what it might be due to ? 

 

Thank you for your help !!! 

 

What is your URL? Share it here so we can take a look

Hi there! First of all, thank you for the code that helps captions/descriptions only appear in lightbox. Soooo helpful.

I've come across some sort of glitch where the captions don't adjust/display when I scroll through images in lightbox mode. They only come up correctly when I escape and click on the correct picture. 

I used the new code from tuanphan from 6/23/24 and even added the important visibility style addition that solved someone else's similar (though not exact) problem. 

Any ideas?

Here's my website: https://www.bobowickcollection.com/collection1

19 hours ago, KAF13 said:

Hi there! First of all, thank you for the code that helps captions/descriptions only appear in lightbox. Soooo helpful.

 

I've come across some sort of glitch where the captions don't adjust/display when I scroll through images in lightbox mode. They only come up correctly when I escape and click on the correct picture. 

 

I used the new code from tuanphan from 6/23/24 and even added the important visibility style addition that solved someone else's similar (though not exact) problem. 

 

Any ideas?

 

Here's my website: https://www.bobowickcollection.com/collection1

I tried click Arrows in Lightbox and captions show fine

Hm. It still doesn't work on desktop for me when I scroll, but it does work on mobile. Any thoughts? I kinda doubt it's my computer

3 hours ago, KAF13 said:

Hm. It still doesn't work on desktop for me when I scroll, but it does work on mobile. Any thoughts? I kinda doubt it's my computer

This is me trying to scroll through images on desktop browser, looks like the caption can change correctly

Hm interesting. Well fingers crossed it's only happening for me!

Thanks for looking all

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!

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

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