Question

如何使用AJAX调用jQuery Lightbox2。

我正在为我的项目使用此功能。

$(document).ready(function() {
    $(".paylasimi-goster").click(function() {
        event.preventDefault();
        var id = $(this).data("id");
        $.ajax({
            url: "gonderiyi_goster.php?msg_id=" + id,
            type: 'get',
            beforeSend: function() {
                $("#loader").fadeIn(100);
            },
        }).done(function(data) {
            $("#loader").fadeOut(100);
            $(".sidebar").fadeIn().find(".sidebar-content").animate({
                "right": 0
            }, 200).html(data);
            imgResize(jQuery, 'smartresize');
        });
    });

    $(".sidebar").click(function() {
        $(".sidebar-content").animate({
            "right": "-565px"
        }, 200, function() {
            $(".sidebar").fadeOut();
        })

    });
    $(".sidebar-content").click(function(e) {
        e.stopPropagation();
    });
});

我也从jsfiddle创建了这个 DEMO 。在这个jsfiddle你可以看到那里的白色div。单击任何白色div然后查看右侧边栏。所以在侧边栏中有一个图像。问题出在这里：单击图像时Lightbox2不起作用。

如何用ajax调用Lightbox2。

Answer 1

此处的问题是e. stopPropagation()点击事件上的.sidebar-content，该事件阻止了灯箱的触发。您可以在.sidebar点击事件中完全删除它，而不是调用：

$(".sidebar").click(function(e){
     var preventClick = $(".sidebar-content");

     if (!preventClick.is(e.target) && preventClick.has(e.target).length === 0){
       //run the hide animate function + callback 
       $(".sidebar-content").animate({"right":"-200px"},200,function(){
           $(".sidebar").fadeOut();   
       });
     };     
});

FIDDLE

如何使用AJAX调用jQuery Lightbox

1 个答案: