This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

prettyPhoto aspect ratio issue on an iPad

  • Creator
    Topic
  • #1922
    egilbert
    Participant

    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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #1955
    Jason Bobich
    Keymaster

    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/

    #1965
    egilbert
    Participant

    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,

Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.