Fancybox on dynamic links

Question

I've searched similar topics on SO but none of the solutions worked for me. I'm populating my page with links via Ajax. Like so:

$.post('php/common/auction_view/auction_invoices.php', function(data){
   $('#auction-invoices').html(data);
   //Initiate Fancybox on links
   $("a.example4").fancybox({
            'opacity'       : false,
            'overlayShow'   : false,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
            'type'          : 'iframe'
   });
});

Although, this doesn't work. Does anyone have a solution? Thanx!

EDIT: Okey, found the solution:

$.post('php/common/auction_view/auction_invoices.php', function(data){
$('#auction-invoices').html(data);
$.getScript("fancybox/jquery.fancybox-1.3.4.js", function(){
    $.fancybox.init();
    $("a.example4").fancybox({
        'transitionIn'      : 'elastic',
        'transitionOut'     : 'elastic',
        'overlayShow'       : false, 
        'showCloseButton'   : true, 
        'width'             : 450, 
        'height'            : 585, 
        'titleShow'         : false, 
        'type'              : 'iframe'
    });
});

});

enter code here

Have you tried binding this? $("a.example4").bind(function(){ $(this).fancybox({ }); });. This may be the issue. — Ohgodwhy, Mar 07 '12 at 10:03

score 0 · Answer 1 · answered Jul 28 '12 at 03:58

This answer did not help me, it's to complicated, but this is solution that helped me (jquery 1.7.2 and fancybox 1.3.4):

Open jquery.fancybox-1.3.4.js and edit it about line 790 like this

    $.fn.fancybox = function(options) {
    if (!$(this).length) {
        return this;
    }

    $(this)

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

This solution solved my problems, and there is no need to change anything else, even initialisation remain like default.

$(".trigger").fancybox();

It's simple and clean. Hope that helps.

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

Fancybox v1.3.x doesn't support dynamically added elements.

I answered a similar question here, which uses the jQuery .on() method to bind fancybox to dynamically added elements.

Tweak the code to match your container like:

$("#auction-invoices").on("focusin", function(){...

edited May 23 '17 at 12:14

Community

1
1

answered Mar 07 '12 at 21:50

JFK

40,963
31
133
306

Fancybox on dynamic links

2 Answers2