title: Integrate colorbox into flexslider
body: <p>I have a flexslider carousel and I'd like to add the functionality that when you click an item in the carousel it opens up in a lighbox (I'm using colorbox). How do you properly implement it? BTW, the code below loads the colorbox properly when I take the <code>&lt;ul&gt;</code> section outside of the flexslider div. Here's what I'm trying:</p>
  
  <p>Head:</p>
  
  <pre><code>&lt;!--jquery--&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!--flexslider --&gt;
  &lt;link rel="stylesheet" href="css/flexslider.css" type="text/css"&gt;
  &lt;script src="js/jquery.flexslider.js"&gt;&lt;/script&gt;
  &lt;!--colorbox--&gt;
  &lt;script src="js/jquery.colorbox-min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="css/colorbox.css" type="text/css"&gt;
  &lt;script&gt;
  $(document).ready(function(){
     $('a.gallery').colorbox();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Body:</p>
  
  <pre><code>&lt;div id="flexslider" class="flexslider"&gt;
  &lt;ul&gt;
     &lt;li&gt;&lt;a href="images/img01.jpg" class="gallery"&gt;&lt;img src="images/img01.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;;
     &lt;li&gt;&lt;a href="images/img02.jpg" class="gallery"&gt;&lt;img src="images/img02.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;;
     &lt;li&gt;&lt;a href="images/img03.jpg" class="gallery"&gt;&lt;img src="images/img03.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>