Wednesday, October 9, 2013

If Fancybox library does not work, this might be due to the conflicts with other JS libraries and not the syntax error.

If you happen to miss it, Fancybox is a little nice JavaScript plug-in for displaying images in a pop-up window (Lightbox style) without leaving the same web page. Installation takes just a few minutes and consists of adding JQuery library, Fancybox JavaScript file and FancyBox CSS file. Finally you need to mark the hyperlinks with a custom class and fire the plug-in in document.ready handler for example like this: 

 $(document).ready(function() { 
$(".fancybox").fancybox();
});

In 99% of cases this works like a charm, but sometimes it just does not. I myself encountered the following problems in my experience: 

  • Syntax errors. Mostly happen when I occasionally miss or mistype the class or ID on hyperlink (the one that is specified when firing the plugin). 
  • The error "MSIE underfined". This one is widely covered on the Internet and is basically a bug in the script. The easiest fix is to upgrade your Fancybox to the latest version (2.1.5 at the time of writing). 
  • Conflicts with other libraries. That is the most difficult part really. Usually you never suspect this can happen and spend hours and hours trying to figure out what is missed or mis-typed. 

If you've already spent more than 10-15 minutes and it still does not work (worse - does not even show any errors in the debugger console), this means it is potentially a conflict with other scripts. 

I am aware of at least two potential conflicts: 

  • With Twitter Bootstrap library (the one which is widely used to make a responsive design). This issue has been addressed in some places already. 
  • With JQuery Validate library - I had to switch this library off (mainly because I didn't use it anyway). 

So the general advice would be to temporarily comment out all scripts except for Fancybox and JQuery and once that minimal configuration works (it should really!), uncomment other scripts one by one, hence identifying the root of the problem. 

 


RECENT BLOG ENTRIES
30 November 2013
Bigcommerce template editing
How to change content in BigCommerce.com templates: guide for a complete newbie.
Read full story
09 October 2013
What if Fancybox does not work at all
If Fancybox library does not work, this might be due to the conflicts with other JS libraries and not the syntax error.
Read full story
14 October 2012
Fancybox with ASP.NET form on Umbraco
Using ASP.NET form on Fancybox popup to make login window
Read full story

Blog archive

The author of this web-site supports WWF . Please do your part in saving our planet!

Alex’s expertise in developing and maintaining web applications has been invaluable to the College – J. Wittersheim, Director of Information Management and Funding, Bury College