title: Fancybox 2 and Swipe Slider do not work together
body: <p>I want to create a <a href="http://fancyapps.com/fancybox/" rel="nofollow">fancybox</a> with the <a href="http://swipejs.com/" rel="nofollow">Swipe image slider</a> inside. By following the instructions in the how-to page of fancybox, I create a hidden div where my slider will be put.</p>
  
  <pre><code>&lt;div style="display:none"&gt;
    &lt;div id="hidden" &gt;
      &lt;div id="mySwipe" class='swipe'&gt;
        &lt;div class='swipe-wrap'&gt;
          &lt;div&gt;&lt;b&gt;0&lt;/b&gt;&lt;/div&gt;
          &lt;div&gt;&lt;b&gt;1&lt;/b&gt;&lt;/div&gt;
          &lt;div&gt;&lt;b&gt;2&lt;/b&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div style='text-align:center;padding-top:20px;'&gt;
        &lt;button onclick='mySwipe.prev()'&gt;prev&lt;/button&gt;
        &lt;button onclick='mySwipe.next()'&gt;next&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I use such hidden content to populate a fancybox:</p>
  
  <pre><code>&lt;p align="center"&gt;&lt;a class="fancybox" href="#hidden"&gt;Click me&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Unfortunately that has some problem I have the slider with empty (or hidden?) content. In other words I am not getting the slideshow 0 -> 1 -> 2.</p>
  
  <p>I suppose that this problem is caused by the 'display:none' style. In fact if I take this out, the slideshow is working, but it shows the hidden content and I don't want this.</p>
  
  <p>Here I report you the head of my html:</p>
  
  <pre><code>&lt;!-- Add JQuery --&gt;
  &lt;script type="text/javascript" src="js/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Add Swipe Slider --&gt;
  &lt;script src="js/slider/swipe.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  /* Swipe 2 required styles */
  
  
  .swipe {
      overflow: hidden;
      visibility: hidden;
      position: relative;
  }
  .swipe-wrap {
      overflow: hidden;
      position: relative;
  }
  .swipe-wrap &gt; div {
      float: left;
      width: 100%;
      position: relative;
  }
  
  /* END required styles */
  &lt;/style&gt;
  
  &lt;!-- Add Fancybox --&gt;
  &lt;link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /&gt;
  &lt;script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(e) {
      $(".fancybox").fancybox();
      var elem = document.getElementById('mySwipe');
      window.mySwipe = Swipe(elem, {});
      });
  &lt;/script&gt;
  </code></pre>