Css galleria immagini
Sempre un più curiosa di rifare esempi flash puramente in css, ho ripreso l’idea della galleria flash chiamata Illusion creata da Flep.
Questa galleria css d’immagini riusa stesse immagine sia per le miniature in verticale (impostate come sfondo con la proprietà background) che per la loro visualizzazione completa sullo stato hover (elemento <img>) dei link con relativa descrizione (elemento <span>).
Questi 2 elementi sono nascosti inizialmente con il display:none; e resi visibile con il display:block; impostando un z-index superiore per ricoprire le miniature e posizionati in modo assoluto in relazione al <div> contenitore.
Visualizza questa galleria css…
css-menu-esempio-7.zip (306.8 KiB, 5,039 hits)
Galleria css provata su IE6, IE7, FF2, FF3, Safari 3, Opera 9 su Windows.
PS: per chi di voi, si mette a studiare il html/css di questo esempio. Gli elementi <img> sono stati integrati dentro elementi <b>. La ragione è per rendere questa galleria css compatibile con IE6. Con Internet Explorer 6, il css applicato direttamente ai <img> non è interpretato nel modo corretto e rende questa galleria css del tutto inutilizzabile. Stranamente applicando stesso css ai <b> che contengono le immagini, il tutto funziona normalmente.
About The Author
Flep
Proprio bella Gaelle !
Patty
Sei proprio bravissima
Complimenti!
GIO
c’è il modo di avere una voce sempre aperta?
Roberta
Ciao, avrei un piccolo problema anche qui.
Ho preso il css per la galleria e sono riuscita a modificarla adattandola alle mie esigenze, adesso però mi si presenta un problema che riguarda il posizionamento della galleria nella pagina.
Io l’avevo settato in modo che la gallaria andasse esattamente dove la volevo io rispetto allo sfondo, purtroppo aprendola su altri pc mi sono accorta che la sua posizione cambia di volta in volta (da risoluzione a risoluzione credo) e non riesco a trovare un settaggio che permetta a galleria e sfondo di restare come io li metto.
ps. perdonate la carenza di termini tecnici, spero si capisca lo stesso
Onsitus
Ciao Roberta,
dipende come l’hai posizionato e delle proprietà  del tuo sfondo.
Se hai un link della pagina di prova e spieghi in piu dettagli come dovrebbe essere, magari si trova una soluzione
Roberta
Certo
questo è il link della pagina di prova (è il catalogo di una bottega di un gioco di ruolo online, non ti spanventare ) http://isolaavalon.altervista.org/bottega/catalogobalocchi.html
e questo è l’immagine di come la vedo io: http://isolaavalon.altervista.org/bottega/shotcatalogo.jpg
Le persone a cui ho chiesto di guardarlo mi hanno detto tutte che vedono la galleria spostata a sinistra, pare che la veda solo io come la volevo.
Ti ringrazio davvero tanto, sei gentilissima
Onsitus
Buongiorno Roberta,
il problema si pone quando ridimensiona la finestra. La galleria rimane a una posizione fissa mentre lo sfondo impostato al corpo della pagina si sposta basato sulle misure della finestra del browser.
Soluzione…
Struttura html:
<body>
<div id=”contenitore”>
<div id=”content”>
<!–aggiungi contenuto come galleria, testo…–>
</div>
</div>
</body>
Regole css:
body{
margin:0;
padding:0;
background-color:#000;
}
#contenitore{
width:1100px;
height:825px;
margin:auto;
background:url(http://isolaavalon.altervista.org/bottega/catolobalocchi_copy.jpg) no-repeat;
overflow:hidden;
}
#content{
width:680px;
margin:150px 0 0 310px; /*aggiustare margine se necessario*/
}
#css_galleria_1{
width:680px;
height:500px;
padding:20px 10px 20px 20px;
border:1px solid #FFFFFF;
position:relative;
}
In questo modo, ‘contenitore’ con l’immagine di sfondo rimanerà  sempre centrato e ‘content’ rimanerà  posizionato in rapporto a questo ultimo qualunque sia la risoluzione di monitor del utente.
Roberta
Grazie infinite, adesso anche questo è perfetto *_*
yughs
ciao molto carina, aggiungendo un pò di javascript potresti creare l’effetto dissolvenza prima di visualizzare completamente l’immagine..
Onsitus
Ciao Yughs,
vero ma preferisco mantenermi al css personalmente. Se lo vuoi aggiungere e condividere, sei sempre il benvenuto!
Marco
Ciao mi chiamo Marco. Ottimo esempio di galleria, ben fatta, bella da vedere, leggera e di facile navigazione. Mentre personalizzavo il codice mi è sorto un problema. Aggiungendo un paio di stringhe per mettere due immagini in più a quelle già presenti, succede che il pulsantino sottostante all’anteprima dell’immagine risulta attaccato alla successiva senza lo spazio che c’è tra quelli che lo precedono….cosa ho sbagliato?
Grazie mille!
Marco
risolto, grazie ancora =)
janca
ciao, senti posso utilizzare questo modo di far visualizzare le immagini nel mio sito??per caso è coperto da copyright?devo pagarti qualcosa??la trovo semplicemente eccezionale!!
fammi sapere!!
Onsitus
Uso delle utilitÃ
Sei libero di usare e modificare le utilità e template css per uso non-commerciale senza richiedere permesso.
Per uso commerciale, sarebbe apprezzato un email di notificazione e la presa in considerazione di una donazione per supportare il nostro lavoro.
In entrambi casi, il lavoro deve essere attribuito a l’autore come specificato nei file sorgente.
carmen
ciao,
sono molto principiante in ambito css ma mi ci sto avvicinando per creare un sito. la tua galleria mi piace moltissimo, volevo sapere se è possibile inserire delle freccine a destra e a sinistra per inserire un numero di immagini maggiori…
mi sapresti aiutare???
grazie moltissime