Optimieren prettyPhoto lightbox für mobile Geräte?

Ich bin derzeit mit prettyPhoto auf eine Seite, die ich arbeite, aber habe in ein kleines problem auf mobilen Geräten.

Sich das plugin die option "allow_resize: false", die bewirkt, Größenänderung von Fotos, die größer als der viewport ist jedoch die daraus resultierenden verkleinerten Bilder sind zu klein, in etwa 30-35% der viewport-Breite. Dies ist ein problem auf ein 480px breites Bildschirm die Bilder sind nur mit dem Bruchteil des verfügbaren Platzes.

Was ich versuche zu tun ist, um es zu skalieren, um etwa 95% des Viewports. Ich habe versucht dies zu beheben, mit css und media queries, aber ich laufen in ein problem, wo die vertikale Bilder über die ganze Seite laufen, wenn die Breite festgelegt ist, zu 95%.

Ich vermute, eine änderung der ursprünglichen plugin oder hinzufügen von javascript wäre eine bessere Lösung. Hat jemand irgendwelche Vorschläge auf die beste Weg, dies zu tun?

  • bump...........
InformationsquelleAutor photoman355 | 2012-12-08
  1. 17

    Versuchen, diese (nicht mein 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;
    }
}
    • wenn ich noch etwas hinzufügen .pp_hoverContainer { display: block!wichtig; } video-Steuerelemente nicht angezeigt
    InformationsquelleAutor rafael.dev
  2. 9

    Ich habe das gleiche Problem auf ziemlich Foto-und fand auch gleich den css-code beheben da geschrieben von rafael.dev. Allerdings scheint es immer noch nicht Recht gut, da der Vorherige-und nächste-button verschwinden und der Stil ist wirklich seltsam. Ich denke, dass das problem nur verursacht durch die Berechnung der Größe ändern, also versuche ich zu finden, das snippet von der resize-Funktion aus dem js-Quellcode und das war ganz einfach hab die Lösung wie folgt:

    Ich bin mit der version 3.1.6, suchen Sie bitte die Funktion _fitToViewport in Zeile 568.
    Dann scrollen Sie nach unten etwas mehr sehen Sie imageWidth = (windowWidth - 200); und imageHeight = (windowHeight - 200);

    Nur reduzieren Sie die Zahl und dann die mobile Ansicht wird sehr nett!!!! Ich versuchen Sie, viele Male und bekam die best-fit hat die Nummer 38 und 100. Sie können einfach kopieren Sie den folgenden code, um die ursprüngliche zu ersetzen:

    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;
};
    InformationsquelleAutor cambyliverson
  3. 1
    @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; }  

}
    InformationsquelleAutor Traian oprean
  4. 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; }

}
    • poste bitte eine klare Antwort.
    InformationsquelleAutor Jaydeep Patil
  5. 0

    Bearbeiten jquery.prettyPhoto.js auf Linie 580, finden Sie diesen code : 

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

    Ändern Sie einfach den Wert von 200 auf 30. Ich denke, das wird gut funktionieren für Sie.

    InformationsquelleAutor monirjnu
Schreibe einen Kommentar