title: Creating an embeddable javascript widget that uses other js libraries
body: <p><strong>Objective</strong></p>
  
  <p>I am trying to build a widget that puts a floating button on my users' sites. On click the button, I would show a web form (that sits on my server) in the form of a lightbox - I am currently using <a href="http://fancyapps.com/fancybox/" rel="nofollow noreferrer">Fancybox</a>.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>In this case my widget relies on two dependent libraries, <code>jQuery</code> and <code>Fancybox</code>. How can I ensure that they are both loaded before I call my fancybox codes to load my URL? I have tried looking at few SO questions (<a href="https://stackoverflow.com/questions/899812/best-practices-for-writing-javascript-widgets">here</a>, <a href="https://stackoverflow.com/questions/2170439/how-to-embed-javascript-widget-that-depends-on-jquery-into-an-unknown-environmen">here</a>, and <a href="https://stackoverflow.com/questions/2411501/creating-a-javascript-widget-for-other-sites">here</a> and some others) and also <a href="http://alexmarandon.com/articles/web_widget_jquery/" rel="nofollow noreferrer">Alex Marandon's great tutorial</a> but they don't seem to rely on another library such as in my case fancybox.</p>
  
  <p>I did something like the below but my main problem was with the Fancybox libraries being loaded asynchronously using <code>$.getScript</code> and hence not available for calling when I called for them few lines after.</p>
  
  <pre><code>/******** Our main function ********/
  function main() {
  jQuery(document).ready(function($) { 
    /******* Load FANCYBOX *******/
    var fancy_link = $("&lt;link&gt;", { 
      rel: "stylesheet", 
      type: "text/css", 
      href: widgetURL + "fancybox/source/jquery.fancybox.css?v=2.1.5",
      media: "screen"
    });
    fancy_link.appendTo('head');
    var fancy2_link = $("&lt;link&gt;", { 
      rel: "stylesheet", 
      type: "text/css", 
      href: widgetURL + "fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7",
      media: "screen"
    });
    fancy2_link.appendTo('head');
  
    var fancyboxScript = widgetURL + "fancybox/source/jquery.fancybox.pack.js?v=2.1.5";
    $.getScript(fancyboxScript);
  
    var fancyboxScript2 = widgetURL + "fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7";
    $.getScript(fancyboxScript2);
  
    /******* Load CSS *******/
    var css_link = $("&lt;link&gt;", { 
      rel: "stylesheet", 
      type: "text/css", 
      href: widgetURL + "myWidget.css" 
    });
    css_link.appendTo('head');
  
    /******* Load Javascript *******/   
  
    var widgetJS = widgetURL + "widgetFunction.js";
    $.getScript(widgetJS); 
  
    /******* Load HTML *******/
    var jsonp_url = widgetURL + "myWidgetCall.php?callback=?";
  
    $.getJSON(jsonp_url,params, function(data) {
      $('#widget-container').html(data.html);
    });
  });
  }
  </code></pre>
  
  <p>I am no expert in this field, so if there are other alternative methods to achieve the same objective stated above, I will be happy to try.</p>