showLoading

[WebProWWW]

Hello,

I want to show progress when opening and perform an ajax request, but when you open it, first a white box is shown, then progress.
I would like the progress to be immediately shown when opening, like in a gallery.
How can I do that?

var fancybox = new Fancybox([{
    // Tried the html type too {src:'<div></div>', type:'html'}
    src: '#form',
    type: 'inline'
}]);

/*** I tried this at first ***/
fancybox.on('done', function(fb, slide) {
    fb.showLoading(slide);
});

/*** Then I tried this, but the progress is not shown here ***/
fancybox.on('reveal', function(fb, slide) {
    fb.showLoading(slide);
});

/*** I tried that too, but no progress is shown here either. ***/
fancybox.on('Carousel.createSlide', function(fb, carousel, slide) {
    fb.showLoading(slide);
});

I tried in all the events that fancybox.on('*',cb);
In all cases, an empty white box is shown first, then progress

2023-10-06.11.18.42.mov

[WebProWWW]

Got the desired result!
Progress was triggered in the Carousel.createSlide event when a slide was specified without the src parameter, specifying only the type
I don’t know if this is the right solution, but it works :)
I would be very grateful if you could suggest a better solution.

var fancybox = new Fancybox([{
    type: 'inline'
}]);
fancybox.on('Carousel.createSlide', function(fb, carousel, slide) {
    fb.showLoading(slide);
    /*** After ajax is done ***/
    fb.setContent(slide, 'html string');
    fb.hideLoading(slide);
});

2023-10-06.12.19.49.mov

[fancyapps]

Hi,

Your code looks fine, if you do not want to use built-in ajax type (https://fancyapps.com/fancybox/plugins/html/#ajax).

[WebProWWW]

Thanks for the reply.
At least I know it'll be done properly :)
And thanks for your efforts. Fancyapps is the best and most beautiful library!