动态链接上的Fancybox

2012-03-07 73 views 0 likes

我已经在SO上搜索过类似主题，但没有任何解决方案适用于我。我通过Ajax链接填充我的页面。像这样：动态链接上的Fancybox

$.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' 
    }); 
});

虽然，这是行不通的。有没有人有办法解决吗？ Thanx！

编辑：奥基，找到了解决办法：

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

来源

2012-03-07 Ismailp

你试过绑定这个吗？ $（“a.example4”）。bind（function（）{$（this）.fancybox（{}）;}）;.这可能是问题。 – Ohgodwhy 2012-03-07 10:03:26

我应该把它放入ajax调用吗？ – Ismailp 2012-03-07 10:05:23

回答

Fancybox v1.3.x不支持动态添加元素。

我回答了类似question here，它使用jQuery .on()方法将fancybox绑定到动态添加的元素。

调整代码以符合您的容器，如：

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

来源

2012-03-07 21:50:07 JFK

这个答案并没有帮助我，这是复杂的，但是这是解决方案，帮助我（的jQuery 1.7.2和1.3.4的fancybox）：

开放jquery.fancybox-1.3.4.js和编辑它大约790行这样

$.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();

该解决方案解决了我的问题，没有必要到别的任何改变，甚至初始化REM ain像默认。

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

它很简单，干净。希望有所帮助。

来源

2012-07-28 03:58:12

动态链接上的Fancybox

回答

相关问题