Come creare una lightbox jQuery per aprire più immagini da un collegamento?

Question

Utilizzo di una lightbox come ColorBox o jQuery Lightbox Plugin come posso creare un singolo collegamento che apre una galleria/matrice di immagini?

Ad esempio, ho 1 miniatura e quando un utente fa clic su Voglio che apra più immagini nel lightbox in modo che l'utente possa fare clic su successivo o precedente per visualizzare tutte le immagini all'interno di quella galleria.

Il mio pensiero era che lo faccio come normale 1 collegamento a 1 immagine quindi utilizzare jquery per nascondere tutti tranne il primo collegamento. Ci deve essere un modo migliore?

Grazie.

Answer 1

Ecco la soluzione adeguata (e più efficiente):

HTML:

<div id='gallery'> 
    <a href="images/big-image1.jpg"> 
     <img src="images/thumbnail-image1.jpg"/> 
    </a> 
    <a href="images/big-image2.jpg" ></a> 
    <a href="images/big-image3.jpg" ></a> 
    <a href="images/big-image4.jpg" ></a> 
</div> 

jQuery/JS:

$(document).ready(function() { 
    $('#gallery a').lightBox(); 
}); 

Nota: Come si può vedere, è sufficiente elencare i collegamenti di ancoraggio alle altre immagini che si desidera separare dalla galleria. Non c'è bisogno di aggiungere immagini al markup e poi nasconderlo con JS. L'unica immagine che vedrai nell'esempio di markup sopra è images/thumbnail-image1.jpg Lightbox nasconde automaticamente il resto di loro e quindi mostra ciascuno al momento appropriato.

Answer 2

Potrei essere un equivoco, ma ho l'impressione che tu voglia fare qualcosa di più della galleria di stili "foto raggruppate" che offre ColorBox. Non sono abbastanza sicuro della funzionalità successiva/precedente che stai descrivendo, ma il mio pensiero sarebbe quello di scrivere questa funzionalità inizialmente senza ColorBox.

Aggiungi la tua galleria di visualizzazione a un div normale all'interno della pagina. Quando hai impostato la galleria e il suo comportamento a tuo piacimento, puoi chiamare ColorBox in linea sul tuo div (mostrando il controllo appena creato all'interno del popup).

Answer 3

utilizzando jQuery Lightbox Plugin, il codice di esempio dice di fare il seguente:

$(document).ready(function() { 
    $('#gallery a').lightBox({fixedNavigation:true}); 
    $('#gallery a:gt(0)').hide(); 
}); 

che rende tutti i collegamenti aprire una lightbox e dovrebbe avere il prossimo/Torna collegamenti per cercare attraverso la galleria. E 'quello che stai cercando?

(l'esempio è disponibile qui: http://leandrovieira.com/projects/jquery/lightbox/#example)

Answer 4

sembra che tu voglia usare un altro plugin. PrettyPhoto è perfetto per le gallerie. .

Answer 5

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a> 

Quindi:

rel="lightbox[renovation]"