-2

I am using the latest fancybox 3 library. I am trying to show a loading icon. I have gone through the docs(https://fancyapps.com/fancybox/3/docs/) but it didn't help me much. I see a couple of methods like showLoading() and hideLoading() but its throwing errors in the browser console like they are not functions.

With the old fancybox lib i.e. fancybox 1 I was able to do it by directly calling the functions. Could someone please help me with the latest library ?

RRN
  • 61
  • 1
  • 5
  • 13
  • Fancybox 3 already has a loading icon. Do you want to change it or the animation is not showing? – muecas May 25 '18 at 16:04
  • I want to change the loading icon. However the animation itself is not showing. I just tried $.fancybox.showLoading(); I was expecting this would load the default experience but its not happening. – RRN May 25 '18 at 18:06
  • Does the console outputs any 404 for an asset? I cheched the default instalation of fancybox 3 and it displays a loading animation. – muecas May 25 '18 at 18:20
  • All I did was adding the jQuery.fancybox.min.js and jQuery.fancybox.min.css. I have used version 3.3.5. What have you tried exactly for the loading animation ? Have you called the showLoading function ? – RRN May 25 '18 at 21:18
  • No, it’s the default behavior. Maybe you are testing this locally and the loading time is too short to display the animation. I can post an answer on how to customize the loading animation if you want. – muecas May 25 '18 at 22:31
  • I just get a browser console error saying "Uncaught TypeError: $.fancybox.showLoading is not a function" When I try to open or close the fancybox using the open() and close() functions it works fine. – RRN May 29 '18 at 18:41

1 Answers1

3

To show the loading animation programmatically, you need to do it in the active instance of FancyBox:

// Get the opened instance of fancybox
var instance = $.fancybox.getInstance();

or if you open ir programmatically:

// Get the initialized fancybox
var instance = $.fancybox.open({
    // Your content and options
});

Then you could show or hide the loading animation for the instance like so:

instance.showLoading( slide );
instance.hideLoading( slide );

The loading animation must be shown/hidden on a specific slide.

To customize the loading animation, you can override the default loading template. Then the css is up to you:

// Changes the loading animation when opening a new instance
$.fancybox.open({

    // Loading indicator template
    spinnerTpl: '<div class="your-animation"></div>'

});

// Overrides the default template for all instances
$.fancybox.defaults.spinnerTpl: '<div class="your-animation"></div>';

You can find our more about FancyBox options and api methods here.

Hope it helps.

muecas
  • 4,265
  • 1
  • 8
  • 18
  • Thanks, This helps a lot. But how do we create the slide itself. Is slide an html element where we have the loading indicator image src or content? Can't I show this loading icon on the page itself instead of creating a slide and showing within that ? I am kind of new to this version of fancy box so kind of confused. With the older version it was straight forward. – RRN May 29 '18 at 21:05
  • @RRN I’m not getting what you are trying to achieve. Can you be more specific or create a fiddle to show me so i can further assist you. – muecas May 29 '18 at 21:41
  • After reading the docs further I got clarity on the flow now. I am able to get the loading icon. But in order to show the loading icon we need to get the instance of the fancybox by opening it and within that model/slide we are able to load the icon. Below is the jsfiddle link for that: https://jsfiddle.net/rrn0109/oqjzuh9b/ – RRN May 29 '18 at 22:48
  • However I want to hide that default fancybox popup model and just show the loading icon. For that either is there is any arguments which I need to mention within that open function to hide that modal and just get the instance ? Or I might need to write css to hide that model. I am looking for the corect way to implement it. – RRN May 29 '18 at 22:53
  • @RRN in version 3 you can’t show only the loading without having a slide and a fancybox instance initialized. The loading will show up while loading a slide content. So your goal is to show the loading icon without initializing fancybox am i right? What’s the point of doing that. If it’s just for UI you could show your custom animation then hook to the initialization event and when the instance is initialized, hise your custom loading icon. I think that won’t take long. Those kind of UI and Dom modifications don’t take long so the loading icon will be barely perceptible. – muecas May 29 '18 at 23:00
  • @RRN just checked your fiddle. What you want to achieve? I see the instance created and then the loading animation is shown. What will you do next? Showing an inline HTML element does not need a loading animation. I will take no time to load so there's no point on showing an animation. – muecas May 30 '18 at 12:29
  • That fiddle is just for testing how the loading works. The actual use case is I am calling some backend rest api's and I want to show a loading on the screen until I get the response. This is just for UI purpose. Since my application already has fancybox library integrated I thought of using it. So I changed the implementation a bit now. I am directly opening the fancybox with an animated loading gif instead of opening the fancybox and then calling the showLoading() function for that. – RRN Jun 01 '18 at 21:37
  • @RRN well as a thought, you should use fancybox for its main purpose and create a simple and more versatile loading animation to use while loading data from the server. You could use spin.js http://spin.js.org it’s easy to use and fully customizable. – muecas Jun 01 '18 at 21:49
  • Nice answer. Would be helpful if you also include how to grab the `slide` if not the above code will give error `slide is not defined` – Neel Jul 18 '19 at 13:51
  • @Neel i could help you with that! Just a question, if you are seeing the loading animation why would you like grab the slide? What for? Maybe the grabbing action could be disabled while showing the loading animation programmatically. – muecas Jul 19 '19 at 12:21
  • @muecas Thanks for your reply. I meant, in your answer, you said the loading can be shown as `instance.showLoading( slide )` but the variable `slide` is undefined and I was unable to show the loading animation. I later got it working by adding: `var slide = $.fancybox.getInstance().current;` and then `instance.showLoading( slide )` worked. In fancybox 3, don't we need to grab the slide instance in order to show the loading? thats what I meant. Nevertheless, your answer helped me out. Thank you. – Neel Jul 19 '19 at 14:35
  • 1
    @Neel I thought that the grab was the action of grabbing LOL. Yes the parameter `slide` is required so you could use the method you mentioned to pass the slide. I will edit my answer to add that lil top. Thanks for pointing that out. – muecas Jul 20 '19 at 00:39