Question

I have a page that loads and after it loads, it pulls in a list of LIs to populate a news feed.

<li><a href="/url/" class="quickview">quick view</a></li>
<li><a href="/url/" class="quickview">quick view</a></li>
<li><a href="/url/" class="quickview">quick view</a></li>

I’m trying to get fancy box to trigger when a user clicks on quick view but haven’t had any luck. Any Ideas?

$(document).ready(function() {
    $('.quickview').fancybox();
});

also tried:

$(document).ready(function() {
   $('a.quickview').live('click', function() {
        $(this).fancybox();
    });
});

http://fancybox.net/

Thanks for any ideas…

Answer 1

The problems is to attach fancybox into AJAX loaded element, right?

I got same problems and I found this solution.

I copy paste it here, see the original bug report for more info:

$.fn.fancybox = function(options) {

$(this)
  .die('click.fb')
  .live('click.fb', function(e) {       
    $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
    e.preventDefault();
    [...]

Credit goes to jeff.gran.