Galleria scorrevole con link

  • Creatore Discussione Creatore Discussione indalo
  • Data di inizio Data di inizio

indalo

Utente Attivo
9 Gen 2010
43
0
0
Ho un'idea ma non sò se è realizzabile.

Mi è venuta perchè non volevo usare gli script (troppo pesanti).

Volevo creare coi css una galleria orizzontale di thumbnail (li) scorrevole grazie alla backgruond-position azionata da un onmouseclik ad incremento (-/+).

Sarebbe magnifico poter collegare un limk diverso per ogni miniatura che apre una foto diversa nello spazio soprastante.

Secondo voi è possibile ?
 
Codice:
#galleria {
width: 900px
height: 150px;
overflow: auto;
}

#galleria a:hover span {
display: block;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%
margin: -125; 0 0 -125px;
}

#galleria a {text-decoration:none}
#galleria a span {display: none;}
Con il foglio di stile qui sopra fai due cose: metti un div alto 100 pixel e largo 900 pixel in un punto della pagina in cui dentro metti le miniature delle immagini, se queste sono più della larghezza di 900 pixel apparirà la barra orizzontale per scorrere.
Poi, l'altro pezzo di codice, mette un box largo e alto 250 pixel al centro della pagina.
Le miniature staranno dentro un link che al suo interno avrà lo span con img dentro, insomma guarda il codice che è più facile a quest'ora scriverlo che descriverlo :D
Codice:
<div id="galleria"><a href="#galleria" title=""><span><img src="prima_immagine" alt="miniatura del cane" /></span></a><a href="#galleria" title=""><span><img sr...eccetera......</a></div>
Le misure in pixel ovviamente sono arbitrarie, il codice andrà sicuramente ottimizzato per il tuo sito, ma il sistema c'è.
Buon lavoro.

PS: lo vedi come il forum mostra il pezzo di codice xhtml? Ebbene usa la stessa tecnica solo non ci sono link che aprono le immagini, per il resto è uguaglio :D
 

Discussioni simili