How to get Fancybox working with my Javascript?

How to get Fancybox working with my Javascript?

I really hope this is the correct place for this.... I'm pretty much a novice at JQuery, but I seem to have come off allright with Javascript. I wrote a gallery that works something like a Rubiks-cube, where the rows and column contents can get swapped around.

Here's a link: http://www.taunise.com/testi/index.html

What I'd like to do is implement fancybox so I can get the nice popup fullsize images for each gallery item.

My problem is, I load the images dynamically by calling a function on pageload that pulls the image code out of the array and into the divs.

I can't seem to get fancybox working with this....I am thinking it might be because of the dynamic content.

Anyone got an insight? feel free to rip apart my code....

here' the jist of my javascript:

  1. $(document).ready(function() {
  2.             /*
  3.             *   Examples - images
  4.             */
  5.             $("a#example2").fancybox({
  6.                 'titleShow'        : false,
  7.                 'transitionIn'    : 'elastic',
  8.                 'transitionOut'    : 'elastic'
  9.             });
  10.            
  11.         });
  12.               // setup the main array
  13.               var row1Array = Array("<a id=\"example2\" href=\"images/image1.jpg\"><img src=\"images/image1_thumb.jpg\" /></a>", "<img src=\"images/image2_thumb.jpg\" />", "<img src=\"images/image3_thumb.jpg\" />", "<img src=\"images/image4_thumb.jpg\" />", "<img src=\"images/image5_thumb.jpg\" />", "<img src=\"images/image6_thumb.jpg\" />");
  14.               var row2Array= Array("<img src=\"images/image7_thumb.jpg\" />", "<img src=\"images/image8_thumb.jpg\" />", "<img src=\"images/image9_thumb.jpg\" />", "<img src=\"images/image10_thumb.jpg\" />", "<img src=\"images/image11_thumb.jpg\" />", "<img src=\"images/image12_thumb.jpg\" />");
  15.               var colArray = Array("<img src=\"images/image13_thumb.jpg\" />", row1Array[2], row2Array[2], "<img src=\"images/image16_thumb.jpg\" />", "<img src=\"images/image17_thumb.jpg\" />", "<img src=\"images/image18_thumb.jpg\" />");
  16.              
  17.               function iniGallery() {
  18.                   insertArray("row1");
  19.                 insertArray("row2");
  20.                 insertArray("col");
  21.                }
  22.  
  23.               // insert the array into the DIV smalltest object
  24.               function insertArray(toChange)
  25.               {
  26.                      var theText = "";  // set the theText output to an empty string otherwise it would start with null.
  27.                     
  28.                      if (toChange == "row1") {
  29.                          // create the array of text to insert
  30.                          theText = row1Array[0];
  31.                          //alert(theText);
  32.                          // create the createTextNode
  33.                          var insertText = document.createTextNode(theText);
  34.                          //document.getElementById("row1img1").appendChild(insertText);
  35.                         document.getElementById('row1img1').innerHTML = theText;
  36.                          // create the array of text to insert
  37.                          theText = row1Array[1];
  38.                     
  39.                          // create the createTextNode
  40.                          var insertText = document.createTextNode(theText);
  41.                          //document.getElementById("row1img2").appendChild(insertText);
  42.                          document.getElementById('row1img2').innerHTML = theText;
  43.                        
  44.                          // create the array of text to insert
  45.                          theText = row1Array[2];
  46.                     
  47.                          // create the createTextNode
  48.                          var insertText = document.createTextNode(theText);
  49.                          //document.getElementById("row1img3").appendChild(insertText);
  50.                         document.getElementById('row1img3').innerHTML = theText;
  51.                        
  52.                         //update col
  53.                         colArray[1] = row1Array[2];
  54.                      }
  55.                      else if (toChange == "row2") {
  56.                          // create the array of text to insert
  57.                          theText = row2Array[0];
  58.                          //alert(theText);
  59.                          // create the createTextNode
  60.                          var insertText = document.createTextNode(theText);
  61.                          //document.getElementById("row1img1").appendChild(insertText);
  62.                         document.getElementById('row2img1').innerHTML = theText;
  63.                          // create the array of text to insert
  64.                          theText = row2Array[1];
  65.                     
  66.                          // create the createTextNode
  67.                          var insertText = document.createTextNode(theText);
  68.                          //document.getElementById("row1img2").appendChild(insertText);
  69.                          document.getElementById('row2img2').innerHTML = theText;
  70.                        
  71.                          // create the array of text to insert
  72.                          theText = row2Array[2];
  73.                     
  74.                          // create the createTextNode
  75.                          var insertText = document.createTextNode(theText);
  76.                          //document.getElementById("row1img3").appendChild(insertText);
  77.                         document.getElementById('row2img3').innerHTML = theText;
  78.                         colArray[2] = row2Array[2];
  79.                      }
  80.                      else if (toChange == "col") {
  81.                          // create the array of text to insert
  82.                          theText = colArray[0];
  83.                          //alert(theText);
  84.                          // create the createTextNode
  85.                          var insertText = document.createTextNode(theText);
  86.                          //document.getElementById("row1img1").appendChild(insertText);
  87.                         document.getElementById('colimg1').innerHTML = theText;
  88.                        
  89.                         theText = colArray[1];
  90.                          //alert(theText);
  91.                          // create the createTextNode
  92.                          var insertText = document.createTextNode(theText);
  93.                          //document.getElementById("row1img1").appendChild(insertText);
  94.                         document.getElementById('row1img3').innerHTML = theText;
  95.                        
  96.                         theText = colArray[2];
  97.                          //alert(theText);
  98.                          // create the createTextNode
  99.                          var insertText = document.createTextNode(theText);
  100.                          //document.getElementById("row1img1").appendChild(insertText);
  101.                         document.getElementById('row2img3').innerHTML = theText;
  102.                        
  103.                          // create the array of text to insert
  104.                          theText = colArray[3];
  105.                     
  106.                          // create the createTextNode
  107.                          var insertText = document.createTextNode(theText);
  108.                          //document.getElementById("row1img2").appendChild(insertText);
  109.                          document.getElementById('colimg4').innerHTML = theText;
  110.                        
  111.                      }
  112.                      
  113.               }
  114.               function next(arrayName) {
  115.                   var tempArray = Array();
  116.                   //var i = 0;
  117.                   //alert(row1Array.length);
  118.                   if (arrayName == "row1") {
  119.                       for (i = 0; i < row1Array.length; i++) {
  120.                           tempArray[i] = row1Array[i];
  121.                           }
  122.                          for (n = 1; n < row1Array.length; n++) {
  123.                           row1Array[n] = tempArray[n-1];
  124.                           }
  125.                           row1Array[0] = tempArray[row1Array.length - 1];
  126.                           colArray[1] = row1Array[2];
  127.                         insertArray("row1");
  128.                        
  129.                   }
  130.                   else if (arrayName == "row2") {
  131.                       for (i = 0; i < row2Array.length; i++) {
  132.                           tempArray[i] = row2Array[i];
  133.                           }
  134.                          for (n = 1; n < row2Array.length; n++) {
  135.                           row2Array[n] = tempArray[n-1];
  136.                           }
  137.                           row2Array[0] = tempArray[row2Array.length - 1];
  138.                         colArray[2] = row1Array[2];
  139.                           insertArray("row2");
  140.                   }
  141.                   else if (arrayName == "col") {
  142.                       for (i = 0; i < colArray.length; i++) {
  143.                           tempArray[i] = colArray[i];
  144.                           }
  145.                          for (n = 1; n < colArray.length; n++) {
  146.                           colArray[n] = tempArray[n-1];
  147.                           }
  148.                           colArray[0] = tempArray[colArray.length - 1];
  149.                         row2Array[2] = colArray[2];
  150.                         row1Array[2] = colArray[1];
  151.                           insertArray("col");
  152.                   }
  153.               }
  154.              
  155.               function previous(arrayName) {
  156.                   var tempArray = Array();
  157.                   //var i = 0;
  158.                   //alert(row1Array.length);
  159.                   if (arrayName == "row1") {
  160.                       for (i = 0; i < row1Array.length; i++) {
  161.                           tempArray[i] = row1Array[i];
  162.                           }
  163.                          for (n = 0; n < row1Array.length-1; n++) {
  164.                           row1Array[n] = tempArray[n+1];
  165.                           }
  166.                           row1Array[row1Array.length - 1] = tempArray[0];
  167.                           colArray[1] = row1Array[2];
  168.                         insertArray("row1");
  169.                        
  170.                   }
  171.                   else if (arrayName == "row2") {
  172.                       for (i = 0; i < row2Array.length; i++) {
  173.                           tempArray[i] = row2Array[i];
  174.                           }
  175.                          for (n = 0; n < row2Array.length-1; n++) {
  176.                           row2Array[n] = tempArray[n+1];
  177.                           }
  178.                           row2Array[row2Array.length - 1] = tempArray[0];
  179.                         colArray[2] = row1Array[2];
  180.                           insertArray("row2");
  181.                   }
  182.                   else if (arrayName == "col") {
  183.                       for (i = 0; i < colArray.length; i++) {
  184.                           tempArray[i] = colArray[i];
  185.                           }
  186.                          for (n = 0; n < colArray.length-1; n++) {
  187.                           colArray[n] = tempArray[n+1];
  188.                           }
  189.                           colArray[colArray.length - 1] = tempArray[0];
  190.                         row2Array[2] = colArray[2];
  191.                         row1Array[2] = colArray[1];
  192.                           insertArray("col");
  193.                   }
  194.               }