PDA

View Full Version : Interactive image slideshow with text description



dknric
05-18-2005, 07:23 PM
I am have disabled the auto play however my first slide does nto show... only until i click the next image will the first slide show. Anyone know what I am doinf wrong? I just want the firstslide to show then the user can click next to move to the next slide... below is the script i am using

<td background="images/backgroundhtmfam_r2_c2.jpg"><p align="center"><img id="_Ath_Slide" onload="OnImgLoad()"></p>

<script language="JavaScript1.2">

/*
Interactive Image slideshow with text description
By Christian Carlessi Salvadó (cocolinks@c.net.gt). Keep this notice intact.
Visit http://www.dynamicdrive.com for script
*/


g_fPlayMode = 0;
g_iimg = -1;
g_imax = 0;
g_ImageTable = new Array();

function ChangeImage(fFwd)
{
if (fFwd)
{
if (++g_iimg==g_imax)
g_iimg=0;
}
else
{
if (g_iimg==0)
g_iimg=g_imax;
g_iimg--;
}
Update();
}

function getobject(obj){
if (document.getElementById)
return document.getElementById(obj)
else if (document.all)
return document.all[obj]
}

function Update(){
getobject("_Ath_Slide").src = g_ImageTable[g_iimg][0];
//getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];
//getobject("_Ath_Img_X").innerHTML = g_iimg + 1;
//getobject("_Ath_Img_N").innerHTML = g_imax;
}


function Play()
{
g_fPlayMode = !g_fPlayMode;
if (g_fPlayMode)
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = true;
Next();
}
else
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = false;

}
}
function OnImgLoad()
{
if (g_fPlayMode)
window.setTimeout("Tick()", g_dwTimeOutSec*1000);
}
function Tick()
{
if (g_fPlayMode)
Next();
}
function Prev()
{
ChangeImage(false);
}
function Next()
{
ChangeImage(true);
}


////configure below variables/////////////////////////////

//configure the below images and description to your own.
g_ImageTable[g_imax++] = new Array ("images/boys.jpg");
g_ImageTable[g_imax++] = new Array ("images/boys2.jpg");
g_ImageTable[g_imax++] = new Array ("images/girl.jpg");
//extend the above list as desired
g_dwTimeOutSec=5

////End configuration/////////////////////////////

if (document.getElementById||document.all)
window.onload=Play
Play()
</script>

<p align="center">
<input name="image" type="image" id="image" onClick="Prev();" src="images/back.jpg" alt="previous slide" align="left" p>
<input name="image" type="image" id="btnNext" onClick="Next();" src="images/next.jpg" alt="next slide" align="right" p>

</td>

jscheuer1
05-18-2005, 07:43 PM
It might work to use:

<p align="center"><img id="_Ath_Slide" src="1st_image.jpg" onload="OnImgLoad()"> </p>Substituting the path and name of your first image for 1st_image.jpg.

Or change this:

if (document.getElementById||document.all)
window.onload=Play
Play()to this:

if (document.getElementById||document.all)
window.onload=function(){
Play();
Next();
}

dknric
05-19-2005, 12:53 AM
Neither worked but I tweaked what you gave me and used the second idea and had success... Thanks for all your help... i was spinning my wheels.... code below

if (document.getElementById||document.all)
window.onload=Play
Next();
Play()