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>";
}

it gives unknown player undefined once the open code is executed, u can check it on ma-t.net — roy naufal, Dec 17 '13 at 17:39
What happens if you just remove the `;player=img` from your link? Alternatively you could define the 'player" in .open like this: `Shadowbox.open({content: this, player: "img"});` . Not exactly sure if that is the problem, but worth a try.. — Bryan Elliott, Dec 17 '13 at 18:23
thanks, there's some progress, now this error shows: GET http://ma-t.net/[object%20Object] 404 (Not Found) ... i guess 'this' is not properly referenced...? — roy naufal, Dec 17 '13 at 18:36
Ok, maybe go back to: `Shadowbox.open(this)` and in your Shadowbox.setup change to: `Shadowbox.setup("#imagestempcontainer a", {player: "img"});` — Bryan Elliott, Dec 17 '13 at 18:46
Maybe this will help - http://stackoverflow.com/questions/9144577/shadowbox-stops-working-after-jquery-function-call - — Bryan Elliott, Dec 17 '13 at 21:45

score 0 · Answer 1 · answered Dec 17 '13 at 22:02

0

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"});

answered Dec 17 '13 at 22:02

Bryan Elliott

4,055
2
21
22

how can I make this open automatically on its own after the ajax load ? you click on project, a list of photos is received via ajax, i want that to directly open up as shadowbox – roy naufal Dec 18 '13 at 11:12

shadowbox automatically open after ajax call

1 Answers1