Menù Tab con Slideshow

[claustrofobia]

Ciao ragazzi,
sto cercando disperatamente uno script (eventualmente anche in flash come da esempio che vi linko) che mi permetta di gestire varie immagini in sequenza o gestibili autonomamente tramite click sui numeretti come avviene su www.lastminute.com nella colonna di destra (ci sono 6 immagini visualizzabili).
Qualcuno può darmi una dritta?

Grazie.

[artorius]

http://www.moord.it/examples/glider_auto

Poi si tratta di stilare la cosa in modo che sia più bello graficamente.

[claustrofobia]

Grazie mille. Ora me lo spulcio per bene

[claustrofobia]

Non ho ben capito una cosa però. Faccio per scaricare la documentazione ma mi rimanda sempre nelle pagine interne. Mi aspetto di poter scaricare un js ma non ci riesco. Esiste uno zip con il materiale utile al mio scopo? il Glitter_auto mi andrebbe bene...

[artorius]

qui scarichi l'RD che sarebbe il file JS, da integrare con MooTools, per utilizzare Glider ed altro (se a te interessa SOLO Glider scarica SOLO quella parte)

http://www.moord.it/download/

Nella parte di Glider_auto ( http://www.moord.it/examples/glider_auto ) invece che cliccare su "doc reference" clicca su "js code" ti si aprirà il Div con il codice JS da aggiungere alla pagina (dopo aver importato RD e MooTools) per attivare l'effetto.

Purtroppo non c'è la parte di HTML, ma in sostanza è:

<div id="glider">
   <div id="images" class="images">
      <ul id="imgs">[*][img]/examples/1.3.1/glider_thumbs/images/p1.jpg[/img][*][img]/examples/1.3.1/glider_thumbs/images/p2.jpg[/img][*][img]/examples/1.3.1/glider_thumbs/images/p3.jpg[/img][*][img]/examples/1.3.1/glider_thumbs/images/p4.jpg[/img][/list]
   </div>
</div>

[christazio]

non capisco il funzionamento del download....
e non capisco che file mi servono per farlo funzionare

[artorius]

non è così complicato: cosa ti serve? Glider! cerchi allora glider.js clicchi su quello.
Poi cerchi la parte "Include MooTools" e selezioni "MooTools Full", ed infine clicchi sul bottone Download in fondo.
Questo, ti scarica un file che contiene tutto quello che ti serve, quindi ti basta importarlo nella pagina con <script src=".."></script> e poi fare un altro <script> dove incolli dentro il codice JS che prendi dalla pagina di esempio di glider_auto.

Infine, copi l'html che ti ho postato, cambi gli src delle immagini con le tue (sia nel codice HTML che nel JS), poi aggiungi questo CSS:

#images {
border:1px solid #CCCCCC;
height:350px;
overflow:hidden;
position:relative;
width:500px;
}
ul#imgs {
display:block;
height:350px;
list-style-type:none;
margin:0;
overflow:hidden;
padding:0;
position:relative;
}
ul#imgs li {
background-color:#000033;
border:medium none;
margin:0;
padding:0;
text-align:center;
}
img {
display:block;
margin:0 auto;
padding:0;
}
#captions {
background-color:#336699;
border:1px solid #CCCCCC;
color:#FFFFFF;
font-family:Georgia,"Times New Roman",Times,serif;
height:20px;
text-align:center;
width:500px;
}
#thumbsWrapper {
padding-top:10px;
width:500px;
}
#thumbsWrapper ul {
list-style-type:none;
}
#thumbsWrapper ul li {
display:block;
float:left;
height:30px;
margin-right:10px;
width:30px;
}
#thumbsWrapper ul li.activeThumb {
border:1px solid #000033;
}
#thumbsWrapper ul li img {
height:30px;
width:30px;
}
#thumbsWrapper ul li#leftArrow {
background-image:url(images/left2.gif);
background-repeat:no-repeat;
cursor:pointer;
}
#thumbsWrapper ul li#rightArrow {
background-image:url(images/right2.gif);
background-repeat:no-repeat;
cursor:pointer;
}
#thumbsWrapper .backToNormal {
color:#FFFFFF;
cursor:pointer;
float:right;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:14px;
font-style:italic;
text-decoration:underline;
}
#thumbsWrapper .backToNormal:hover {
color:#FF9966;
}

Per il resto fai un po' di prove.

[christazio]

grazie

[claustrofobia]

Grazie anche da parte mia per l'ulteriore spiegazione