如何使用 AJAX 调用 jQuery 灯箱

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

这里的问题是 .sidebar-content 单击事件中的 e. stopPropagation() 阻止了灯箱的触发。您可以完全删除它并在 .sidebar click 事件中调用：

$(".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 灯箱

How to call jQuery Lightbox with AJAX

javascript

ajax

jquery

lightbox2