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版本，请在第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 3

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

}

Answer 4

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

在第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.我认为这样可以正常使用。

为移动设备优化prettyPhoto灯箱？

5 个答案: