• User Attivo

    cambiamento testo con galleria immagini

    buongiorno a tutti.. ho scritto questo semplicissimo codice per creare una piccola galleria di immagini. Un link avanti ed uno indietro richiamano la funzione scorri() con un + od un - come parametro... fin qui tutto bene. vorrei aggiungere un testo del tipo immagine 1 di 6, immagine 2 di 6, ecc... sopra all'immagine. e qui sono dolori, per uno scarso come me! al primo caricamento della pagina va tutto bene, ma poi il testo non cambia più... come devo fare?

    <script type="text/javascript">
    immagini=new Array("immagini/1.jpg","immagini/2.jpg","immagini/3.jpg","immagini/4.jpg","immagini/5.jpg","immagini/6.jpg")
    
    var indice=0;
    var testo=" ";
    
    function scorri(verso) {
      if (verso=="+") {
         if (indice<(immagini.length-1)){
            indice++;
         }
         else{
            indice=0;
         }
         testo=aggiornaTesto();
         document.getElementById("galleria").src = immagini[indice];
      }
      if (verso=="-") {
         if (indice>0){
            indice--;
         }
         else{
             indice=(immagini.length-1);
         }
         testo=aggiornaTesto();
         document.getElementById("galleria").src = immagini[indice];
      }
    
    }
    function aggiornaTesto(){
             testo="immagine "+ (indice+1) +" di "+immagini.length;
             return testo;
    }
             
    
    </script>
    
    <p> <script type="text/javascript">
        var scritta=aggiornaTesto();
        document.write(scritta);
        </script>
    <a href="javascript: scorri('-');">Indietro</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="javascript: scorri('+');">Avanti</a></p>
    <img id="galleria" src="immagini/1.jpg">
    

  • Super User

    Ciao 🙂

    Dovresti inserire una cosa simile...

    document.write("Immagine "+indice+" di "+immagini.length);
    

    :ciauz:


  • User Attivo

    ma come faccio a refreshare l'indice ogni volta che schiaccio il link?

    quella parte di codice c'era già...

    function aggiornaTesto(){
    testo="immagine "+ (indice+1) +" di "+immagini.length;
    return testo;
    }

    </script>

    <p> <script type="text/javascript">
    var scritta=aggiornaTesto();
    document.write(scritta);
    </script>


  • User Attivo

    ho risolto il tutto rendendo i link bottoni e mettendo la scritta in un campo <input type="text"... non è granché esteticamente, ma funziona... inserisco il codice se potesse essere comodo a qualcuno!

    immagini=new Array("immagini/1.jpg","immagini/2.jpg","immagini/3.jpg","immagini/4.jpg","immagini/5.jpg","immagini/6.jpg");
    testo=new Array("immagine 1 di 6", "immagine 2 di 6", "immagine 3 di 6", "immagine 4 di 6","immagine 5 di 6", "immagine 6 di 6");
    var indice=0;

    function scorriAvanti() {
    if (indice<(immagini.length-1)){
    indice++;
    }
    else{
    indice=0;
    }
    document.forms["form"].testo.value = testo[indice];
    document.getElementById("galleria").src = immagini[indice];
    }
    function scorriIndietro() {
    if (indice>0){
    indice--;
    }
    else{
    indice=(immagini.length-1);
    }
    document.forms["form"].testo.value = testo[indice];
    document.getElementById("galleria").src = immagini[indice];
    }

    </script>
    <form name="form" action="javascript: void(0)">
    <input type="button" name="bottoneIndietro" value="Indietro" onClick="javascript: scorriIndietro();">
    <input type="text" name="testo" value="immagine 1 di 6" size="15">
    <input type="button" name="bottoneAvanti" value="Avanti" onClick="javascript: scorriAvanti();">
    </form>
    <img id="galleria" src="immagini/1.jpg">