Galleria scorrevole con link

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 ?
 

MarcoGrazia

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
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
Autore Titolo Forum Risposte Data
F [PHP] Galleria immagini PHP 6
Z Problema Galleria Javascript Javascript 1
V Galleria con CSS e Javascript Javascript 2
I [CSS] Galleria immagini non funziona HTML e CSS 12
M [wordpress-galleria immagini]Inserire classe php in html PHP 0
J Creata galleria fotografica con Adobe Bridge ...... Webdesign e Grafica 7
L [php e xml] per creare una galleria fotografica con diversi file xml PHP 0
S Galleria fotografica con geotag Webdesign e Grafica 14
ANDREA20 [HTML] galleria immagini HTML e CSS 2
T Galleria fotografica con valutazione HTML e CSS 5
asevenx cerco plugin per miniature galleria fotografica in widjet WordPress 1
M element style immodificabile dentro una galleria javascript Javascript 6
P domanda su galleria HTML e CSS 4
L effetto galleria popup (immagini) jQuery 1
J Video galleria in php no prende l'id PHP 1
J Galleria di video PHP 1
L Centrare galleria immagine HTML e CSS 2
L galleria fotografica da cartella PHP 10
Monital galleria a fisarmonica con aga.js jQuery 3
M Galleria fotografica per inserzioni eBay HTML e CSS 1
asevenx galleria fotografica che da problemi con Internet Explorer Javascript 1
B creare galleria fotografica dreamweaver HTML e CSS 1
J Galleria fotografica jq editabile jQuery 0
R Problema con didascalie galleria immagini PHP 1
M Galleria fotografica HTML e CSS 1
R galleria immagini semplice a schermo intero jQuery 1
A Creare una galleria foto senza refresh PHP 0
Trapano Galleria immagini semplice PHP 5
R Galleria di immagini ad apparimento jQuery 1
A Problema gestione galleria fotografica in java Javascript 4
S Galleria Fotografica HTML e CSS 1
asevenx carattere speciale da togliere in script galleria jquary jQuery 4
M Galleria funziona solo dopo refresh PHP 56
O Galleria Facebook nel proprio sito wwb PHP 3
E Visualizzazione galleria in pagina php da datebase PHP 3
I Perchè devo cliccare 2 volte su un link per caricare correttamente il css di una galleria? WordPress 1
P galleria immagine javascript Javascript 5
F Problemi con il mio primo sito, galleria fai da te non visualizzata correttamente HTML e CSS 1
P galleria fotografica per parco auto Webdesign e Grafica 12
P Problema caricamento/sostituzione immagini galleria php-jquery jQuery 2
A galleria jquery: problema nel caricamento di una immagine da un'anteprima HTML e CSS 10
P Creare una galleria di prodotti CMS (Content Management System) 0
Eruyomon Galleria fotografica Veloce jQuery 13
P Galleria immagini semplice Javascript 5
P Galleria immagini HTML e CSS 5
A Galleria gd2 PHP 2
N galleria interattiva e upload Java 3
E galleria per sito web Javascript 0
A Galleria d'immagini con PHP, Le GD2 e Mysql PHP 5
D Galleria fotografica da gestire autonomamente Flash 1

Discussioni simili