colorbox with dynamically loaded html

colorbox with dynamically loaded html

I have a roundabout image track with thumbnails that is dynamically loaded into the site via PHP and jquery.

That is all working. Now I'm trying to get the thumbnails to link to colorbox so users can see the larger pictures.

Trouble is, when I attempt to use the colorbox, I still get the links just opening in a new window instead of the colorbox modal or whatever it is.

Any help would be greatly appreciated. Here's some of the code that I'm using.

index.html
  2. <section class="roundabout">
  3. <div class="reel">
  4. </div>
  5. </section>
the javascript that fills the 'reel' div
  1. $('.reel').append("<p><a  class='image' href='images/" + imgList[i] + "'><img src='images/" + imgList[i] + "' alt='' /></p>");
And then the colorbox javascript that is supposed to open .class 'image'
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $(".image").colorbox({rel:'image', transition:"none", width:"75%", height:"75%"});
  5.       }
  6. </script>
On my test page where the images are statically input, the colorbox works and I noticed in the dev tools that the class gets appended with cboxElement but that isn't happening on the links in my main page.

Example:
Working Test Page: <a class="image cboxElement" href="images/pic02.jpg">Photo_1</a>
Non working Page: <a class="image" href="images/pic06.jpg"><img src="images/pic06.jpg" alt=""></a>

Thank you kindly!