Schalten Sie den Galleria Vollbildmodus um

Ich füge nur @ Ohgodwhys Antwort hinzu:

Der beste Weg, um die Galleria-Instanz zu erhalten und die API zu verwenden, ist die Galleria.ready-Funktion:

Oder Sie können auf die Instanz über das Objekt $.data zugreifen, wenn Sie wissen, dass die Galerie initialisiert ist:

Ich gehe davon aus, dass Sie einen Link / Button mit der ID 'fullscreen' haben und die Galerie bei ID 'galleria' ist.

Ich benutze:

lightbox: true,

vor Galleria.run() . Dadurch können Sie Vollbild-Overlay anzeigen, nachdem Sie auf das Bild in der Galerie geklickt haben.

Das sollte funktionieren:

JS

CSS

Wo fullscreen.png ein passendes Bild Ihrer Wahl ist.

Der Ansatz von Richard funktioniert sehr gut.

Sie können es auch tun, indem Sie Galleria ohne die ready-Funktion erweitern:

JS

Und wenn Sie ein fontAwesome-Symbol für das Maximierungssymbol verwenden möchten, können Sie es wie folgt implementieren (andere CSS-Stile finden Sie in Richards Beitrag):

CSS

(Denken Sie daran, das Stylesheet von fontAwesome mit <link rel="stylesheet" href="css/font-awesome.min.css"> aufzunehmen)

Ich habe immer noch ein Problem mit dem Maximieren-Button. Wenn ich darüber schwebe, wird es nicht weiß und bleibt grau. Vielleicht ist etwas mit dem IDLE-Status falsch, aber ich habe noch keine Lösung gefunden. (Wenn ich die Codezeile mit this.addIdleState(...) entferne, funktioniert das Schweben. Ich muss hier mehr Tests machen.)

Ich würde auch gerne das Symbol vom Maximieren zum Minimieren-Symbol ändern, sobald der Bildschirm im Vollbildmodus ist, aber ich weiß noch nicht, wie ich das machen soll. Das steht auch auf meiner Todo-Liste.

Update 07.02.2014

Ich habe herausgefunden, wie ich diese zwei Probleme lösen kann:

• Beim Problem "IDLE state" habe ich den IDLE-Status entfernt. Weil es mir egal ist, ob diese Steuerelemente permanent vorhanden sind und nun das Schweben wie erwartet funktioniert. Vielleicht überprüfe ich später eine andere Lösung.

• Um ein Symbol beim Klicken zu ändern, können Sie es mit CSS und jQuery machen:

  1. Fügen Sie eine übergeordnete CSS-Regel unterhalb des ersten vor-Filters des maximize-Symbols in Ihrem CSS hinzu:

     %Vor%

  2. Fügen Sie diese JS -Zeile nach gallery.toggleFullscreen() hinzu - das schaltet das Icon bei jedem Klick zwischen dem normalen vor-Stil und dem minimierten vor-Stil um:

     %Vor%

Dies funktioniert auch für eine Wiedergabe / Fortsetzen-Taste (der Rest des Codes ist ähnlich dem Vollbild-Code):

JS

Aus der Galleria-Dokumentation.

Damit wird die Galerie im Vollbildmodus eingestellt. Es wird vorübergehend einige Dokumentstile manipulieren und die Galerie in die Luft sprengen, um den Browserbildschirm abzudecken. Beachten Sie, dass es nur das Browserfenster und nicht den Clientbildschirm füllt (JavaScript kann das nicht).

Schaltet den Vollbildmodus um.

Wenn Sie weitere Erläuterungen zur Verwendung dieser benötigen, zögern Sie bitte nicht zu fragen.