- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Galleria immagini: aggiungere descrizione
-
Galleria immagini: aggiungere descrizione
Salve. Il codice seguente mi realizza una galleria immagini da scorrere nella stessa pagina html senza ricaricare la pagina. Bene. Vorrei apportare una modifica molto importante: aggiungere la descrizione ad ogni immagine.
Ho fatto innumerevoli tentativi ma, non essendo esperto conoscitore della programmazione javascript, non sono ancora riuscito a trovare la soluzione.Es: aperta la pagina appare la prima immagine con sotto delle frecce per scorrere avanti e indietro; sotto di essa la serie di numeri per quante sono le immagini.
Quello che manca - di cui avrei bisogno - sono le descrizioni (titolo e caratteristica dell'immagine) che appaiono sotto l'immagine stessa: una descrizione diversa per ogni immagine.Potreste darmi una mano ?
Grazie.
Alessandro
codice javascript:
<script type="text/javascript"> //Specify images for slideshow: //["Image Path", "Optional Image link"] var numberslide=new Array() numberslide[0]=["IMAGE-1.jpg", ""] numberslide[1]=["IMAGE-2.jpg", ""] numberslide[2]=["IMAGE-3.jpg", ""] var mylinktarget="" //specify optional link target var mylinkcolor="black" //specify default color of number links var mylinkcolorSelected="red" //specify color of selected links var imgborderwidth=1 //specify border of image slideshow /////Stop customizing here//////////////// var preloadit=new Array() for (i=0;i<numberslide.length;i++){ preloadit*=new Image() preloadit*.src=numberslide*[0] } var currentindex="" function changeslides(which){ var imghtml="" currentindex=(which=="initial")? 0 : parseInt(which) var mode=(which=="initial")? "initial" : "" var which=(mode=="initial")? numberslide[0] : numberslide[which] if (which[1]!="") imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">' imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">' if (which[1]!="") imghtml+='</a>' if (mode=="initial") document.write('<div>'+imghtml+'</div>') else{ document.getElementById("imagecontainer").innerHTML=imghtml changecolors() } } function createnumbers(){ document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ') for (i=1; i< numberslide.length; i++) document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ') } function changecolors(){ var numberobj=document.getElementById("numberDiv") numberlinks=numberobj.getElementsByTagName("A") for (i=0; i<=currentindex; i++) numberlinks*.style.color=mylinkcolorSelected for (i=currentindex+1; i<numberslide.length; i++) numberlinks*.style.color=mylinkcolor } function goforward(){ if (currentindex<numberslide.length-1) changeslides(currentindex+1) } function goback(){ if (currentindex!=0) changeslides(currentindex-1) } </script> </head> <body> <div id="slideshowContainer" style="width: 500; height: 400"> <div id="imagecontainer"> <script type="text/javascript"> changeslides("initial") //This call displays the first image </script> </div> <div id="backforthbuttons" style="width: 95; height: 19"> <a href="javascript:goforward()" style="float: right"> >> </a> <a href="javascript:goback()"> << </div> <div id="numberDiv"> <script type="text/javascript"> createnumbers() //This call writes out the numbers </script>
-
Prova a fare cos (sostituisci la funzione e l'array):
var numberslide=new Array() numberslide[0]=["IMAGE-1.jpg", "", "Descrizione 1!"] numberslide[1]=["IMAGE-2.jpg", "", "Descrizione 2!"] numberslide[2]=["IMAGE-3.jpg", "", "Descrizione 3!"] function changeslides(which) { var imghtml="" currentindex=(which=="initial")? 0 : parseInt(which); var mode=(which=="initial")? "initial" : ""; var which=(mode=="initial")? numberslide[0] : numberslide[which]; if (which[1]!="") { imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'; } imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'; if (which[2]!="") { imghtml+='<p id="descrizione">'+which[2]+'</p>'; } if (which[1]!="") { imghtml+='</a>'; } if (mode=="initial") { document.write('<div>'+imghtml+'</div>') } else { document.getElementById("imagecontainer").innerHTML=imghtml changecolors() } }