Responsive Galleria

Question

Ich versuche dieses Plugin Galleria in seinem reaktionsfähigen Modus zu verwenden, was bedeutet, dass es sich basierend auf seiner Containergröße re-drawt, wenn das Fenster neu skaliert. Die Demo auf dem von mir bereitgestellten Link zeigt ein wirklich gutes Beispiel. Sie können sehen, dass sich die gesamte Galerie bei der Größenanpassung des Fensters entsprechend anpasst. Jetzt ist mein Problem, das Plugin lässt mich die Galerie nicht initialisieren, außer es wurde eine Höhe für das DOM-Element angegeben, das als Container verwendet wird. Das bedeutet, ich musste eine ganze Menge JavaScript-Code schreiben, um auf die Fenstergröße zu reagieren - es zerstört den Punkt, dass es ziemlich reaktionsschnell ist - aber auf der obigen Webseite kann ich nirgendwo eine explizite Höhe finden. Kann mir jemand erklären, wo ich falsch liege?

Answer 1

Ich habe es selbst herausgefunden. Meine Antwort senden -

Bei der Initialisierung der Galerie - geben Sie Ihre Höhe in Prozent an - wie unten. Ich nehme an, dass es in diesem Fall 50% der Fensterhöhe als Wert nimmt. Auf diese Weise brauchen Sie nicht explizit Höhen überall angeben und es funktioniert wie beworben

Galleria.run('#gallery', {responsive:true, height:0.5, debug:false}); 

Answer 2

Die Höhe Option (wenn es < 2.0 ist) ist auf die Breite des Behälters relativ. So hätte height:0.5 eine Höhe, die die halbe Breite des Containers beträgt (w = 2, h = 1).

height:1.5 würde in (w = 2, h = 3) ergeben

Um es reagiert, halten Sie max-width anstatt width wenn das Styling der Behälter verwenden können.

Wenn die Option height auf 2.0 oder höher eingestellt ist, wird sie als Pixel interpretiert. So wird height:2.0 nur 2px groß sein.

Answer 3

Galleria braucht eine Höhe, um korrekt initialisiert zu werden. Sie können dies entweder über CSS oder JS tun.

Wenn Sie möchten, dass es die Breite und Höhe des Bildschirms füllt, würde ich empfehlen, eine Breite und Höhe von 100% über CSS einzustellen. Und der übergeordnete Container muss 100% sein. Siehe unten.

**JS:** 
Galleria.run('#galleria', { 
    responsive:true, 
    showCounter:true, 
    thumbnails:false, 
    trueFullscreen:true, 
}); 

**CSS:** 
#galleria{ 
    width:100%; 
    height: 100%; 
    position: fixed; 
    z-index: 9999; 
    top:0px; 
    bottom: 0px; 
} 
body,html{ 
    height:100%; 
    width:100%; 
}