[js/css] scorrere immagini..

[Gumble]

con php estraggo gli n indirizzi delle n immagini relative a un oggetto. mostrando l'oggetto in questione (sono case per l'esattezza) ho uno spazio dove dovrebbe apparire la prima delle n immagini.

sotto l'immagine voglio due pulsantini -> avanti e indietro che permettono di visualizzare le altre immagini una alla volta.

in poche parole penso che bisogni fare una cosa del genere:

da php mettere le immagini, renderle tutte invisibili tranne la prima e poi nei due bottoni (avanti e indietro) c'é un richiamo alla funzione javascript che permette di cambiare il valore "visible" della relativa immagine, nascondendo ovviamente quella vista in precedenza.

come si fa? avete qualcosa di pronto?... non ho molto tempo da dedicarci, quindi gradirei piu uno script (sebbene le spiegazioni sono sempre ben accette)!!!

grazie e spero di essere stato chiaro!

[pierofix]

Originariamente inviato da Gumble
penso che bisogni

Ecco un altro fan di Lapo.

Allora, una soluzione potrebbe essere la seguente.

XHTML

<div id="slideshow">
   <ul id="elenco_immagini">[*]
         [img]colosseo.jpg[/img]
      [*]
         [img]duomo.jpg[/img]
      
      [/list]
</div>


CSS

#elenco_immagini,
#elenco_immagini li
{
   padding:0; margin:0;
   list-style-type:none;
}
#slideshow a
{
   padding:0.3em; margin:1em;
   border:1px solid #CCC;
   color:#333;
   text-decoration:underline;
}
#slideshow a:hover
{
   color:#CCC; background-color:#333;
   cursor:pointer;
}
li.immagine_nascosta
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}


Javascript

window.onload = function()
{
   var slideshow = document.getElementById('slideshow')
   var elenco_immagini = document.getElementById('elenco_immagini')
   var immagini = elenco_immagini.getElementsByTagName('li')
   
   var totale_immagini = immagini.length
   var immagine_corrente = 0

   function nascondi_immagini()
   {
      for (var i = 0; i < totale_immagini; i++)
      {
         immagini.item(i).className = 'immagine_nascosta'
      }
   }
   function visualizza_immagine(indice)
   {
      nascondi_immagini()
      immagini.item(indice).className = ''
   }

   function avanti()
   {
      if ( immagine_corrente < totale_immagini - 1 )
      {
         immagine_corrente++
      }
      else
      {
         immagine_corrente = 0
      }
      visualizza_immagine(immagine_corrente)
   }
   function indietro()
   {
      if ( immagine_corrente > 0 )
      {
         immagine_corrente--
      }
      else
      {
         immagine_corrente = totale_immagini - 1
      }
      visualizza_immagine(immagine_corrente)
   }

   // Creiamo i pulsanti 'indietro' e 'avanti'
      var pulsante_indietro = document.createElement('a')
      var pulsante_indietro_testo = document.createTextNode('indietro')
      pulsante_indietro.appendChild(pulsante_indietro_testo)
      slideshow.appendChild(pulsante_indietro)
      pulsante_indietro.onclick = function()
      {
         indietro()
      }
      
      var pulsante_avanti = document.createElement('a')
      var pulsante_avanti_testo = document.createTextNode('avanti')
      pulsante_avanti.appendChild(pulsante_avanti_testo)
      slideshow.appendChild(pulsante_avanti)
      pulsante_avanti.onclick = function()
      {
         avanti()
      }

   // Inizializza
   visualizza_immagine(immagine_corrente)
}

Lasciami un secondo per pensare a come inserire meglio i due pulsanti nel mark-up.

[Gumble]

grazie per la risposta!


ah... non mi piace essere preso in giro per non aver premuto bene la "a" della tastiera!

[pierofix]

Originariamente inviato da Gumble
ah... non mi piace essere preso in giro per non aver premuto bene la "a" della tastiera!

Cioè? Fammi capire un attimo.

1. primo caso, "penso che bisognia": 'bisognia'?!?
   
2. secondo caso, "penso che bisogna": 'penso che bisogna'?!?

Se non vado errando, in italiano si dice: 'penso che ci sia bisogno di'. Così, da geometra ignorante quale sono...

Bon, dai, basta OT. Dai un'occhiata allo script e vedi se è quel che cercavi. L'ho scritto velocemente e spero di non aver seminato errori qua e là.

[Gumble]

cosi imparo a ribattere senza riflettere!

[mi arrampico sui vetri]
sarà perché parlo francese tutto il giorno?!
[/mi arrampico sui vetri]

cmq grazie ancora... stasera o domani provo a usarlo.

[Gumble]

l'ho provato! funziona alla perfezione! grazie mille