Flore

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 😞

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!

I wonder if yours works because it's a Gallery block, not a Gallery section in 7.1.

Thanks, the styling etc is all done and works, that wasn't the issue, I just didn't mention it here. I found someone who was willing to fix the issue with the swipe and click forward for me. I'm still curious to see if yours works differently / without this fix though, so once it's presentable I'm curious to see it.

Hey, the issue I had was on desktop as well, and a few other people have it too (I think in this thread). That's why I was curious to see how it works for you. I have someone who is fixing it for me at the moment. Will post result once I got it.

Thank you - this solution has the problem of the text not advancing in line with the image, there's a small delay in my test. Can you share a link to your site?

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.

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!

Does anyone have a clue how to address this? Willing to pay for a solution.

I have tried to do the same (adding Image description on SS 7.1 on the Lightbox of a Gallery section with Masonry style (I managed to sort out the hover on that etc, just missing some formatting and styling). The problem I have though 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. Anyone knows how to fix that? Here's the code I used: <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> On another note, there is another code that doesn't have this problem, but uses the "alt" tag of the image and not the caption / description. Maybe it can be modified. It has a small glitch (I saw someone else note this already but don't recall in which thread) 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> (For anyone else wanting to use these two ways, they require CSS styling). My site is public: https://theflore.com/portfolio-1