Question

I’m currently using fancyBox 2. Works like a charm, great tool. Just one little thing: I’d like to disabled the loading icon, but I have no idea in which callback I should put it. This is the code I’m using:

$("a.iframe").each(function () {
  $(this).fancybox({
    'openEffect': 'elastic',
    'closeEffect': 'elastic',
    'margin': 0,
    'padding': 0,
    'topRatio': 0.1,
    'scrolling': 'no',
    'modal': true,
    'type': 'iframe',
    'afterLoad': function () {
      $.fancybox.hideLoading();
    },
    'afterShow': function () {
      var heightPane = $('.fancybox-iframe').contents().find('#content').height();
      $('.fancybox-iframe').contents().find('#pane2').css({
        'height': heightPane + 'px',
        'overflow': 'auto'
      })
    }
  })
});

Putting $.fancybox.hideLoading(); in the afterLoad callback doesn’t do a thing. The loading icon still appears. I’ve even put the methode before the function, bit still the icon appears.

Anyone know what to do?

Answer 1

As a workaround, try adding a css inline declaration (after you loaded the fancybox css file):

#fancybox-loading {display: none !important;}

There is an option imgPreload which isn’t well documented and I assume it suppose to work for that (either replace the loading icon or cancel it)