galleria immagini: aggiungere descrizione

**acost** · 30-10-2008, 16:25

Salve. Il codice seguente mi realizza una galleria immagini da scorrere nella stessa pagina html senza ricaricare la pagina stessa ogni volta. 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/link per scorrere avanti e indietro; sotto di esse la serie di numeri, tanti 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:

<html>
<head>

<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[i]=new Image()
preloadit[i].src=numberslide[i][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]'+which[0]+'[/img]'
if (which[1]!="")
imghtml+='</a>'

if (mode=="initial")
document.write('<div>'+imghtml+'</div>')
else{
document.getElementById("imagecontainer").innerHTML=imghtml
changecolors()
}
}

function createnumbers(){
document.write('0 ')
for (i=1; i< numberslide.length; i++)
document.write(''+i+' ')
}

function changecolors(){
var numberobj=document.getElementById("numberDiv")
numberlinks=numberobj.getElementsByTagName("A")
for (i=0; i<=currentindex; i++)
numberlinks[i].style.color=mylinkcolorSelected
for (i=currentindex+1; i<numberslide.length; i++)
numberlinks[i].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()">
&lt;&lt;
</div>
<div id="numberDiv">
<script type="text/javascript">
createnumbers() //This call writes out the numbers
</script>
</div>

</html>

**Xinod** · 30-10-2008, 16:40

Originariamente inviato da acost

codice:

<html>
<head>

<script type="text/javascript">

//Specify images for slideshow:
//["Image Path", "Optional Image link"]

var numberslide=new Array()
numberslide[0]=["IMAGE-1.jpg", "", "descrizione immagine 1"]
numberslide[1]=["IMAGE-2.jpg", "", "descrizione immagine 2"]
numberslide[2]=["IMAGE-3.jpg", "", "descrizione immagine 3"]


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[i]=new Image()
preloadit[i].src=numberslide[i][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]'+which[0]+'[/img]'
if (which[1]!="")
imghtml+='</a>'
if(which[2]!="") imghtml+='

'+which[2]+'</p>'

if (mode=="initial")
document.write('<div>'+imghtml+'</div>')
else{
document.getElementById("imagecontainer").innerHTML=imghtml
changecolors()
}
}

function createnumbers(){
document.write('0 ')
for (i=1; i< numberslide.length; i++)
document.write(''+i+' ')
}

function changecolors(){
var numberobj=document.getElementById("numberDiv")
numberlinks=numberobj.getElementsByTagName("A")
for (i=0; i<=currentindex; i++)
numberlinks[i].style.color=mylinkcolorSelected
for (i=currentindex+1; i<numberslide.length; i++)
numberlinks[i].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()">
&lt;&lt;
</div>
<div id="numberDiv">
<script type="text/javascript">
createnumbers() //This call writes out the numbers
</script>
</div>

</html>

**acost** · 30-10-2008, 17:06

Grazie Xinod,

ero convinto che fosse molto semplice risolverlo, ma senza il tuo aiuto non ci sarei arrivato.

Grazie, baciamo le mani.
Alessandro

**lupo92** · 08-11-2008, 10:39

salve a tutti,
girando per il forum alla ricerca di una galleria di immagini ho trovato questo script, l'ho ricopiato pari pari, ho creato le 3 img jpg ma non mi funziona, mi sapete dire perchè?

**cavicchiandrea** · 08-11-2008, 11:47

Originariamente inviato da lupo92
salve a tutti,
girando per il forum alla ricerca di una galleria di immagini ho trovato questo script, l'ho ricopiato pari pari, ho creato le 3 img jpg ma non mi funziona, mi sapete dire perchè?

Che errore ti da?
Non funziona con tutti i browser?
Hai tolto il trattino [-] in java-script?
Sicuro che il percorso delle immagini sia corretto?
Puoi mettere una pagina online da verificare meglio?
Ci sono altri script nella pagina che potrebbero influire

**lupo92** · 08-11-2008, 12:20

l'errore che mi da con IE è questo:
riga 105 carattere 1 previsto oggetto.
con firefox non segnala errore ma così come con IE mi visualizza un pagina bianca con i link avanti e indietro e basta.
lO SCRIPT è SOLO QUELLO CHE TI INVIO E IL PERCORSO DELLE IMG è CORRETTO
ti invio lo script per farti vedere la riga 105

<head>

<script type="text/javascript">

//Specify images for slideshow:
//["Image Path", "Optional Image link"]

var numberslide=new Array()
numberslide[0]=["IMAGE-1.jpg", "", "descrizione immagine 1"]
numberslide[1]=["IMAGE-2.jpg", "", "descrizione immagine 2"]
numberslide[2]=["IMAGE-3.jpg", "", "descrizione immagine 3"]

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[i]=new Image()
preloadit[i].src=numberslide[i][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]'+which[0]+'[/img]'
if (which[1]!="")
imghtml+='</a>'
if(which[2]!="") imghtml+='

'+which[2]+'</p>'

if (mode=="initial")
document.write('<div>'+imghtml+'</div>')
else{
document.getElementById("imagecontainer").innerHTM L=imghtml
changecolors()
}
}

function createnumbers(){
document.write('0 ')
for (i=1; i< numberslide.length; i++)
document.write(''+i+' ')
}

function changecolors(){
var numberobj=document.getElementById("numberDiv")
numberlinks=numberobj.getElementsByTagName("A")
for (i=0; i<=currentindex; i++)
numberlinks[i].style.color=mylinkcolorSelected
for (i=currentindex+1; i<numberslide.length; i++)
numberlinks[i].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 (QUESTA E LA RIGA 105)
</script>
</div>

</html>

**lupo92** · 08-11-2008, 18:40

Discussione: galleria immagini: aggiungere descrizione

Strumenti discussione

Ricerca discussione

Visualizza

galleria immagini: aggiungere descrizione

Re: galleria immagini: aggiungere descrizione

Permessi di invio