shadowbox automatically open after ajax call

Question

I tried lookin up this specific scenario, but could not find an answer and the ones I saw didn't help much, so I appreciate any help on this. I am trying to implement shadowbox as such:

• projects list,

  you click a project ,

  project photos are loaded using ajax,

  automatically open shadowbox (problem here - it was working except on safari)

this the code on the page:

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

this is the code that triggers the ajax request (issue is in the shadowbox open part here):

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


});

this is the php/html code received by the ajax request:

 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

Ok, I think this might be your problem:

In your Ajax call change Shadowbox.open(this); to:

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

You might also try removing the ;player=img from your links and instead define it in Shadowbox.setup() like this:

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