title: jQuery ui tabs using ajax and fancybox
body: <p>I have a page with several tabs where fancybox is used in them, all works well until you select the second tab, then the fancybox stops working.</p>
  
  <p>Main page :</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;WebShop&lt;/title&gt;      
  
      &lt;link rel="stylesheet" type="text/css" href="/includes/igepa.css" /&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"&gt;&lt;/script&gt;    
  
      &lt;script&gt;
      $(function() {
          $( "#tabs" ).tabs({
              beforeLoad: function( event, ui ) {
                  $('.ui-tabs-hide').empty();  
                  ui.jqXHR.error(function() {
                      ui.panel.html(
                          "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                          "If this wouldn't be a demo." );
                  });
              },
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="tabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="test.htm"&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="test.htm"&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>test.htm :</p>
  
  <pre><code>&lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
  
          &lt;link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /&gt;
          &lt;link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" /&gt; 
          &lt;link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" /&gt;    
  
          &lt;script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="http://www.igepa.be/includes/jqgridOpenSource/js/i18n/grid.locale-nl.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;                
  
          &lt;script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.pack.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-media.js"&gt;&lt;/script&gt;   
          &lt;script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.js"&gt;&lt;/script&gt;           
  
          &lt;script&gt;
              $(document).ready(function(){   
                  $(".fancybox").fancybox();              
              });             
          &lt;/script&gt;
      &lt;/head&gt;
  
  &lt;body&gt;
      &lt;a class="fancybox" rel="group" href="http://www.igepa.be/img/items/01-0000-0002Big.jpg"&gt;&lt;img src="http://www.igepa.be/img/items/01-0000-0002.jpg" /&gt;&lt;/a&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Example : <a href="http://www.igepa.be/phdj/tabs/tab.htm" rel="nofollow">http://www.igepa.be/phdj/tabs/tab.htm</a></p>