Lightbox *often* loads the image directly

Hi,
thanks for letting me the issue, really the issue is strange. Since it works fine sometimes that means there is a conflict with other plugins, I think it may be related to caching system or plugin. which plugin you are using for cache?

Hey, thanks for getting back to me!
The thing is… I’m not using any caching plugin. I do have Jetpack (free version) installed, but I’ve disabled everything under the “performance” tab.

You can see that it briefly launches the lightbox before navigating to the image.
It feels like the click event is not being stopped after the first handler.

• This reply was modified 1 year, 12 months ago by andrecalil.

Hi,
sorry for being late. I have visited your website and found the lightbox is working fine. Please keep in mind a point is that the lightbox works after finishing the loading images. If you click on the image before loading them properly, the lightbox won’t work as per your expectation.

I noticed you are using all large-size images without any optimization, that’s why it is taking a bit more time to load. I think it is the main reason for them not working the lightbox sometimes. Please try to optimize your images to load them fast.

thanks

Hi Binsaifullah,

Do you mean the preview (image displayed on the page) or the actual image loaded on the lightbox?

I’ve just tried that same page again. I launched it in incognito mode and let it run for a couple minutes, ensuring everything was downloaded. The lightbox wouldn’t work.
Sometimes, if you back from the image URL and click on it again, then the lightbox works.

Are you sure there’s no event bubbling happening?

Hi Binsaifullah,

I think I’ve found the issue!

You’re attaching the magnificPopup plugin to the gallery element. It will trigger the lightbox, but won’t prevent the a click.

On this file, if you change the activation to be #${galleryId} a and remove the delegate: a , it seems to solve the issue!

Could you please take a look?

Also, while you’re there, would you consider changing the preload from 0,1 to 1,1?

Thank you!

—

Update: scratch that, the issue persists. I’m still trying to find out what’s going on.

• This reply was modified 1 year, 11 months ago by andrecalil.

Apparently, WordPress is handling every a click.

I couldn’t find where exactly it’s set, but I’ve modified lightbox.js to be like this:

(function ($) {
	$(document).ready(function () {
        $('.wp-block-migb-masonry-gallery a').attr('href','#');
        $('.wp-block-migb-masonry-gallery').magnificPopup({
            type: 'image',
            delegate: 'img',
            tLoading: '...',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [1,1]
            },
            image: {
                tError: 'Keep scrolling',
                titleSrc: function(item) {
                    return (item.el.attr('title') ?? '') + '<small>por Andre Calil</small>';
                }
            },
            callbacks: {
                elementParse: function(item) {
                    item.src = item.el[0].currentSrc;
                },
            }
        });
	});
})(jQuery);

First I remove all the href, then I set the lightbox to reference the img directly.

thanks for your good try. is it working fine for you?

It is! I just have to tweak the preloader, it’s failing sometimes. Also, I wanna try and make a deeplink feature. Have you ever worked on anything like it?