Questo script permette di creare, in una pagina personalizzata, delle semplici gallerie di immagini consultabili separatamente. Al click sulla galleria da consultare, infatti, verranno visualizzate le miniature delle immagini presenti nella galleria stessa e al click sulla miniatura, verrà visualizzata l'immagine interessata. Le immagini si possono "scorrere" sia cliccando sulle miniature, sia cliccando sul bottone avanti/indietro e sia premendo le freccette da tastiera. Se l'utente che consulta la galleria è un amministratore, nella stessa pagina verrà visualizzato un semplice "generatore" di gallerie, attivabile tramite un bottone, che permetterà sia di crearne di nuove, sia di modificare quelle esistenti.
Potete trovare un esempio qui:
Gallery Demo
Guida all'installazione della Galleria di immagini:L'installazione dello script è molto semplice. Bisogna inserire nella pagina da trasformare in galleria, questo codice che non va
assolutamente modificato:
HTML
<script type="text/javascript" src="http://nb.forumfree.it/scripts/ace/img_gallery.js"></script>
<div id="image-gallery-main" class="imggallerypage nascosta">
</div>
In
Amministrazione -> Grafica -> Colori e stili invece va aggiunto:
CODICE
/* GALLERY - MODIFICABILE */
.galleryfirstimg img, .thumbimglist img {border: 3px solid #aaa}
#main-img img {border: 5px solid #aaa; max-width: 70%}
.closeimg, .nextimg, .previousimg {font-size: 14px; font weight: bold; color: #000; background: #AAA; padding: 10px; border-radius: 100px; -moz-border-radius: 100px; margin: 10px 10px 20px 10px; cursor: pointer; height: 10px; width: 10px; font-family: verdana; display: inline-block; line-height: 9px}
.closeimg:before {content: "x"}
.previousimg:before {content: "<"}
.nextimg:before {content: ">"}
.backtogal {font-size: 14px; font weight: bold; color: #000; background: #AAA; padding: 10px; border-radius: 5px; -moz-border-radius: 5px; margin: 10px 10px 20px 10px; cursor: pointer; font-family: verdana; display: inline-block; line-height: 9px}
.previousimg {position: absolute; left: 30px; top: 40%}
.nextimg {position: absolute; right: 30px; top: 40%}
img.gall-current {border-color: red}
Il CSS fornito è liberamente modificabile dato che non altera il funzionamento della galleria.
Guida all'inserimento delle gallerie:Per inserire le gallerie va semplicemente inserita una stringa di questo tipo:
CODICE
{"galleryName":"Nome Galleria", "galleryClass":"Classe Aggiuntiva", "galleryPreview":"Link Preview", "galleryLink":"Link1; Link2; Link2; ec..."}
all'interno del
div principale.
Esempio:HTML
<div id="image-gallery-main" class="imggallerypage nascosta">
{"galleryName":"Nome Galleria", "galleryClass":"Classe Aggiuntiva", "galleryPreview":"Link Preview", "galleryLink":"Link1; Link2; Link2; ec..."}
</div>
I campi possibili sono 4 e vanno inseriti separati da una virgola in questo modo:
CODICE
{"CAMPO1":"VALORE", "CAMPO2":"VALORE"}
I campi sono:
galleryName serve a settare il nome della galleria. Questo campo può essere omesso ma verrà settato il nome di default:
"Senza nome".
galleryClass serve a settare una classe aggiuntiva, utile a personalizzare una determinata galleria grazie al css (
.classeaggiuntiva {border: 5px solid #fff}). Anche questo campo può essere omesso.
galleryPreview serve a settare l'immagine preview della galleria. Anche questo campo può essere omesso ma verrà settata come preview la prima immagine
valida della galleria.
galleryLink serve a settare le immagini della galleria. Questo campo
non può essere omesso. Le immagini con link non valido non verranno incluse nella galleria, quindi saranno scartate durante la visualizzazione. I link vanno separati da un punto e virgola
;.
Esempio di galleria:CODICE
{"galleryName":"Sfondi", "galleryClass":"classetest", "galleryPreview":"http://img191.imageshack.us/img191/2117/splash1280x800.jpg", "galleryLink":"http://img40.imageshack.us/img40/1097/sfondifantasypanorama.jpg; http://img248.imageshack.us/img248/8162/sfondi01.jpg; http://img248.imageshack.us/img248/6556/sfondigratis1024x768.jpg"}
Per semplificare l'inserimento è stato inserito un generatore molto semplice accessibile grazie al bottone "
Genera Galleria", visualizzabile ai soli amministratori. Come già detto è possibile sia inserire una nuova galleria che modificarne una esistente.
Guida alla modifica degli stili:Il CSS fornito come già detto è modificabile.
Modificando:
CODICE
.galleryfirstimg img, .thumbimglist img {border: 3px solid #aaa}
#main-img img {border: 5px solid #aaa; max-width: 70%}
Si modifica il bordo delle immagini.
Modificando:
CODICE
.closeimg, .nextimg, .previousimg {font-size: 14px; font weight: bold; color: #000; background: #AAA; padding: 10px; border-radius: 100px; -moz-border-radius: 100px; margin: 10px 10px 20px 10px; cursor: pointer; height: 10px; width: 10px; font-family: verdana; display: inline-block; line-height: 9px}
.backtogal {font-size: 14px; font weight: bold; color: #000; background: #AAA; padding: 10px; border-radius: 5px; -moz-border-radius: 5px; margin: 10px 10px 20px 10px; cursor: pointer; font-family: verdana; display: inline-block; line-height: 9px}
Si può modificare l'aspetto dei bottoni per scorrere le immagini della galleria e per chiuderla.
Modificando:
CODICE
.closeimg:before {content: "x"}
.previousimg:before {content: "<"}
.nextimg:before {content: ">"}
Si può modificare il simbolo dei bottoni e volendo si può inserire anche un'immagine.
Modificando:
CODICE
.previousimg {position: absolute; left: 30px; top: 40%}
.nextimg {position: absolute; right: 30px; top: 40%}
Si possono spostare i bottoni per scorrere le immagini della galleria.
Modificando poi:
CODICE
img.gall-current {border-color: red}
Si modifica la miniatura relativa all'immagine visualizzata (in questo caso modifichiamo solo il colore del bordo).
Edited by A c e - 8/1/2015, 10:48
