Hi folks,
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
