Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 19, 2015 at 10:21 am #520791
    lapajnea

    Hello,

    I’d like to disable masonry gallery lightbox on our Gallery page for mobile phones (screen width < 768).

    I found somewhere that you can add “noLightbox” class to an image to prevent it from opening in the lightbox. However, it doesn’t work in masonry gallery.

    To which element do I have to add “noLightbox” class so that the image wouldn’t open in lighbox?

    I plan to add the “noLightbox” class with jQuery. If you have a better solution, please share.

    October 19, 2015 at 7:36 pm #521150
    Elliott

    Hi lapajnea!

    I’m not sure if this CSS works for mobiles but we can try it. 

    @media screen and (max-width: 767px) {
.av-masonry-container a {
    pointer-events: none !important;
}
}

    Best regards,
    Elliott

    October 20, 2015 at 6:35 am #521388
    lapajnea

    Oh, I think I wasn’t clear enough. I DON’T want to disable clicks on the images.

    When clicked on an image in masonry gallery on mobile, I want to show the image normally, instead of showing it in lightbox.

    October 20, 2015 at 9:25 pm #522013
    Elliott

    Hi!

    Hmm, we can disable it on both desktop and mobile but I’m not sure about only mobile, that is probably going to be quite difficult.

    Best regards,
    Elliott

    October 21, 2015 at 6:57 am #522141
    lapajnea

    Using the “noLightbox” class doesn’t apply in this case?

    October 22, 2015 at 4:15 pm #523078
    Elliott

    Hey!

    It would disable it for both desktop and mobile.

    Regards,
    Elliott

    October 23, 2015 at 6:21 am #523468
    lapajnea

    Why? I’d add it with jQuery just for smaller screens.

    Just tell me which element I need to add that class to.

    • This reply was modified 10 years ago by lapajnea.
    October 23, 2015 at 4:18 pm #523954
    Elliott

    Hey!

    The magnific popup will select all images surrounded with a link so you just need to target the link surrounding each image. If you view your source code you’ll see the link has a class of “av-masonry-entry” so you can use that to target them.

    Regards,
    Elliott

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.