pretty photo overlay doesn't fill entire screen on mobile devices
  • Hey guys,

    I have set up prettyphoto on a site, but when testing on a mobile device (I have tried iPhone & iPad) the overlay only stretches across half the screen. I have tinkered with the viewport call, with no success. Any easy solutions on fixing this problem?
  • +1
    Has anyone else had this problem?
    You can see the issue when trying any of the demos here at the pretty photo site...

    When viewed from an iPad it has about an 80px gap with no black overlay on the right hand side - I guess there will be the same issue on iPhone too.

    Any help would be appreciated!
  • I have this problem, too. PrettyPhoto's viewport padding is set WAY too high, and I haven't found a way to change it.
  • So nobody's got a fix for this?
  • Same problem here, very disappointing. On an older iPhone (or when you make your viewport very small), the image is so small, you can't even see it anymore. I deactivated the lightbox for smaller viewports at all, a dirty workaround.
  • Hi guys
    I've found this thread on a different site, hope it might help? Sorry if not.
  • Sorry to resurrect this old thread, but I had the same problem. Tried the solution in the URL vixbix posted above but I couldn't find a way to overcome the vertical positioning with CSS since the JS was setting an absolute top position.

    What I ended up doing was changing two numbers in the JS file that reduces the minimum window padding so that the image doesn't show up so small on my Z10 and other mobiles.

    Load up jquery.prettyPhoto.js and look at line 581. Change the 200 to a smaller number. The padding from the sides of the image in the pop-up to the edge of the browser window is half this number. To work with the Facebook style theme I changed the number to 50. Line 584 is the vertical padding of 200. I changed this to 150 to suit my needs.

    While I was at it, I found that pretty photo was showing the left and right overlay previous/next arrows even when it was a single image in the pop-up. I changed line 520 to:

    if(isSet && _getFileType(pp_images[set_position])=="image" && pp_images.length > 1) { $pp_pic_holder.find('.pp_hoverContainer').show(); }else{ $pp_pic_holder.find('.pp_hoverContainer').hide(); }
  • This fix worked for me: try to set the width with the document size, not the window:
    Go to jquery.prettyPhoto.js and look at line 828 and set the width based on the document instead of the window:
  • I've found another workaround editing the embedded values for margins in the latest minified jquery.prettyPhoto.js:

    I changed :
    if(p>v){imageWidth=v-200;imageHeight=t/e*imageWidth}else if(h>d){imageHeight=d-200;
    if(p>v){imageWidth=v-40;imageHeight=t/e*imageWidth}else if(h>d){imageHeight=d-40;

    40 because margins are 20px per side. Works quite well o every platform

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter