Lightbox captions only?

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

I've been through 8 pages of this discussion and have had NO luck getting captions on Lightbox (while being hidden on the masonry grid). It's a an artist's portfolio and its a pretty simple ask. Not sure why it is not natively available on SQuarespace. Can anyone help please? Thanks in advance. 

On 3/23/2024 at 2:04 PM, taradesigns said:

I've been through 8 pages of this discussion and have had NO luck getting captions on Lightbox (while being hidden on the masonry grid). It's a an artist's portfolio and its a pretty simple ask. Not sure why it is not natively available on SQuarespace. Can anyone help please? Thanks in advance. 

You can follow code in this comment

On 7/22/2023 at 1:40 AM, tuanphan said:

Add to Code Injection > Footer

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

 

Hello Tuan,

this injection has worked great for me but there are a few issues. Firstly, is it possible to make it so the captions only appear in the lightbox? Right now they show up outside of the lightbox as well. Also is it possible to change the color and font to align with the rest of my website? Here is a page I am trying to accomplish this on: https://lancewilson.com/portfolio/mountains