Tagged: lightbox, magnific popup
Hi, I am trying to show the preloader of magnigic popup for images, but it does not load the image.
It opens the lightbox. It shows the “loading” and “finished loading” texts. But no image, only the message that says that “the image could not be loaded”.I customized the file at wp-content/plugins/mediapress/assets/js/mpp.js and changed the line where it says:
`jQuery.magnificPopup.open({
items: items,
type: ‘inline’, // <——- Here I changed inline to image to activate the preloader.
closeBtnInside: false,
preload: [0, 0],
closeOnBgClick: true,
showCloseBtn: true,
preloader: true, // I added this also.
…
`
It works fine with type: ‘inline’, but not with type type: ‘image’. Any help is appreciated, thanks.Hi,
Thank you for the question.we can not use the type image as we load custom html and the media directly. Image type is used when you ask the popup to load media directly.
I am not aware if magnific popup supports preloader for inline content or not.
Regards
BrajeshIs there another way to show a “loading” message?. My issue is that it takes too long to load the inline lightbox, and the user clicks an image without any immediate feedback.
This may work for you
https://dimsemenov.com/plugins/magnific-popup/documentation.html#preloaderI haven’t tested it. Will test tomorrow.
I will also suggest troubleshooting why the loading is slow.
Regards
BrajeshHi, thanks for the help so far, where you able to test that option?, it does not work for inline media when I tested it.
Maybe its slow because I have a shared hosting server?, anyway, I think a “loading” message would be really useful even for users with slower internet connections.Hi,
I had a look and I do see that the preloader does not work with inline content.The problem is inline content loads immediately and it is the image inside the content which takes time to load.
Currently, I am not seeing any direct way other than implementing our own loading indicator for image(something like lazy loading).
Regards
Brajesh
You must be logged in to reply to this topic.