Przegubowe Galleria Tryb pełnoekranowy

Question

Zastanawiam się, czy ktoś wie, jak przełączać między trybem pełnoekranowym i trybie normalnym w Galleria

Jedynym sposobem mogę myśleć jest przełączenie pomiędzy tematami: domyślnie i pełnoekranowym tematu (co kupiony stamtąd)

Jeśli znasz jeszcze lepszy sposób, byłbym wdzięczny za twoją pomoc.

Answer 1

jestem po prostu zamiar dodać do @ Ohgodwhy za odpowiedź:

Najlepszym sposobem, aby uzyskać instancję Galleria i używać API jest użycie funkcji Galleria.ready:

Galleria.ready(function() { 
    var gallery = this; // galleria is ready and the gallery is assigned 
    $('#fullscreen').click(function() { 
    gallery.toggleFullscreen(); // toggles the fullscreen 
    }); 
}); 

Lub można uzyskać dostęp do instancji za pośrednictwem obiektu $.data jeśli wiesz, że galeria jest inicjowany:

$('#fullscreen').click(function() { 
    $('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen 
}); 

ja zakładając masz link/przycisk z identyfikatorem „fullsc reen ", a galeria jest na" Galleria "ID.

Answer 2

Z dokumentacji Galleria.

.enterFullscreen([callback]) 

Spowoduje to ustawienie galerii w trybie pełnoekranowym. To tymczasowe manipulowanie niektórymi stylami dokumentów i wysadzenie galerii, aby zakryć ekran przeglądarki. Zauważ, że wypełni on tylko okno przeglądarki, a nie ekran klienta (javascript nie może tego zrobić).

.toggleFullscreen([callback]) 

Przełącza tryb pełnoekranowy.

Jeśli potrzebujesz dalszych wyjaśnień na temat ich użycia, nie wahaj się zapytać.

Answer 3

To powinno działać:

JS

Galleria.loadTheme('http://aino.github.com/galleria/demos/categories/themes/classic/galleria.classic.min.js'); 

$('#galleria').galleria(); 

Galleria.ready(function() { 
    var gallery = this; 
    this.addElement('fscr'); 
    this.appendChild('stage','fscr'); 
    var fscr = this.$('fscr') 
     .click(function() { 
      gallery.toggleFullscreen(); 
     }); 
    this.addIdleState(this.get('fscr'), { opacity:0 }); 
}); 

CSS

.galleria-fscr{ 
    width:20px; 
    height:20px; 
    position:absolute; 
    bottom:0px; 
    right:10px; 
    background:url('fullscreen.png'); 
    z-index:4; 
    cursor: pointer; 
    opacity: .3; 
} 
.galleria-fscr:hover{ 
    opacity:1; 
} 

fullscreen.png Gdzie jest odpowiedni wizerunek swojego wyboru.

Answer 4

Używam:

lightbox: true,

przed Galleria.run(). Pozwala to wyświetlić nakładkę pełnoekranową po kliknięciu obrazu w galerii.

Answer 5

Podejście Richarda działa bardzo dobrze.

Można również zrobić to poprzez rozszerzenie Galleria-out z gotowej funkcji:

JS

Galleria.run('.galleria', { 

    // configure 
    autoplay: true, 
    lightbox: true, 
    idleMode: true, 

    // extend theme 
    extend: function() { 
     var gallery = this; // "this" is the gallery instance 

     //fullscreen button 
     this.addElement('fscr'); 
     this.appendChild('stage','fscr'); 
     var fscr = this.$('fscr').click(function() { 
      gallery.toggleFullscreen(); 
     }); 

     // this.addIdleState(this.get('fscr'), { opacity:0 }); 
    } 
    });` 

A jeśli chcesz użyć ikonę fontAwesome ikona maksymalizacji można wdrożyć go w następujący sposób (inne style CSS patrz post Richarda):

CSS

.galleria-fscr:before { 
     content: "\f065"; /* char code for fa-expand */ 
     position: absolute; 
     font-family: FontAwesome; 
     color: #fff; 
    } 

(należy pamiętać, aby zawierać arkusz stylów z fontAwesome z <link rel="stylesheet" href="css/font-awesome.min.css">)

ciągle mam jeden problem z przycisku maksymalizacji. Jeśli się nad tym kręcę, nie robi się biały i pozostaje szary. Może coś ze stanem IDLE jest złe, ale jeszcze nie znalazłem rozwiązania. (Jeśli usunę linię kodu z this.addIdleState(...), unoszą się prace, muszę wykonać więcej testów tutaj.)

Chciałbym również zmienić ikonę z ikony maksymalizacji na ikonę minimalizacji, gdy ekran jest na pełnym ekranie, ale ja nie wiem jak to jeszcze zrobić. To również na mojej liście rzeczy do zrobienia.

Aktualizacja 07.02.2014

zorientowali się, jak rozwiązać te dwa problemy:

• Dla „stanie spoczynku” problem - Usunąłem stanu bezczynności. Ponieważ nie obchodzi mnie, czy te elementy sterujące są na stałe, a teraz zawisanie działa zgodnie z oczekiwaniami. Może później sprawdzę inne rozwiązanie.

• Aby zmienić ikonę na kliknięciem można zrobić z CSS i jQuery:

  1. Dodaj regułę nadrzędnym CSS poniżej zanim filtr ikonę maksymalizacji w CSS np

     .galleria-fscr.minimize:before{ 
         content: "\f066"; 
     } 
     

  2. Dodaj te JS linia po gallery.toggleFullscreen() - który przełącza ikonę z każdym kliknięciem pomiędzy normalną przed stylu i MI nimalizuj przed styl:

     $(".galleria-fscr").toggleClass("minimize"); 
     

ta działa również na przycisk odtwarzania/wznowienie (reszta kodu jest zblizonym do kodu pełnym ekranie):

JS

... 
    gallery.playToggle(); 
    $('.galleria-pauseResumeBtn').toggleClass("resume");