Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom captions for lightbox


Jessica808

Question

Site URL: https://www.sweetonmaui.com/

Aloha!

I've been reading lots of posts on the editing captions for gallery light boxes, but can't seem to implement the right pieces to get the effect I'm looking for.

My goal is to share photo credits where I need to, but in a subtle way. I thought it would be great to have them appear in the lightbox, so the thumbnail on the gallery page looks clean. I found a piece of code that works to show the caption in the lightbox only, but I don't know enough to then edit it. (see code at the end of the post).

My site is www.sweetonmaui.com.
Click on Gallery > Dessert Gallery to see the example.
First photo of yellow cups - when you click on the lightbox the caption (image description) appears, but not formatted the way I would like.

I'm thinking of a couple of options but not sure yet and hoping to be able to see them on the screen:

 

Option 1

- centered text
- bar same width as photo and align to bottom edge of photo
- smaller font, lower weight font - large enough to read, but small enough to not detract. In other places on my site I've formatted Paragraph 4 to use for photo credits - would be fine to use here too.

 

Option 2

- centered text below photo, in the dark gray color in my palette (no background)
- smaller font, lower weight font - large enough to read, but small enough to not detract. In other places on my site I've formatted Paragraph 4 to use for photo credits - would be fine to use here too.

 

Thanks so much in advance!!!

This is the code I'm using:

<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.getElementsByTagName('p').length != 0){
            var text = itemGallery.getElementsByTagName('p')[0].textContent;
            var itemNeedCaption = itemGalleryLightBox.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: white;
    background-color: rgba(0,0,0,0.5);
}
  @media screen and (max-width:767px) {
.style-gallery-lightbox-text {
    top: 70%;
}
}
</style>

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

The code feels very familiar, it looks like I shared it (I recently wrote new code to handle the lightbox caption)

With option 2, add to Home > Design > Custom CSS

.style-gallery-lightbox-text p {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
On 9/15/2020 at 6:30 PM, DominicB said:

I would also love an answer for option 2.

Above code doesn't work?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...