title: fancybox, make slideshow with images and divs that are not the gallery
body: <p>I am using the jQuery <a href="http://fancyapps.com/fancybox/" rel="nofollow">fancybox</a> plugin to create an image gallery. User clicks on an image and then a modal shows up to navigate through all the images. Up to this point, everything is done with the following code .</p>
  
  <p>But <strong>the change I want to do</strong> is in the modal slide show. The slideshow needs to show  the particular image that was clicked on plus other images which are not in the gallery plus extra <code>div</code>s. Those extra images and <code>divs</code> may stay anywhere in the code. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a class="fancybox" href="img/a_small.jpg" data-fancybox-group="gallery" title="Project"&gt;
  &lt;img src="img/a_big.jpg"    alt="image project"/&gt;
  &lt;/a&gt;
  
  &lt;a class="fancybox" href="img/b_small.jpg" data-fancybox-group="gallery" title="Project"&gt;
  &lt;img src="img/b_big.jpg"    alt="image project"/&gt;
  &lt;/a&gt;
  
  &lt;a class="fancybox" href="img/c_small.jpg" data-fancybox-group="gallery" title="Project"&gt;
  &lt;img src="img/c_big.jpg"    alt="image project"/&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.fancybox').fancybox({
      padding: 0,
      openEffect : 'elastic',
      openSpeed  : 150, 
      closeEffect : 'elastic',
      closeSpeed  : 150,
      closeClick : true,
      'autoSize': false,
      'autoWidth'    : 600,
      'autoScale'     : false,
      'transitionIn'  : 'none',
      'transitionOut' : 'none',
      'type'          : 'swf',
      'autoCenter ' :true,
      'aspectRatio':true
  });
  </code></pre>
  
  <p>1) How to achieve that ?</p>
  
  <p>2) If fancybox is not a good fit, is there any other script that will help to achieve the purpose in a responsive design way ?</p>
  
  <p><strong>EDIT:</strong>
  An online demo is <a href="http://demo2.lumierebd.com/" rel="nofollow">here</a>.</p>