title: How to create a pop up picture slide with a different set of pictures
body: <p>I am creating a table in html that shows products and different information. When the user clicks on the product photo in one cell of the table, i want it to open up a picture slider that contains different pictures of that product (those picture urls are saved in their each array) I tried using fancybox but the effect isn't what I am looking for. All the examples of fancybox has all the pictures already on the page, and uses a pop up picture slider to just cycle through them all. I have my code set up like:</p>
  
  <pre><code>&lt;!-- FANCYBOX LINKS NOT INCLUDED IN EXAMPLE --&gt;
        &lt;script&gt; 
              $(document).ready(function(){
                  $('.fancybox-thumbs').fancybox({
                      prevEffect : 'none',
                      nextEffect : 'none',
  
                      closeBtn  : false,
                      arrows    : false,
                      nextClick : true,
  
                      helpers : {
                          thumbs : {
                              width  : 50,
                              height : 50
                          }
                      }
                  });
              });
              function displayPics(aPics){
                  //the pop up carousel slider for more pictures
  
              }
  
              // add pictures as they come
              var CT4by6 = [
                  'images/cargotrailers/4x6/4x6-1.jpg',
              ];
  
               var CT5by8 = [
                  'images/cargotrailers/5x8/5x8-1.jpg',
              ];
  
  
              function showPics(imgNum){
                  switch (imgNum){
                      case 'img1':
                          // pass to function that displays sliders
                          displayPics(CT4by6);
                          break;
  
                      case 'img2':
                          // pass to function that displays sliders
                          displayPics(CT5by8);
                          break;
  
                      default:
                          break;
                  }
              }
  
          &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>             &lt;table class="table table-bordered"&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Trailer Model&lt;/th&gt;
                              &lt;th&gt;Unit Number&lt;/th&gt;
                              &lt;th&gt;Daily Price&lt;/th&gt;
                              &lt;th&gt;Weekend Only*&lt;/th&gt;
                              &lt;th&gt;Weekly**&lt;/th&gt;
                              &lt;th&gt;Monthly**&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;!-- Image --&gt;
                                  &lt;img src="images/cargotrailers/4x6.jpg" id="img1" onclick="showPics('img1')" /&gt;
                              &lt;/td&gt;
                         &lt;/tr&gt;
                  &lt;/table&gt;
  </code></pre>
  
  <p>I am sort of stuck at the point where I can pass the array of picture urls when the appropriate picture is clicked, but this isn't how fancybox works, to my knowledge. Any suggestions?</p>