PDA

View Full Version : Loading Random Image in Slideshow



evangogh
04-11-2007, 04:58 PM
1) Script Title: Interactive image slideshow with text description

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/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 (http://www.dynamicdrive.com/forums/showthread.php?t=6649&highlight=Interactive+image+slideshow+text+description)), 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!:eek:

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="&lt;&lt; Previous" onclick="Prev();" />
<input type="hidden" id="bntPlay" value="Play/Stop" onclick="Play()" />
<input type="hidden" id="btnNext" value=" Next &gt;&gt; " onclick="Next();" />
</p>
</body>
</html>

mburt
04-12-2007, 12:29 AM
Make sure that all your image files are in the correct directory (mydir/folder/file.png) from the point of reference. If not, an "x" will appear (and/or alt text) in place of the image.

evangogh
04-12-2007, 02:36 PM
It's not that the images aren't loading, but that the x appears for a split second before the first image loads. I was able to prevent that before making the slideshow random by putting src="blog.jpg" into <img id="_Ath_Slide" border="0" onload="OnImgLoad()">, but obviously I don't want to automatically load a specific image if the show is random. Any other thoughts anyone?

Thanks!

jscheuer1
04-13-2007, 04:39 AM
You could use a small transparent .png as the initial image. This would prevent the red x and allow the first random image to be the first one seen.

evangogh
04-13-2007, 11:25 PM
Perfect! Thanks!