Lightbox Images Not Displaying Correctly on Mobile

[maglio]

The default lightbox functionality works great on desktop, but on mobile it does not display correctly:
Tapping a photo on mobile jumps the scroll position and you must tap/drag to have the photo appear on-screen. Additionally, the lighbox container around photos is styled incorrectly.

If it’s not possible to resolve this, I’m also happy to disable the lightbox functionality included in the theme so I can install another plugin.

I’ve tried disabling plugins and installing other lightbox plugins. When another lighbox plugin is installed it either doesn’t do anything or displays in addition to the default lightbox functionality.

I will include log-in details in a private message in case you want to take a look.

Thank you!

[maglio]

This reply has been marked as private.

[Raghavendra]

The width issue of the lightbox details bar at the bottom can be fixed easily. Will provide the custom CSS for the same. The jump to the top on clicking the lightbox though is a little perplexing since we do not have this issue in our Dev and demo sites. I am trying to find a solution. Will get back.

[Raghavendra]

I have inserted the required custom css into your site for width issue. But I am unable to modify the JS file due to lack of directory permissions perhaps. Can you pls make this change ion line number 416 in themes/agile/js/main.js and see if that helps ?

            $("a[rel^='prettyPhoto']").prettyPhoto({
                "theme": theme_selected, /* light_rounded / dark_rounded / light_square / dark_square / facebook */
                social_tools: false, deeplinking: false
            });

[Author]

Posts