Optimize prettyPhoto lightbox for mobile devices?

Question

I'm currently using prettyPhoto on a site I'm working on but have run into a small problem on mobile devices.

The plugin has the option "allow_resize: false" which disallows resizing the photos bigger than viewport however the resulting downsized images are too small at roughly 30-35% of the viewport width. This is a problem on a 480px wide screen as the images are only utilising a fraction of the available space.

What I'm trying to do is get it to rescale to roughly 95% of the viewport. I've tried fixing this with css and media queries but I run into a problem where the vertical images run off the page when the width is set to 95%.

I'm guessing modifying the original plugin or adding javascript would be a better solution. Does anyone have any suggestions on the best way to do this?

Answer 1

@media only screen and (max-width: 480px) { 

    .pp_pic_holder.pp_default { width: 90%!important; left: 5%!important; overflow: hidden; }
    div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
    div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
    .pp_content { width: 100%!important; height: auto!important; }
    .pp_fade { width: 100%!important; height: 100%!important; }
    a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
    #pp_full_res img { width: 100%!important; height: auto!important; }
    .pp_details { width: 100%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px!important; }
    a.pp_close { right: 7%!important; top: 10px!important; }
    #pp_full_res { padding: 5px !important; }

}

Answer 2

Try this (not my code):

/* prettyPhoto styling for small screens */
@media (max-width: 500px)
{
    .pp_pic_holder.pp_default
    {
        width: 100%!important;
        margin-top:-100px !important;
        left: 0!important;
        overflow: hidden;
    }
    div.pp_default .pp_content_container .pp_left
    {
        padding-left: 0!important;
    }
    div.pp_default .pp_content_container .pp_right
    {
        padding-right: 0!important;
    }
    .pp_content
    {
        width: 100%!important;
        height: auto!important;
    }
    .pp_fade
    {
        width: 100%!important;
        height: 100%!important;
    }
    a.pp_expand,
    a.pp_contract,
    .pp_hoverContainer,
    .pp_gallery,
    .pp_top,
    .pp_bottom
    {
        display: none!important;
    }
    #pp_full_res img
    {
        width: 100%!important;
        height: auto!important;
    }
    .pp_details
    {
        box-sizing: border-box;
        width: 100%!important;
        padding-left: 3%;
        padding-right: 4%;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #fff;
        margin-top: -2px!important;
    }
    a.pp_close
    {
        right: 10px!important;
        top: 10px!important;
    }
}

Answer 3

I got the same issue on pretty photo and found the same css code fix as posted by rafael.dev. However, it seems still not pretty good because the previous and next button disappear and the style really strange. I think the problem just caused by the calculating of the resizing, so I try to find the snippet of the resize function from the js source and that was easily got the solution as below:

I am using the 3.1.6 version, please find the function _fitToViewport in line 568. Then scroll down some more you will see imageWidth = (windowWidth - 200); and imageHeight = (windowHeight - 200);

Just reduce the number and then the mobile view will become very nice!! I try to adjust many times and got the best fit number is 38 and 100. You can just copy the following code to replace the original one:

if(pp_containerWidth > windowWidth - 38){
    imageWidth = (windowWidth - 38);
    imageHeight = (height/width) * imageWidth;
} else if(pp_containerHeight > windowHeight - 100) {
    imageHeight = (windowHeight - 100);
    imageWidth = (width/height) * imageHeight;
} else {
    fitting = true;
};

Answer 4

@media only screen and (max-width: 480px) { 

        *[class~=pp_pic_holder] { width: 100% !important; left: 0px !important; }  
        *[class~=pp_hoverContainer] { width: 90% !important; height: 180px !important;  }  
        *[class~=pp_fade] { width: 389px !important;  } 
        *[class~=pp_hoverContainer] { height: 190px !important;  }   
        *[class~=pp_right] { height: 220px !important;  }   
        *[class~=pp_content]  { height: 100% !important; width: 320px !important; }  
        #fullResImage { height: 100% !important; width: 320px !important; }  

}