Javascript slideshow

[Nazgulero]

Hello,

I am trying to create a slideshow with Javascript and found the script below, which is very nice. The only thing I want is to add a description to every image that appears in the slideshow, the script below only show the full sized image.
Does anybody have an idea if that is possible using this script, or does anybody have another script which lets me do that ?
Thanks a bunch in advance for your help !

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

// canManipulateImages - check if the browser we're using can do
// clever stuff with document images.

function canManipulateImages() {
if (document.images)
return true;
else
return false;
}

// loadPosterImage

function loadPosterImage(imageURL) {
if (gImageCapableBrowser) {
document.imagePoster.src = imageURL;
return false;
}
else {
return true;
}
}

// gImageCapableBrowser - is this browser hip to images? Set up
// a global variable so that we don't have to keep calling a function
// (useful if the function becomes costly to compute).

gImageCapableBrowser = canManipulateImages();

// -->
</SCRIPT>

<TABLE CELLPADDING=10 CELLSPACING=5 WIDTH="95%" ALIGN=CENTER>
<TR>
<TD VALIGN=TOP ALIGN=CENTER>
<A HREF="inline/imageNaiad.jpg"
onClick="return(loadPosterImage('inline/imageNaiad.jpg'))">
<IMG SRC="inline/imageNaiadSmall.jpg"
ALT="Naiad" BORDER=0 ALIGN=TOP WIDTH=56 HEIGHT=75></A>
<P CLASS="thumbcaption">Naiad Beauty Products</P>
</TD>
<TD VALIGN=TOP ALIGN=CENTER>
<A HREF="inline/imageAdonis.jpg"
onClick="return(loadPosterImage('inline/imageAdonis.jpg'))">
<IMG SRC="inline/imageAdonisSmall.jpg"
ALT="Adonis" BORDER=0 ALIGN=TOP WIDTH=56 HEIGHT=75></A>
<P CLASS="thumbcaption">Bronze Adonis</P>
</TD>
<TD WIDTH=250 VALIGN=TOP ALIGN=CENTER ROWSPAN=3>
<IMG SRC="inline/imageNaiad.jpg" NAME="imagePoster"
ALT="Naiad" ALIGN=TOP WIDTH=225 HEIGHT=300>
</TD>
</TR>
<TR>
<TD VALIGN=TOP ALIGN=CENTER>
<A HREF="inline/imageRodin.jpg"
onClick="return(loadPosterImage('inline/imageRodin.jpg'))">
<IMG SRC="inline/imageRodinSmall.jpg"
ALT="Rodin" BORDER=0 ALIGN=TOP WIDTH=56 HEIGHT=75></A>
<P CLASS="thumbcaption">Rodin Consulting</P>
</TD>
<TD VALIGN=TOP ALIGN=CENTER>
<A HREF="inline/imageSwami.jpg"
onClick="return(loadPosterImage('inline/imageSwami.jpg'))">
<IMG SRC="inline/imageSwamiSmall.jpg"
ALT="Swami" BORDER=0 ALIGN=TOP WIDTH=56 HEIGHT=75></A>
<P CLASS="thumbcaption">Swami Academy</P>
</TD>
</TR>
<TR>
<TD VALIGN=TOP ALIGN=CENTER>
<A HREF="inline/imagePassion.jpg"
onClick="return(loadPosterImage('inline/imagePassion.jpg'))">
<IMG SRC="inline/imagePassionSmall.jpg"
ALT="Passion" BORDER=0 ALIGN=TOP WIDTH=56 HEIGHT=75></A>
<P CLASS="thumbcaption">Plastic Passion</P>
</TD>
<TD VALIGN=TOP ALIGN=CENTER>
<A HREF="inline/imageAtlas.jpg"
onClick="return(loadPosterImage('inline/imageAtlas.jpg'))">
<IMG SRC="inline/imageAtlasSmall.jpg"
ALT="Atlas" BORDER=0 ALIGN=TOP WIDTH=56 HEIGHT=75></A>
<P CLASS="thumbcaption">Atlas Removals</P>
</TD>
</TR>
</TABLE>

Regards,

GP

 

[13sio]

Put a layer under the RHS image to show the description,

<TD WIDTH=250 VALIGN=TOP ALIGN=CENTER ROWSPAN=3>
    <IMG SRC="inline/imageNaiad.jpg" NAME="imagePoster"
         ALT="Naiad" ALIGN=TOP WIDTH=225 HEIGHT=300>
    [b]<div id="desc">Naiad Beauty Products</div>[/b]
</TD>

Add a variable 'imageDesc' into the function to change the text of the layer

function loadPosterImage(imageURL[b], imageDesc[/b]) {
    if (gImageCapableBrowser) {
        document.imagePoster.src = imageURL;
        [b]document.getElementById("desc").innerHTML = imageDesc;[/b]
        return false;
    }
    else {
        return true;
    }
}

For onClick event, pass the related description to 'loadPosterImage'

<TD VALIGN=TOP ALIGN=CENTER>
    <A HREF="inline/imageNaiad.jpg"
       onClick="return(loadPosterImage('inline/imageNaiad.jpg'[b], 'Naiad Beauty Products'[/b]))">
    <IMG SRC="inline/imageNaiadSmall.jpg"
         ALT="Naiad" BORDER=0 ALIGN=TOP WIDTH=56 HEIGHT=75></A>
    <P CLASS="thumbcaption">Naiad Beauty Products</P>
</TD>
<TD VALIGN=TOP ALIGN=CENTER>
    <A HREF="inline/imageAdonis.jpg"
       onClick="return(loadPosterImage('inline/imageAdonis.jpg'[b], 'Bronze Adonis'[/b]))">
    <IMG SRC="inline/imageAdonisSmall.jpg" 
         ALT="Adonis"  BORDER=0 ALIGN=TOP WIDTH=56 HEIGHT=75></A>
    <P CLASS="thumbcaption">Bronze Adonis</P>
</TD>
//...

Hope it becomes your starting point.

 

[Nazgulero]

Hello,

works like a charm, exactly what I was looking for ! Thanks a bunch for your quick help !

Regards,

GP