为移动设备优化 prettyPhoto 灯箱？

Question

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

该插件有“allow_resize: false”选项，它不允许调整大于视口的照片大小，但是缩小后的图像在视口宽度的大约 30-35% 处太小了。这在 480 像素宽的屏幕上是个问题，因为图像只使用了可用空间的一小部分。

我想做的是让它重新缩放到大约 95% 的视口。我已经尝试使用 css 和媒体查询来解决这个问题，但我遇到了一个问题，即当宽度设置为 95% 时垂直图像会从页面上消失。

我猜修改原始插件或添加 javascript 会是更好的解决方案。有人对最好的方法有什么建议吗？

Answer 1

在第 580 行编辑 jquery.prettyPhoto.js 你会发现这段代码：

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

只需将值从 200 更改为 30。我认为这对你很有效。

Answer 2

@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 3

试试这个（不是我的代码）：

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

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

我使用的是3.1.6版本，请在第568行找到函数_fitToViewport。 然后向下滚动一些你会看到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;
};

Answer 5

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

}