Question

I have a client who wants to open variously sized images in a centered popup. I tried to get them to use FancyBox but they don’t want interstitial presentation, so…

I initially was opening a generic popup which resized and centered onload based on image size but they don’t like the shift so I added a PHP script to echo the sizes and used jQuery to fetch the size info to feed into the pop up call.

But it appears the delay this causes is setting off all popup blockers.

Here is the JS

$("#portfolioBigPic").click(function () {
      var src = $("#portfolioBigPic").attr('src');
      var ar = src.split('/');
      var fname = ar.pop();
      fname = '/g/portfolio/clients/big/' + fname;

      $.get("imgsize.php", { i: fname}, function(data){
      var dim = data.split(",");
      popit(fname,dim[0],dim[1]);
  });
});

function popit(img,w,h) {
  var features = 'width='+w+',height='+h+', toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=0, resizable=1,';
  var left = (screen.width/2)-(w/2);
  var top = 0;
  features += 'top='+top+',left='+left;
  bigpic = window.open('portfolioBigPic.php?img='+img, 'bigpic',features);
  bigpic.focus();
}

The only difference between dodging the blockers and failing is that I added the AJAX .get and use it to specify w and h.

Any thoughts on how to avoid this? Maybe I should use PHP to get widths and heights of all the big pics and write a JS array of them when this page loads? Am I right that the delay caused by fetching the data is tripping the blockers?

Thoughts? Any advice much appreciated.

JG

// EDIT – adding my resolution
Per Spiky’s answer I needed to move the popit() call out of the success handler for the AJAX call so that the call occurred in the context of the user’s click event.

So I realized that when my little thumbs are clicked to set the preview of the big image (#portfolioBigPic) I could look up the full sized pic at that point. So I moved the AJAX size look up to the click() for the thumbs.

HTH someone.

Answer 1

It’s not the delay itself that’s causing the problem, it’s that you’re trying to open the window from a script execution context that is something other than a “click” handler. Specifically, in this case it’s the AJAX success handler (or whatever).

You can’t work around that restriction, so yes you should dump your image sizes into the main page in the first place so that your script handling the “click” can know the sizes.