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

Show Caption in Lightbox 71.


Recommended Posts

Site URL: https://jonathan-gaber.squarespace.com/work/bricks

I was following this topic from a previous post but it seems my request for help got lost. As so many others, I am looking for a solution to show a caption in lightbox. The code below works but looks awful as it sits oddly on the art work. The other part of this is that I have added code to the caption to control bold and line breaks specific to art. 

If anyone can help I would be grateful and if anyone knows how to request this be added to 7.1 even better. 

Thank you!

------

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

.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: .35em
    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 comment

It looks like I posted above script code.

Use this new code

<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="lightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.lightbox-caption {
    color: white;
    font-weight: bold;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -65px;
    z-index: 9999;
}
.gallery-lightbox-wrapper:hover {
	cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
	display: inline-block;
}
  .gallery-lightbox .lightbox-caption {
    display: block !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...