Vai al contenuto

jPhotoGrid: griglia di immagini

jPhotoGrid prende un semplice elenco di immagini e didascalie e lo trasforma in una griglia di foto che possono essere esplorate ed ingrandite.

Il trucco sta nel layout della griglia  che contiene una lista di voci. La prima cosa che il plugin svolgerà poi è convertire questa lista posizionandola in modo assoluto. Questo è ciò che permette al plugin di zoomare su una singola immagine e poi tornare al suo posto.

Il javascript è abbastanza facile da configurare: ha esclusivamente bisogno di sapere la dimensione delle miniature, e la dimensione ed il posizionamento dell’immagine ingrandita.

E’ anche possibile modificare le classi degli elementi attivi e selezionati modificando le classi  ‘activeClass’ e ‘selectedClass’ del foglio stile.

La lista delle immagini deve essere fornita nel seguente modo:

[html]
<ul>
<li>
<img src="immagine.jpg" alt="" />
<p>Didascalia immagine qui</p>
</li>

<ul>
[/html]

Il foglio stile deve invece contenere le seguenti voci:

[html]
#pg { position: relative; height: 585px; background: #000; }
#pg li { position: relative; list-style: none; width: 175px; height: 117px; overflow: hidden; float: left; z-index: 2; opacity: .3; }
#pg li.active { opacity: 1; }
#pg li.selected { opacity: 1; z-index: 99; -moz-box-shadow: 0px 0px 10px #fff; -webkit-box-shadow: 0px 0px 10px #fff; }
#pg li img { display: block; width: 100%; }
#pg li p { color: white; margin: 10px 0; font-size: 12px; }
[/html]

Per finire, questo il codice javascript da inserire:

[javascript]
$(‘#pg’).jphotogrid({
baseCSS: {
width: ‘175px’,
height: ‘117px’,
padding: ‘0px’
},
selectedCSS: {
top: ’50px’,
left: ‘100px’,
width: ‘500px’,
height: ‘360px’,
padding: ’10px’
}
});
[/javascript]

[Download non trovato]

Sito autore e demo: http://www.newmediacampaigns.com/files/posts/jphotogrid/example.html

Scritto da jqueryitalia

Sito WEB: https://www.jqueryitalia.org

Contenuto non disponibile.
Per visualizzarlo, devi acconsentire all'utilizzo dei cookies cliccando su "ACCONSENTO" nel banner sottostante.

Questo sito utilizza i cookies, anche di terze parti: se chiudi questo banner, scorri la pagina o continui con la navigazione, tu ACCONSENTI all'utilizzo dei cookies. MAGGIORI INFORMAZIONI

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi