Question

我有以下代码：

$(document).ready(function(){ $("a#cakeImages").live("click",function() fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    })) 
});

我得到了正确的图片：

<a id="cakeImages" href="cakes/2/1.jpg" > 
<img alt="cakeImages" class="align-left no-border" src="cakes/2/1.jpg"  /></a>

但它根本不起作用。我使用.live，因为我的实际图像由于页面上的ajax脚本而改变。

但是当我只改为：

$(document).ready(function() {$("a#cakeImages").fancybox({
            'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
     }) 
});

仅适用于第一次。有谁有线索，发生了什么？：D

Answer 1

通过Saikat和Nick的提示，我设法提出了与图像库相关的代码。而不仅仅是那个。

$(document).ready(function() {
    $("a[rel=gallery]").live('click', function(){
        $("a[rel=gallery]").filter(':not(.fb)').fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'none',           
        'titlePosition' : 'over'
        }).addClass('fb');
        $(this).triggerHandler('click');
        return false;
    });
});

它的作用。当ajax完成加载页面上的图像。首次点击任何带有“rel = gallery”组的链接时，它会在没有“fb”类的那些上加载fancybox事件。如果是，它将不会第二次触发它，而是直接触发triggerHandler。

希望这有助于所有人试图让fancybox与图片库合作。我没有在单图像ajax加载上测试这个，但我认为它也会起作用。

Answer 2

我知道这是一个老线程，但我在寻找答案的时候找到了它，所以在这里：如果您使用的是默认

<a href="somewere.com" class="something"><img src="myimage.jpg" /></a>

使用ajax，第一个答案开始打开，然后转到url，所以我将fancybox调用更改为以下内容：

`$(".fancybox").live("click", function(event) {`
     `event.preventDefault();`
         `$(this).filter(':not(.fb)').fancybox()`
         `.addClass('fb');`
         `$(this).triggerHandler('click');`

    `});`

第一个答案让我思考Fancybox调用中发生了什么，event.preventDefault();它是我案例中第一个答案的缺失部分。

希望这能有所帮助。顺便说一句，感谢Petyp推动正确的方式。

Answer 3

由于您在第一次点击时只是绑定 fancybox，而不是打开它，您需要通过.triggerHandler()实际触发它的处理程序，以便在绑定后打开它，像这样：

$(function(){ 
  $("a#cakeImages").live("click", function() {
     $(this).filter(':not(.fb)').fancybox({
       'titleShow'      : false,
       'transitionIn'   : 'elastic',
       'transitionOut'  : 'elastic'
     }).addClass('fb');
     $(this).triggerHandler('click');
  });
});

这样做是听取<a id="cakeImages">元素的点击（一次只应该有一个，如果不是这样的话，使用类而不是ID）如果我们还没有运行.fancybox()（它没有fb课程，请通过.filter()和:not()检查）然后执行此操作并指定课程（通过.addClass()），下一次点击它不会运行它，只触发点击处理程序，这将打开fancybox。

Answer 4

$(document).ready(function(){                      
    $("a.previewfancy").live("click", function(event) {
        event.preventDefault();
        $(this).filter(':not(.fb)').fancybox()
         .addClass('fb');
         $(this).triggerHandler('click');
    });
});

Answer 5

结合Roy和Nick的答案，我将完整的解决方案在Ajax功能中运行得非常好。

    $(document).ready(function() {
    $("a[rel=gallery]").live('click', function(){
        $("a[rel=gallery]").filter(':not(.fb)').fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'none',           
        'titlePosition' : 'over'
        }).addClass('fb');
        $(this).triggerHandler('click');
        return false;
    });
});
        $(function(){ 
  $("a.fancybox").live("click", function() {
     $(this).filter(':not(.fb)').fancybox({
       'titleShow'      : false,
       'transitionIn'   : 'elastic',
       'transitionOut'  : 'elastic'
     }).addClass('fb');
     $(this).triggerHandler('click');
  });
});

fancybox似乎没有使用ajax内容

5 个答案: