Ognuno ha un passato, e c'è stato un tempo in cui, invece di essere leggermente sopra la media, ero ben al di sotto. All'epoca, pubblicai un codice piuttosto macchinoso e poco configurabile per creare una semplice galleria di immagini con miniature . Poco dopo, ne progettai una responsive che utilizzava solo CSS , ma entrambe presentavano carenze o svantaggi, in misura maggiore o minore.
E cosa c'è di così speciale in quella di oggi? Beh, semplicemente creando un elenco di immagini, viene generata automaticamente una galleria con miniature, che permette di visualizzare l'immagine ingrandita quando si clicca.
Puoi anche aggiungere più di una galleria di questo tipo per pagina . Il set è responsive (RWD) e non ha limitazioni sul numero di immagini o sulle loro dimensioni.
Non ci sono limitazioni, ma per motivi estetici, potrebbe essere meglio limitare il numero di immagini a 10 (semplicemente per evitare che le miniature sembrino troppo piccole) e avere approssimativamente lo stesso rapporto larghezza/altezza, evitando di mescolare formati verticali e orizzontali. Quest'ultima soluzione servirebbe a evitare spazi vuoti visibili.
Dimostrazione
Qui sotto c'è la versione con le miniature in alto, e più avanti ne vedremo un'altra con le miniature in basso. Potete provarla.
Aggiunta del codice necessario
La prima cosa da fare è assicurarsi di aver caricato la libreria jQuery nel template. In caso contrario, inserire la seguente riga (in Blogger, subito dopo ]]></b:skin> ):
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
Puoi aggiungere lo stile e il codice JavaScript a un gadget o a un template. Se è nel template, si troverà tra ]]></b:skin> e </head> e, in ogni caso, sempre dopo aver caricato jQuery. Sarà quello successivo, uno dopo l'altro, quindi può essere rimosso facilmente e immediatamente se in futuro il plugin dovesse stancarti .
<style>
ul.obgaleria{larghezza: 100%;altezza:0;overflow:nascosto;margine: 30px auto;stile elenco: nessuno;sfondo:trasparente;dimensione carattere:0;altezza linea:0;}
ul.obgaleria li{posizione: relativa;display:inline-block;altezza:0;margine:0;stile elenco:nessuno;cursore:puntatore;allineamento verticale:alto;overflow:nascosto;}
ul.obgaleria li img {posizione: assoluta;alto: -150%;basso: -150%;sinistra: -150%;destra: -150%;larghezza: auto;larghezza massima: nessuno;altezza: 150%;margine: auto;imbottitura:0;bordo:0;}
ul.obgaleria li:ultimo figlio img {alto: 0;basso: 0;sinistra: 0;destra: 0;margin: auto;width: 100%;height: auto;}
ul.obgaleria li {border-left: 3px solid transparent;border-bottom: 3px solid transparent;box-sizing: border-box;}
ul.obgaleria li:first-child, ul.obgaleria li:last-child {border-left:0;}
</style>
<script type='text/javascript'>//<![CDATA[
var prop = 60.00; // rapporto altezza/larghezza*100 immagine principale
$(document).ready(function() {
$("ul.obgaleria").each(function() {
var id = "#" + $(this).attr("id");
var width = 100 / $(id + " li").length;
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + width) + "% 0;} " + id + " li{width:" + width + "%;padding: 0 0 " + width + "% 0;} " + id + " li:last-child {padding-bottom: " + prop + "%;}</style>");
$(id +
" li:first-child"). clone()
.appendTo(id);
});
$(id + " li").click(function() {
$(id + " li:last-child").remove()
$(this).clone().appendTo(id).animate({
width: "100%"
}, 200);
});
});
});
//]]></script>
La variabile var prop = 60.00 viene utilizzata per determinare la proporzione delle immagini da utilizzare. Basta dividere l'altezza per la larghezza e moltiplicare per 100. Se, ad esempio, sono larghe il doppio dell'altezza, il valore sarà 50, e se sono quadrate, il valore sarà 100.
Tutti questi valori devono essere sommati una sola volta.
Creazione dell'elenco delle immagini
La struttura HTML, ovvero ciò che dovrai inserire in un gadget o all'interno di un post, sarà l'elenco delle immagini con il numero che desideri.
<ul class="obgaleria" id=" gallery1 "> <li><img src="URL_IMAGE1.jpg"/></li> <li><img src="URL_IMAGE2.jpg"/></li> <li><img src="URL_IMAGE3.jpg"/></li> </ul>
Sebbene la classe obgaleria sia obbligatoria , puoi specificare qualsiasi valore desideri all'interno dell'id . Tieni presente che se aggiungi più di una galleria per pagina, l'id deve essere diverso per ogni elenco.
E questo è tutto. Ogni volta che aggiungi un elenco di immagini come quello sopra con la classe obgaleria , diventerà una galleria.
A cosa serve JavaScript?
Il codice principale cerca nella pagina tutte le liste che hanno la classe obgaleria (1). Per ciascuna, individua e registra il suo id (2) e da lì calcola quante immagini la lista deve avere per dividere la larghezza totale per quel numero (3).
Quindi utilizziamo tutti questi dati per formattare le dimensioni delle miniature e lo spazio per l'immagine grande con CSS, aggiungendo lo stile necessario nell'head ( 4).
Affinché lo spazio grande non risulti vuoto fin dall'inizio, cloniamo la prima immagine e la aggiungiamo alla fine della lista (5). Ingrandiamo quella che ora sarà l'ultima (spazio grande) alla massima larghezza disponibile (6). E aspettiamo un clic (7).
Ora non resta che eliminare l'ultima immagine (spazio grande) quando si verifica (8), quindi clonarla di nuovo e posizionare quella cliccata nello stesso punto (9). Questo passaggio include una piccola animazione che gioca con la larghezza.
(x) var prop = 60,00; // rapporto altezza/larghezza*100 immagine principale
(x) $(document).ready(function() {
(1) $("ul.obgaleria").each(function() {
(2) var id = "#" + $(this).attr("id");
(3) var width = 100 / $(id + " li").length;
(4) $("head").append("<style>" + id + "{padding: 0 0 " + (prop + width) + "% 0;} " + id + " li{width:" + width + "%;padding: 0 0 " + width + "% 0;} " + id + " li:last-child {padding-bottom: " + prop + "%;}</style>" )
; (7) $(id + " li").click(function() { (8) $(id + " li:last-child").remove() (9) $(this).clone().appendTo(id).animate({width: "100%"}, 200); (x) }); (x) }); (x) });
Variante con miniature sotto
Sia il CSS che il JavaScript cambiano un po' perché ora l'immagine grande sarà la prima e non l'ultima.
ul.obgaleria{larghezza: 100%;altezza:0;overflow:nascosto;margine: 30px auto;stile elenco: nessuno;sfondo:trasparente;dimensione carattere:0;altezza linea:0;}
ul.obgaleria li{posizione: relativa;display:inline-block;larghezza:100%;altezza:0;margine:0;stile elenco:nessuno;cursore:puntatore;allineamento verticale:alto;overflow:nascosto;}
ul.obgaleria li img {posizione: assoluta;alto: -150%;basso: -150%;sinistra: -150%;destra: -150%;larghezza: auto;larghezza massima: nessuno;altezza: 150%;margine: auto;imbottitura: 0;bordo:0;}
ul.obgaleria li:first-child img {alto: 0;basso: 0;sinistra: 0;destra: 0;margine: auto;larghezza: 0;altezza: auto;}
ul.obgaleria li {bordo-sinistra: 3px solido trasparente;bordo-superiore: 3px solido trasparente;box-sizing: bordo-box;}
ul.obgaleria li:nth-child(2), ul.obgaleria li:first-child {bordo-sinistra:0;}
<script type='text/javascript'>//<![CDATA[
var prop = 60.00; // rapporto altezza/larghezza*100 immagine principale
$("ul.obgaleria").each(function() {
var id = "#" + $(this).attr("id");
var width = 100 / $(id + " li").length;
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + width) + "% 0;} " + id + " li{width:" + width + "%;padding: 0 0 " + width + "% 0;} " + id + " li:first-child {width: 100%;padding-bottom: " + prop + "%;}</style>");
$(id + " li:first-child").clone().prependTo(id);
$(id + " li:first-child img").css({
"width": "100%"
});
$(id + " li").click(function() {
$(id + " li:first-child").remove()
$(this).clone().prependTo(id);
$(id + " li:first-child img").animate({
width: "100%"
}, 200);
});
});
//]]></script>
Codepen dove esercitare
Miniature sopra: http://codepen.io/oloman/pen/VaqVww
Miniature sotto: http://codepen.io/oloman/pen/wGZKzM
Commenti
Posta un commento