Jump to content

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

Recommended Posts

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!

 

Edited by Flore
Link to comment
  • 5 weeks later...
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

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 weeks later...
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!

Link to comment
11 hours ago, 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 https://beyondspace-showcase.squarespace.com/lightbox-studio?noredirect&snapshot=production&package=lightbox-studio&websiteUrl=theflore.com/portfolio-1

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 11/23/2023 at 6:09 AM, Beyondspace 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 😞

Link to comment
9 hours ago, 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 😞

You can visit the url on mobile...

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.