Select Page

Improving mobile compatibility of the photo gallery lightbox

Last updated on

I’ve recently discovered that the mobile compatibility of native image gallery light boxes is broken. As you can see, large images extend beyond the bounds of a mobile phone’s screen:

Broken lightbox functionality

 

That’s the bad news. The good news is the fix is simple, provided you’re comfortable getting your hands wet with a small template modification.

Using the built-in design source editor, insert this snippet of code just before the closing </body>  tag in your site template(s):

The snippet doesn’t require any extra dependencies as it uses LightCMS’s built-in version of jQuery. It will check if any photo galleries are present and, if so, strip out the system-generated lightbox functionality. Then, using the exact same plugin, we reinitialize the light boxes with proper mobile configuration.

You’ll potentially need to update your CSS to style the new lightbox to suit your needs, but you should now see that your photos are no longer being cropped or extending off the screen:

Fixed lightbox functionality

About Denny

I'm a developer who specializes in working with agencies, freelancers, and website owners to take their LightCMS-based sites to the next level. Get in touch if you'd like to learn how I can help with your next LightCMS project.