Getting flexslider to work on popup

Getting flexslider to work on popup

I'm trying to create a pop up that will display a slider of all the images that belongs to an item. I've managed to create the popup to display the correct images but my slider isn't working correctly, I've tried to create a jsfiddle to show what I mean but that didn't pan out so well. So here is a link to the page, just click on one of the images and a popup will be shown and you can see the 2 images that is suppose to be the image nav and if you go to one tab and then go back then the main image is showing and it looks how it's suppose to look, if that makes sense. I'm not sure what is going wrong with this.

LINK

html
 
  1. <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> <a class="category_items popup" href="javascript:void(0);" data-category="blue-cake"> <img src="images/blue_cake_crop.jpg"> </a> </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/thumbs/blue_sugar_glass_crop.jpg"> <img src="images/blue_sugar_glass_crop.jpg"> </li> <li data-thumb="images/thumbs/blue_cake_crop.jpg"> <img src="images/blue_cake_crop.jpg"> </li> </ul> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

main.js


  1. $(document).ready(function () {  $('.category_items').click(function() { $('.items_links').hide(); var target_category = $(this).attr('data-category'); $('.items_links[data-item=' + target_category + ']').show(); return false; }); //test  $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); //END GALLERY POPUP