Lightbox issues on mobile

I Need Help
1

So Lightbox isn’t really doing it for me

Most of my customers access the site on mobile devices. Regardless of what option I use, my pics glitch when being zoomed in and out. Often it will flick to the next or previous picture, and the scaling is odd and non linear.

Is there a way to adjust this behaviour?

I’m assuming there isn’t. Alternatively are there custom blocs available which will suit my needs better?

Thanks for your time

2

Yeah,I agree it’s not the best at all, the loading of large images is jerky as you say.

Have you looked at Iconic Gallery by @Jannis, it’s really good. I recommend it.

3 Likes
3

Are you finding the pinch zoom gesture on mobile is causing unwanted navigation clicks?

4

Yes, sir, that’s the major issue

My pictures are clinical photography, and I’m assuming people will want to zoom in to look at the detail. Works well on desktop, but on mobile devices it’s frankly horrible trying to do this:

Also, the caption text can obscure and not scale properly

1 Like
5

You can adjust the light box caption text.

I’ll see if I can improve the conflict with zoom and taps.

3 Likes
6

Thank you Norm!

7

Just to add, that I have installed Iconic Gallery. Works really well and looks great - thanks Jannis!

I needed to tweak CSS slightly to make the captions display better on mobile devices but I was able to do that within Blocs (thanks to ChatGPT)

I also needed to convert my site from HTML to PHP, which is something I should have done ages ago. Transition was flawless with barely any adjustments needed. Blocs 6 is powerful AF

2 Likes
8

That’s great to hear! Just wanted to answer you. Perfect timing :sweat_smile:

1 Like
9

This was the code in Additional CSS:

@media screen and (max-width: 768px) {
  #baguetteBox-overlay .full-image figcaption {
    position: absolute !important;
    bottom: auto !important;
    top: calc(100% - 180px) !important; /* Moves caption up */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    width: auto !important;
    max-width: 90% !important;
    background: rgba(0, 0, 0, 0.9) !important;
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    color: white !important;
    border-radius: 5px !important;
    z-index: 9999 !important;
  }
}

My pics are all square which is why captions are so high

1 Like