prettyPhoto aspect ratio issue on an iPad

[egilbert]

prettyPhoto is nice and simple. It works great in most environments.

However, there seems to be an aspect ratio bug with prettyPhoto in an iPad environment.

In my case, my photos are fairly large (1440×960 pixels for a 2:3 aspect ratio). Using the standard built-in gallery and prettyPhoto code, their large versions open perfectly in a web browser and even iPhone, but on an iPad, the aspect ratio is different:

– Vertical photos are stretched vertically when an iPad is held vertically
– Horizontal photos are are stretched vertically when an iPad is held horizontally

Obviously, the photos are distorted and do not look right, so it is important to find a solution.

The solution seems to be in the prettyphoto-dev.js file, especially around the _fitToViewport fragment of code. But I just wasn’t able to get it to work.

Any help would be appreciated.

Thanks!

Topic

[Jason Bobich]

Yeah, this is a tricky one. The way prettyPhoto does the double loop on the size with that function is weird. So our modifications to make it responsive for mobile devices work in most scenarios, but sometimes odd things happen with extraordinarily large images. You may just want to add in the default version of prettyPhoto.

You can get it here: https://raw.github.com/scaron/prettyphoto/master/js/jquery.prettyPhoto.js

Place the javascript file in your Child theme, possibly at /assets/js/ would be a good place. For clarity here, name it prettyphoto.js (but doesn’t matter what you want to name it or where you want put it).

So, let’s say now you’ve got the new file located in your Child theme like this:

/assets/js/prettyphoto.js

Then from your Child theme’s functions.php you’d just override the theme’s version like this:

function my_scripts() {
    wp_register_script( 'prettyphoto', get_stylesheet_directory_uri() . '/assets/js/prettyphoto.js' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts', 9 );

For Reference: http://dev.themeblvd.com/tutorial/overriding-a-framework-javascript-file/

[egilbert]

Thanks Jason.

I did it, and also replaced that bit of code:
_fitToViewport(pp_containerWidth,pp_containerHeight)

For:
_fitToViewport(imageWidth,imageHeight)

The aspect ratio/distortion problem seems to be fixed – at least, on the devices tested.

Thanks for the feedback,

[Author]

Replies