Manual ajax request with Fancybox

[asmith20002]

Hello,

I need to call my own ajax function and process the success data and then view the result with Fancybox.
Before firing up my own Ajax call, show the fancybox spinner:

Fancybox.getInstance().showLoading()

That doesn't work because no fancybox has been initiated at that point. I tried calling fancybox with an empty container:

		Fancybox.show([{
			src: '',
			type: "html",
		}]);

		let currentFancybox = Fancybox.getInstance();
		currentFancybox.clearContent(currentFancybox.getSlide(0));
		currentFancybox.showLoading(currentFancybox.getSlide(0));;

After that point, I can fire up my own ajax and process data. Once I have the data:

		let currentFancybox = Fancybox.getInstance();
		currentFancybox.hideLoading(currentFancybox.getSlide(0));
		currentFancybox.setContent(currentFancybox.getSlide(0), data);

I did the code above by reading the code on Github. Thought maybe I've missed some obvious and more convenient way. Is that the proper way to do it?

[fancyapps]

Hi,

Or just simply 1) display empty <div> element (with spinner); 2) do your ajax stuff in be background; 3) replace that <div> with your HTML content afterwards.

[asmith20002]

Thanks for the answer.

On a side note: would you consider returning fancybox object in those functions so chaining would be possible?

This code:

		let currentFancybox = Fancybox.getInstance();
		currentFancybox.hideLoading(slide);
		currentFancybox.setContent(slide, data);

could turn into:

Fancybox.getInstance().hideLoading(slide).setContent(slide, data);