Cant open images with Fancybox after appending to Flexslider after AJAX call - ajax

Question

The following code below is in CoffeeScript and after a couple of hours playing around with it and finally reading the documentation on WooThemes, I was able to get the Flexslider to append images correctly after clicking on my button to load the rest of the images from Instagram.
However, now when I click on the image, it isn't opening the Fancybox like the rest of the images that load on page load and was wondering if I could get some help here.
Slider =
flexi: ->
$('.flexslider').flexslider
animation: 'slide'
animationLoop: true
slideshow: false
itemWidth: 160
itemMargin: 5
minItems: 1
maxItems: 10
start: (slider) ->
$('#load-more').on 'click', (event) ->
event.preventDefault()
$.ajax
type: 'get'
url: $(this).find('a').attr('href')
dataType: 'jsonp'
success: (data) ->
$.each data.data, (index, value) ->
slider.addSlide '<li class="thumb" data-profile="' + value.user.profile_picture + '" data-lat="0" data-long="0" data-id="' + value.id + '" data-thumb="' + value.images.thumbnail.url + '" data-username="' + value.user.username + '" data-comments="' + value.comments.count + '" data-likes="' + value.likes.count + '" data-text="' + value.caption.text + '" data-link="' + value.link + '"><img alt="' + value.images.thumbnail.url.split('/')[3].split('.jpg')[0] + '" src="' + value.images.thumbnail.url + '" /></li>'
Fancy =
box: (lat, lng, pid) ->
street = undefined
latLng = new google.maps.LatLng lat, lng
view = new google.maps.StreetViewService()
$('.fancybox').fancybox
width: 1155
height: '95%'
maxWidth: '95%'
maxHeight: '95%'
openEffect: 'none'
autoSize: true
autoResize: false
closeEffect: 'fade'
scrolling: 'auto'
type: 'iframe'
helpers:
media:{}
beforeShow: ->
........

Answer 1

You can try wrapping the fancybox call with live() or on() or go and change the FancyBox source code to use the live() instead of regular bind() method. Here's sort of an untested code to give you a sense.
// on
$(document.body).on('click', '.fancybox', function() {
$(this).fancybox({ /* options */ }).trigger('click');
return false;
}
// live
$('.fancybox').live('click', function() {
$(this).fancybox({ /* options */ }).trigger('click');
return false;
}