title: Open fancybox programmatically within pano2vr panorama
body: <p>I'm trying to open  a fancybox from within a pano2vr panorama. I have a click on a hotspot within the panorama trigger a call like so: javascript:centeredPopup(17);</p>
  
  <p>In the underlying page I have:</p>
  
  <pre><code>function centeredPopup(id){
   $.fancybox.open({
   'autoScale': true,
   'transitionIn': 'elastic',
   'transitionOut': 'elastic',
   'speedIn': 500,
   'speedOut': 300,
   'autoDimensions': true,
   'centerOnScroll': true,
   'href' : 'popup.asp?qID='+id;
  });
  }
  
  $(document).ready(function(e) {
  //alert('started');
  $(".fancybox")
  .attr('rel', 'gallery')
  .fancybox({
      type: 'iframe',
      autoSize : false,
      beforeLoad : function() {         
          this.width  = parseInt(this.element.data('fancybox-width'));  
          this.height = parseInt(this.element.data('fancybox-height'));
      }
  });
  </code></pre>
  
  <p>Alas no fancybox appears.</p>
  
  <h1>Full HTML below:</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
  &lt;script src="jquery-2.0.3.js"&gt;&lt;/script&gt;
  &lt;script src="shadowbox-3.0.3/shadowbox.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /&gt;
  &lt;script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function hideUrlBar() {
  
          document.getElementsByTagName("body")[0].style.marginTop="1px";
          window.scrollTo(0, 1);
      }
      window.addEventListener("load", hideUrlBar);
      window.addEventListener("resize", hideUrlBar);
      window.addEventListener("orientationchange", hideUrlBar);
  
      function centeredPopup(id){
           $.fancybox.open({
           'autoScale': true,
           'transitionIn': 'elastic',
           'transitionOut': 'elastic',
           'speedIn': 500,
           'speedOut': 300,
           'autoDimensions': true,
           'centerOnScroll': true,
           'href' : 'popup.asp?qID='+id
          });
      }
  
      $(document).ready(function(e) {
      //alert('started');
          $(".fancybox")
          //.attr('rel', 'gallery')
          .fancybox({
              type: 'iframe',
              autoSize : false,
              beforeLoad : function() {         
                  this.width  = parseInt(this.element.data('fancybox-width'));  
                  this.height = parseInt(this.element.data('fancybox-height'));
              }
          });
      });
  &lt;/script&gt;
  
  &lt;style type="text/css" title="Default"&gt;
      body, div, h1, h2, h3, span, p {
          font-family: Verdana,Arial,Helvetica,sans-serif;
          color: #000000; 
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
      }
      body {
        font-size: 10pt;
        background : #ffffff; 
      }
      table,tr,td {
          font-size: 10pt;
          border-color : #777777;
          background : #dddddd; 
          color: #000000; 
          border-style : solid;
          border-width : 2px;
          padding: 5px;
          border-collapse:collapse;
      }
      h1 {
          font-size: 18pt;
      }
      h2 {
          font-size: 14pt;
      }
      .warning { 
          font-weight: bold;
      } 
      /* fix for scroll bars on webkit &amp; Mac OS X Lion */ 
      ::-webkit-scrollbar {
          background-color: rgba(0,0,0,0.5);
          width: 0.75em;
      }
      ::-webkit-scrollbar-thumb {
          background-color:  rgba(255,255,255,0.5);
      }    
  &lt;/style&gt;    
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript" src="pano2vr_player.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="skin.js"&gt;
  &lt;/script&gt;
  &lt;div id="container" style="width:1024px;height:768px;"&gt;
  This content requires HTML5/CSS3
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      // create the panorama player with the container
      pano=new pano2vrPlayer("container");
      // add the skin object
      skin=new pano2vrSkin(pano);
      // load the configuration
      pano.readConfigUrl("hotspots.xml");
      // hide the URL bar on the iPhone
      hideUrlBar();
  &lt;/script&gt;
  &lt;noscript&gt;
      &lt;p&gt;&lt;b&gt;Please enable Javascript!&lt;/b&gt;&lt;/p&gt;
  &lt;/noscript&gt;
  
  &lt;a class="fancybox" href="popup.asp?qID=17" data-fancybox-width="300" data-fancybox-height="300"&gt;Open 500x200&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>