Question

我试着查看这个特定的场景，但是找不到答案，我看到的答案没有多大帮助，所以我很感激任何帮助。我正在尝试实现shadowbox：

项目列表，

点击一个项目，

项目照片使用ajax加载，

自动打开shadowbox（问题在这里 - 它在safari上工作除外）

这是页面上的代码：

$(document).ready(function(){
   Shadowbox.init();
})

这是触发ajax请求的代码（问题出在阴影框打开部分）：

$(document.body).on('click', '#pano_container .projectAjax', function(e) {
    e.preventDefault();
    var id = $(this).attr("data-id");
    $.ajax({
        url: "actions/projectInfo.php",
        type: 'GET',
        dataType: 'html',
        data: 'id='+id,
        success: function(response, textStatus, XMLHttpRequest) {
            if (!response){
                alert("There was an error!");
                return false;
            }
            else {
                $("#imagestempcontainer").html(response);

                Shadowbox.clearCache(); 
                //Shadowbox.setup();

                // before used to show the project photos, then user clicks...now it should autoamtically click, this worked everywhere except safari
                //$("#imagestempcontainer a:first-child img").delay(50).click();

                // trying to fix this so it also works on safari, the below seems not working and gives 'undefined' in the console
                Shadowbox.setup("#imagestempcontainer a");
                Shadowbox.open(this);

            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("There was an error!");
            if (typeof console != 'undefined')
                console.dir(XMLHttpRequest);
            return false;
        }
    });


});

这是ajax请求收到的php / html代码：

 foreach($projectPhotos as $k=>$projectPhoto){ 
    echo "<a style='display:none' href='".thumbnailLink($projectPhoto['image'],700,700)."' rel='shadowbox[{$project['title']}];player=img'>";
    echo "<img src='".thumbnailLink($projectPhoto['image'],650,350)."' />";
    echo "</a>";
}

Answer 1

好的，我认为这可能是你的问题：

在您的Ajax调用中将Shadowbox.open(this);更改为：

$('#imagestempcontainer a').on('click',function(e){
    Shadowbox.open(this);
    e.preventDefault();
});

您也可以尝试从链接中删除;player=img，然后在Shadowbox.setup()中将其定义为：

Shadowbox.setup("#imagestempcontainer a", {player: "img"});

在ajax调用后，shadowbox会自动打开

1 个答案: