为移动设备优化prettyPhoto灯箱？

Question

我目前正在我正在使用的网站上使用prettyPhoto,但在移动设备上遇到了一个小问题.

该插件具有"allow_resize:false"选项,该选项不允许调整大于视口的照片大小,但是生成的缩小图像在视口宽度的大约30-35%处太小.这是480px宽屏幕上的问题,因为图像仅利用可用空间的一小部分.

我要做的是让它重新缩放到视口的大约95%.我试过用css和媒体查询来解决这个问题但我遇到了一个问题,当宽度设置为95%时,垂直图像会从页面上运行.

我猜测修改原始插件或添加javascript将是一个更好的解决方案.有没有人对最佳方法有任何建议？

Answer 1

试试这个(不是我的代码):

/* 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 2

我在漂亮的照片上遇到了同样的问题,并找到了与rafael.dev发布的相同的css代码修复程序.然而,它似乎仍然不太好,因为上一个和下一个按钮消失,风格真的很奇怪.我认为问题只是由计算调整大小引起的,所以我尝试从js源找到resize函数的片段,这很容易得到如下解决方案:

我正在使用3.1.6版本,请_fitToViewport在568行找到该功能.然后向下滚动一些你会看到的imageWidth = (windowWidth - 200);和imageHeight = (windowHeight - 200);

只需减少数量,然后移动视图将变得非常好!我尝试多次调整并获得最佳拟合数为38和100.您可以复制以下代码来替换原始代码:

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;
};