Loading Random Image in Slideshow
1) Script Title: Interactive image slideshow with text description
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...interslide.htm
3) Describe problem: I have found most of the answers to my issues in the forums, but can't seem to work this one out. I have modified the code in this script to have links and randomly load images (per this thread), but the slideshow starts with the missing image thumbnail (box with X") and then the first image loads a second later. Before making it random, I just had <img id="_Ath_Slide" border="0" src="blog.jpg" onload="OnImgLoad()">, but clearly I can't use that now. Any tips?
I also do not need the control buttons, but could not figure out how to get rid of them with out breaking the script, so I just hid them. I'd welcome any feedback on that, too, as well as any constructive criticism on the rest of the code, as I have tinkered here & there to try and work things out on my own!
Thanks in advance for any help!
The code is below:
<html>
<head>
<title>Rotating Banner</title>
</head>
<body>
<p align="center"><img id="_Ath_Slide" border="0" onload="OnImgLoad()"><br />
<a id="_Ath_Link"><span id="_Ath_FileName"></span></a></p>
<div align="center">
<script type="text/javascript">
/*
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_Link").href = g_ImageTable[g_iimg][2];
if (g_ImageTable[g_iimg][2]=='')
getobject("_Ath_Link").removeAttribute('href', 0)
getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];
}
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, description and links to your own.
g_ImageTable[g_imax++] = new Array ("blog.jpg", "<br><b>Visit our blog</b>", "blog.html");
g_ImageTable[g_imax++] = new Array ("banner.jpg", "<b>Sign up for your FREE subscription to<br> our newsletter!</b>", "newsletter.html");
g_ImageTable[g_imax++] = new Array ("ad.jpg", "<br><b>Learn More</b>", "info.html");
//extend the above list as desired
g_dwTimeOutSec=25
////End configuration/////////////////////////////
g_ImageTable.sort(function() {return 0.5 - Math.random();} //thanks to Mike (aka mwinter))
if (document.getElementById||document.all)
window.onload=Play
</script>
</div>
<p align="center"><input type="hidden" id="btnPrev" value="<< Previous" onclick="Prev();" />
<input type="hidden" id="bntPlay" value="Play/Stop" onclick="Play()" />
<input type="hidden" id="btnNext" value=" Next >> " onclick="Next();" />
</p>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks