Lightbox captions only?

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?

On 1/15/2024 at 4:09 AM, tuanphan said:

What is your site url?

It's https://cymbals-plum-9nnp.squarespace.com/

PW cuttingedge

9 hours ago, redtailcreative said:

It's https://cymbals-plum-9nnp.squarespace.com/

PW cuttingedge

Which page/section are you referring to?

11 hours ago, tuanphan said:

Which page/section are you referring to?

https://cymbals-plum-9nnp.squarespace.com/staff 

12 hours ago, redtailcreative said:

https://cymbals-plum-9nnp.squarespace.com/staff 

If you mean these captions, SS controls this, we can't adjust it

I'm also trying to place the captions within Lightbox below the images rather than over.

You can see the problem in the first 3 images on this page.

https://www.sebhiggins.com/lakedistrict

Please help,

Thanks,
Seb

20 hours ago, Seblaise said:

I'm also trying to place the captions within Lightbox below the images rather than over.

You can see the problem in the first 3 images on this page.

https://www.sebhiggins.com/lakedistrict

Please help,

Thanks,
Seb

I see you figured it out with Beyon Space Lightbox Plugin?

Unfortunately not. The captions are still over the image instead of below.

It's more obviously an issue on mobile view.

Hi,

Can anyone help me with placing my captions under my images within Lightbox.
As seen in the image, they are over my photograph. I'd like them not to interfere with the image. Both on desktop and mobile view.

You can also see the problem in the first 3 images on this page.

https://www.sebhiggins.com/lakedistrict

16 hours ago, Seblaise said:

Hi,

Can anyone help me with placing my captions under my images within Lightbox.
As seen in the image, they are over my photograph. I'd like them not to interfere with the image. Both on desktop and mobile view.

You can also see the problem in the first 3 images on this page.

https://www.sebhiggins.com/lakedistrict

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

@media screen and (max-width:767px) {
[bs-lightbox-caption-position=overlay] .fancybox__slide.has-image .fancybox__caption {
    bottom: 0 !important;
}
}

Thank you. That's great for mobile view!.. Is it possible to do it for desktop too?

Also. Sorry to be really fussy. But is it possible to put the caption just underneath the image rather than right at the bottom of the page?

Image height is different so I can't find a code to align them under image

You try contacting Plugin Author, maybe he know a solution for this?

Ok, thanks.

Is there any code to do the same thing for desktop view?

Try changing the code to this

[bs-lightbox-caption-position=overlay] .fancybox__slide.has-image .fancybox__caption {
    bottom: 0 !important;
}

Unfortunately that doesn't seem to make any difference.

Is there any other code that might work?

Thanks

I see it already in bottom

If you look closely it is still over the actual photo rather than below it.

Is there a code that places it below rather than on the image for desktop?

Thanks and sorry for the back and forth, I appreciate the help!

Hi @tuanphan

So I think the problem is that I need to reduce the size of the images within the Lightbox.

As you can see in the screenshots, when I reduce the browser the caption goes below the image rather than on it.

Would you know a code to reduce the images when opening them up in Lightbox?

Thanks

You should contact plugin author, he can help to solve these problem easier

To reduce size, try using this to Custom CSS box

.fancybox-image {
    max-width: 500px !important;
}

How do I find out who my plugin author is as I've forgotten?

On 2/27/2024 at 5:46 PM, Seblaise said:

How do I find out who my plugin author is as I've forgotten?

Where did you purchase lightbox plugin? You can check there, I think you can find their email

Hi All, 

I'm using this CSS code injection to header but I can't adjust font or positioning of the caption. It crosses over the image at the bottom on desktop and through the bottom 2/3rds on mobile. Any idea how to fix?

<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: center;
}

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

10 hours ago, ELPage said:

Hi All, 

I'm using this CSS code injection to header but I can't adjust font or positioning of the caption. It crosses over the image at the bottom on desktop and through the bottom 2/3rds on mobile. Any idea how to fix?

<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: center;
}

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

Can you share link to page in your site, we can check code easier