Fancybox, getting Fancybox to bind using LIVE() to items being loaded onto the page after load

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...

Steve · Answer 1 · 2011-12-20T11:56:25.423

30

Old question, but might be useful for future searchers.

My preferred solution is to fire fancybox manually from within the live event, eg:

$('.lightbox').live('click', function() {
    $this = $(this);
    $.fancybox({
        height: '100%',
        href: $this.attr('href'),
        type: 'iframe',
        width: '100%'
    });
    return false;
});

EDIT: From jQuery 1.7 live() is deprecated and on() should be used instead. See http://api.jquery.com/live/ for more info.

edited Dec 20 '11 at 11:56

answered Oct 12 '11 at 13:56

Steve

301
1
3
3

100% prefer this solutions thanks for taking the time to provide it. – John Magnolia Nov 19 '11 at 17:44
1

Can you use 'gallery' feature this way? (next/prev links) – Mirko Jan 05 '12 at 14:41
This was by far my prefered solution and it works mighty well... good job – Mathieu Dumoulin Feb 20 '12 at 20:26
+1... dude this is a great solution... you saved a lot of my time, thanks! – Ninja Feb 21 '12 at 14:41
Thanks for the solution, it was helpful... but I think in most instances you could simplify it to be more like this: `$('.lightbox').live('click', function() { $.fancybox({ href: $(this).attr('href') }) });`. (Unless you really needed those extra params when calling the lightbox function. – Batkins Mar 28 '12 at 20:09
Note this important bit: `href: $this.attr('href')`. – James P. Nov 28 '12 at 22:05
In case it helps anyone, I was having issues using `on` and realised I had to call the static parent to the ajax content as per [this answer](http://stackoverflow.com/a/9344454/436014) – waffl Dec 09 '13 at 17:29

score 23 · Answer 2 · answered Feb 17 '11 at 15:08

23

this should work after every ajax request

$(document).ajaxStop(function() { 
    $("#whatever").fancybox();
});

answered Feb 17 '11 at 15:08

mononym

2,606
6
26
27

This is a much better solution. live() is a good thing to avoid. – Evert Dec 20 '11 at 12:01

score 11 · Accepted Answer · answered Sep 07 '10 at 00:04

11

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.

answered Sep 07 '10 at 00:04

Donny Kurnia

5,260
5
35
52

1

That solution broke regular photo galleries for me, but I was able to fix it as I commented here: http://code.google.com/p/fancybox/issues/detail?id=18#c47 – Sonny Jul 21 '11 at 19:53

score 4 · Answer 4 · answered Feb 11 '13 at 23:01

Since .on is now recommended over .live, and after reading over the documentation on delegated events, here's a solution I came up with (assuming your elements have a class of 'trigger-modal'):

$(document).on('click', '.trigger-modal', function() {
  // remove the class to ensure this will only run once
  $(this).removeClass('trigger-modal');
  // now attach fancybox and click to open it
  $(this).fancybox().click();
  // prevent default action
  return false;
});

or even just `$(document).on('click', '.trigger-modal', function() { $.fancybox(); return false; });` — ChrisV, Oct 17 '13 at 08:05

Dancrumb · Answer 5 · 2010-03-29T01:31:10.753

2

From my understanding of Fancybox, the call to fancybox() simple attaches the plugin to the selected element. Calling fancybox on a click event won't open anything.

I think you just need to add

$(li_element_that_you_create).fancybox();

to the code that creates the new LI elements in your list

EDIT

If you're using load, then you would do something like:

$('#ul_id_goes_here').load('source/of/news.feed', function() {
  $('.quickview').fancybox();
});

edited Mar 29 '10 at 01:31

answered Mar 28 '10 at 16:07

Dancrumb

26,597
10
74
130

I'm not following, I'm using JQUERY load? – AnApprentice Mar 28 '10 at 17:03

Fancybox, getting Fancybox to bind using LIVE() to items being loaded onto the page after load

5 Answers5

Linked