Ultimate Fade-in slideshow onslide icone change

[jimmyhendrix]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

I have a little problem with the onslide event. I tried what is explained in the page "Taking advantage of the oninit() and onslide() event" and it doesn't work.

Here is my javascript code :

var mygallery=new fadeSlideShow({
wrapperid: "gallerie", //ID of blank DIV on page to house Slideshow
dimensions: [920, 447], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["image1.jpg", "", "", "description1"],
["image2.jpg", "", "", "description2"],
["image3.jpg", "", "", "description3"],
["image4.jpg", "", "", "description4"],
["image5.jpg", "", "", "description5"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1100, //transition duration (milliseconds)
descreveal: "none",
togglerid: "slideshowtoggler",
onslide:function(curimage, index){
var imagearray=this.setting.imagearray
jQuery('#rang').html(imagearray[index][4])
}
})

And my html code :

<div align="center" id="gallerie">
</div>

<div id="rang">description</div>

<div id="slideshowtoggler" align="right">
<table width="258" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="23" align="right" valign="top"><a class="prev" style='cursor: pointer;'><img src="image/accueil/fleche1.png" /></a></td>
<td width="35" align="left" valign="top"><a class="next" style='cursor: pointer;'><img src="image/accueil/fleche2.png" /></a></td>
</tr>
</table>
</div>


So, I tried this way as a first step, but what I really wanna do is put 5 icons (grey circles) and one whiter according to the rank of the displayed image. Onslide, the next icon will change to become the white one.

If anyone can help me with my problem, it would be really appreciated!

[jscheuer1]

Actually, you did really well. Only one mistake. The imagearray items are 0 based. So for example here:

 ["image1.jpg", "", "", "description1"],

description1 is:

imagearray[0][3]

not 4. So what you have will work if you change this one highlighted line as shown (red):

 onslide:function(curimage, index){
 var imagearray=this.setting.imagearray
 jQuery('#rang').html(imagearray[index][3])
 }

I'm pretty sure you can figure out the rest more or less.

And you might be interested in:

http://www.dynamicdrive.com/forums/blog.php?b=248

Any questions, feel free to ask.