Vanilla 2

REDMOGUL

Hi Stephane, let me add my voice to everyone's and say thank you for your cool code but I have one problem. Pretty photo seems to freak out and does not display properly if the image is expanded on the iphone. Can any one tell me what I must do?

Thanks in advance.

cmont

I have the same problem, when the image is expanded it starts to move outside the screen over and over.

uberfu

This event you are seeing is a browser display issue in regards to CSS elements.

The iPhone version of Safari [at least for v 3.0] pre-dates that of Safari 3.x for the Desktop -- which did not include current CSS methods/ capabilities in early 2008.

http://arstechnica.com/apple/news/2007/07/iphone-safari-isnt-safari-3-0-and-other-development-surprises.ars

In any case - prettyPhoto and prettyGallery specifically seem to cater to desktop-based display methods.

I haven't read thru the entire No Margin For Error Site - but I from what I have seen - there is no commentary guaranteeing iPhone compatability [or for that matter Blackberry - Android - WinMo or any other mobile devices that access the web]
_____________________________________

That being said -- there are "fixes" for these occurances - many techniques [hacks] and methods or whatnot around the web.

Easiest way - add overflow:hidden to the surrounding container

ikincaid

Anyone see a problem with the following hack? I put the scroll and resize functions of the jquery.prettyPhoto.js inside an if statement to eliminate the behavior on an iPhone/iPad/iPod Touch. It seems to work fine in desktop browsers and stops that auto-positioning off-screen on my iPhone when you zoom in on a gallery photo. I can't test it myself on an iPad, but I imagine it does the same thing:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
//Do nothing
}else{
$(window).scroll(function(){ scrollPos = _getScroll(); _centerOverlay(); _resizeOverlay(); });
$(window).resize(function(){ _centerOverlay(); _resizeOverlay(); });
}

lmackenzie

In case anyone needs this, I can confirm that the following change works for iPhone:

function _center_overlay(){

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
//Do not center the verlay if this is an iphone/ipod/ipad
} else {
if(doresize && typeof $pp_pic_holder != 'undefined') {
scroll_pos = _get_scroll();
contentHeight = $pp_pic_holder.height(), contentwidth = $pp_pic_holder.width();

projectedTop = (windowHeight/2) + scroll_pos['scrollTop'] - (contentHeight/2);
if(projectedTop < 0) projectedTop = 0;

if(contentHeight > windowHeight)
return;

$pp_pic_holder.css({
'top': projectedTop,
'left': (windowWidth/2) + scroll_pos['scrollLeft'] - (contentwidth/2)
});
}
}
}

xparrot

I added overflow:hidden; to the div.pp_default .pp_content CSS and did the function lmackenzie wrote. Definitely helps, but is not perfect. Now my large images don't look funky on iPads, but I lose the navigational buttons. Not sure what to change in the CSS to make them appear over the content.

Vanilla 2

Howdy, Stranger!

Categories