Ecco una favolosa gallery che vi permette di visualizzare le foto in maniera molto realistica, caratterizzata da un drag & drop su tutta la superficie della pagina web! Ideale per mettere in risalto particolari foto in maniera più creativa, da inserire nel vostro Sito/Blog . Download gratis ora!
Facilissima da utilizzare e completamente personalizzabile.Spiego come, la gallery è così composta:
style.css
script.js
index.php
cartella images
basta inserire la cartella contenente il tutto, all’interno del vostro server, caricare tutte le foto all’interno della cartella images , aprire il file index, e il gioco è fatto! Ogni qualvolta inserite una nuova foto all’interno della cartella images, la gallery si aggiornerà in maniera autonoma, visualizzando la nuova foto inserita! Senza aggiornare particolari file o mettere mani nel codice.
Personalizzare la gallery
Per personalizzare la gallery si deve conoscere un minimo di css, il file style.css determina lo stile che le immagini devono avere, ovvero le dimensioni della foto, la cornice, font, colori, etc..
Spieghiamo ora in pochi passi come effettuare alcune modifiche.
Mettiamo il caso di voler personalizzare lo sfondo, la cornice e le dimensioni delle immagini.
Passo 1: cambiare lo sfondo
Andare nella cartella images/sfondo e sostituire lo sfondo bg.jpg con uno a tuo piacimento. Per evitare brutte visualizzazioni ,lo sfondo dovrà essere una texture uniforme, perché questo si ripeterà per x e per y in modo da coprire tutta l’area della finestra web.
Passo 2: cambiare la cornice
Per cambiare la cornice della foto, andare in images/sfondo e sostituire il file foto-bg.png con una a tuo piacimento. Appuntatevi le dimensioni della nuova cornice e andate a modificare nel file style.css il tag width e height con le dimensioni appuntate prima
.foto {
width:???px;
height:???px;
background-image:url(../images/sfondo/foto-bg.png);
position:absolute;
}
Passo 3: dimnesionare le immagini
A questo punto dovremmo ridimensionare le foto. Per fare questo bisogna modificare quest’altro pezzo di codice css, impostando width e height leggermente più piccoli delle dimensioni della cornice, circa 30px in meno, per far visualizzare un po’ di bordo della cornice.
.foto img {
width:???px;
height:???px;
margin:9px 0 0 7px;
}
Adesso è possible che l’immagine non sia completamente alliniata alla cornice, è quindi necessario giocare con la proprietà margin per shiftare a destra, sinistra, su e giù l’immagine di quanti pixel sia necessario.
La proprietà necessità di 4 parametri rispettivamente , alto, destra, sotto e sinistra, espressi in px.
[download id=”3″ format=”1″]