Finding a real solution for 7.1. Lightbox Captions (willing to pay)

For a few weeks I've been trying to find a clean solution for the 7.1 lightbox on Gallery pages. It should support: 

• Styling in the description text of the images (i.e. via html tags and CSS) to be able to use formatting and margins
• Swipe to go to next image on Mobile 
• Using keyboard arrow on Desktop 
• Using mouse click on arrow on Desktop 
• Advance cleanly at the same time as the image as text 

Here's my current solution with my own (questionable) html and CSS, but with code from these forums: https://theflore.com/portfolio-1 

Here are the two approaches I used: 

Option 1:

The problem here is that when the Lightbox is open it works perfectly when advancing to the next image via mouse click on the arrows. However, when using the keyboard arrows or more crucially swiping on mobile, it doesn't advance the caption until a click event from the mouse or a tap on the image. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.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('<div id="' + id + '" class="light-caption">'  + text.innerHTML + '</div>');
            
            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>

Option 2: 

This one doesn't have the problem above, but has two other issues: A) It uses the "alt" tag of the image and not the caption / description and B) It has a small glitch that the caption text advances around 1s slower than the image and overlaps briefly, looking a bit odd. 

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

Judging from the various threads and people with this issue on the forums, it would be good to find a final solution and post it here. Would appreciated anyone's input! 

Thanks!

Quick update, I wrote to a lot of developers on different sites I found online, but no one seems to be willing or able to find a solution for this. If anyone else knows someone, please share.

On 10/8/2023 at 9:51 PM, Flore said:

Quick update, I wrote to a lot of developers on different sites I found online, but no one seems to be willing or able to find a solution for this. If anyone else knows someone, please share.

@Flore Let's check the dedicated Live Playground of Lighbox Studio to see if it work for you?

PS1: Great photos, btw!

PS2: I'm the author of the plugin

On 11/7/2023 at 5:14 AM, Beyondspace said:

@Flore Let's check the dedicated Live Playground of Lighbox Studio to see if it work for you?

PS1: Great photos, btw!

PS2: I'm the author of the plugin

 

Hey, thanks a lot - that actually looks very cool - I did find a kind of solution in the meantime but this looks more sophisticated. I'll take a look 🙂

Appreciate the comment on the photos, thank you!

On 11/23/2023 at 12:10 AM, Flore said:

Hey, thanks a lot - that actually looks very cool - I did find a kind of solution in the meantime but this looks more sophisticated. I'll take a look 🙂

Appreciate the comment on the photos, thank you!

You check it working on your page with this URL The Flore in playground

On 11/23/2023 at 6:09 AM, Beyondspace said:

You check it working on your page with this URL https://beyondspace-showcase.squarespace.com/lightbox-studio?noredirect&snapshot=production&package=lightbox-studio&websiteUrl=theflore.com/portfolio-1

Hey, it works really well. Does it work well on Mobile also? 

My current solution is kind ok for me though, so it's maybe a bit expensive now because I already paid before. Wish I had seen it before 😞

On 11/25/2023 at 8:40 PM, Flore said:

Hey, it works really well. Does it work well on Mobile also? 

My current solution is kind ok for me though, so it's maybe a bit expensive now because I already paid before. Wish I had seen it before 😞

Yes, it works on mobile as well, which is the initial reason why this plugin was made