Toggle Galleria Modalità schermo intero

Question

Mi chiedo se qualcuno sa come passare da schermo intero e la modalità normale in Galleria

L'unico modo che posso pensare è quello di passare da temi: di default, e il tema a tutto schermo (che ho acquistato da lì)

Se conoscete un modo ancora migliore, gradirei il vostro aiuto.

Answer 1

Sto solo andando da aggiungere alla risposta di @ Ohgodwhy:

Il modo migliore per ottenere l'istanza Galleria e utilizzare l'API è quello di utilizzare la funzione Galleria.ready:

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

Oppure, è possibile accedere all'istanza tramite l'oggetto $.data se si sa che la galleria si inizializzato:

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

io parto dal presupposto di avere un/pulsante di collegamento con fullsc l'ID' reen 'e la galleria è al numero' galleria '.

Answer 2

Dalla documentazione di Galleria.

.enterFullscreen([callback]) 

Questo imposterà la galleria in modalità schermo intero. Manipolerà temporaneamente alcuni stili del documento e farà esplodere la galleria per coprire lo schermo del browser. Si noti che riempirà solo la finestra del browser, non lo schermo del client (javascript non può farlo).

.toggleFullscreen([callback]) 

Attiva/disattiva la modalità a schermo intero.

Se avete bisogno di ulteriori spiegazioni sull'uso di questi, non esitate a chiedere.

Answer 3

Questo dovrebbe funzionare:

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

Dove fullscreen.png è un'immagine appropriata della vostra scelta.

Answer 4

sto usando:

lightbox: true,

prima Galleria.run(). Ciò consente di visualizzare Overlay a schermo intero dopo aver fatto clic sull'immagine nella galleria.

Answer 5

L'approccio di Richard sta funzionando molto bene.

Si potrebbe anche farlo estendendo Galleria con-la funzione pronta:

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

E se si desidera utilizzare un'icona fontAwesome per l'icona di ingrandimento è possibile implementarlo come segue (altri stili CSS vedi post di Richard):

CSS

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

(tenere a mente per includere il foglio di stile di fontAwesome con <link rel="stylesheet" href="css/font-awesome.min.css">)

ancora sto avendo un problema con il pulsante di ingrandimento. Se ci si libra sopra, non diventa bianco e rimane grigio. Forse qualcosa con lo stato IDLE è sbagliato, ma non ho ancora trovato una soluzione. (Se rimuovo la riga di codice con this.addIdleState(...) funziona il passaggio del mouse. Devo fare altri test qui.)

Vorrei anche cambiare l'icona da ingrandire a icona di riduzione a icona una volta che lo schermo è a schermo intero, ma io non so come farlo ancora Questo è anche nella mia lista delle cose da fare.

Aggiornamento 07.02.2014

ho capito come risolvere questi due problemi:

• Per il rilascio "stato IDLE" - Ho rimosso lo stato IDLE. Perché non mi interessa se questi controlli sono permanenti e ora il volo stazionario funziona come previsto. Forse controllerò un'altra soluzione più tardi.

• Per cambiare un'icona al clic si può fare con i CSS e jQuery:

  1. Aggiungi una regola imperativa CSS sotto la prima prima del filtro dell'icona di ingrandimento nella CSS esempio:

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

  2. Aggiungere questi JS linea dopo gallery.toggleFullscreen() - che alterna l'icona con ogni clic tra il normale prima di stile e la mi nimize prima di stile:

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

Questo funziona anche per un pulsante di riproduzione/resume (resto del codice è la simillar al codice a schermo intero):

JS

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