Interactive image slideshow with text description
Hello from germany! (I've to say it because of my english...- I beg your pardon for my mistakes...
Here some changes for the Interactive image slideshow with text description-Script, a new version.
Now it's possible to change the seconds between the picture-changes in a dropdown-menu and now it's possible to activate a random-modus in the checkbox. Just very small changes but now the script is perfect I think.
Attention - please notice: You've to put you're pictures into the file "pics" (in the script...
-------------------
pfad="pics/";
-------------------
Here's a demo. The buttons are in german, but it's easy to change this.
http://web244.can21.de/slideshow.htm
I'll hope you've fun with the script, greetz Lommel
And now here's the code:
---------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>SLIDESHOW</title>
<link rel=stylesheet type="text/css" href="slideshow.css">
</head>
<body>
<form name="form1" action="#">
<p style="text-align:center;"><input type="button" name="btnPrev" value="<< PREVIOUS" onclick="Prev();"> <input type="button" name="bntPlay" value="START" onclick="Play()" style="width:80px"> <input type="button" name="btnNext" value=" NEXT >> " onclick="Next();"></p>
<p style="text-align:center;"><font size="1" face="Verdana">Random: </font><input type="checkbox" name="bntRPlay" onclick="toggleRandom(this)"> <font size="1" face="Verdana">Seconds: </font>
<select name="delay" onchange="setSpeed(this)">
<option value="0">off</option>
<option value="2">2 sec</option>
<option value="5" selected>5 sec</option>
<option value="10">10 sec</option>
<option value="15">15 sec</option>
<option value="20">20 sec</option>
<option value="25">25 sec</option>
<option value="30">30 sec</option>
</select>
</form>
<p style="text-align:center;"><img id="_Ath_Slide" name="_Ath_Slide" onload="OnImgLoad()"> </p>
<p style="text-align:center;"><b><font size="1" face="Verdana">Picture:</b> <SPAN id="_Ath_FileName"> </SPAN> <br>
Bild Nr.: <SPAN id="_Ath_Img_X"></SPAN> von <SPAN id="_Ath_Img_N"></SPAN></p>
<p style="text-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 setSpeed(obj){
if(obj.selectedIndex>0){
g_dwTimeOutSec=Number(obj.options[obj.selectedIndex].value);
clearTimeout(timer);
OnImgLoad();
}
else{
if(document.form1.bntPlay.value=="STOP")Play(1);
}
}
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(){
document.images["_Ath_Slide"].src = pfad+g_ImageTable2[g_iimg][0];
if (document.createElement){
getobject("_Ath_FileName").innerHTML = g_ImageTable2[g_iimg][1];
getobject("_Ath_Img_X").innerHTML = g_iimg + 1;
getobject("_Ath_Img_N").innerHTML = g_imax;
}
}
var timer;
function checkArr(no){
for (var i=0;i<g_ImageTable.length;i++){
if(g_ImageTable2[i]==g_ImageTable[no]){
return false;
}
}
return true;
}
function toggleRandom(obj){
if(obj.checked){
g_ImageTable2=new Array();
while (g_ImageTable2.length<g_ImageTable.length){
no=Math.floor(Math.random()*g_ImageTable.length)
if(checkArr(no))g_ImageTable2[g_ImageTable2.length]=g_ImageTable[no];
}
}
else g_ImageTable2=g_ImageTable;
}
function Play(val){
clearTimeout(timer);
if(!val){
sel=document.form1.delay.options;
for (var i=0;i<sel.length;i++){
if(Number(sel[i].value==g_dwTimeOutSec)){
sel[i].selected=true;
break;
}
}
}
g_fPlayMode=!g_fPlayMode;
document.form1.bntPlay.value=(g_fPlayMode)?"STOP":"START";
if (g_fPlayMode){
document.form1.btnPrev.disabled = document.form1.btnNext.disabled = true;
Next();
}
else{
document.form1.btnPrev.disabled = document.form1.btnNext.disabled = false;
}
}
function OnImgLoad(){
if (g_fPlayMode)
timer=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 ("image1.jpg", "Bild 1");
g_ImageTable[g_imax++] = new Array ("image2.jpg", "Bild 2");
g_ImageTable[g_imax++] = new Array ("image3.jpg", "Bild 3");
g_ImageTable[g_imax++] = new Array ("image4.jpg", "Bild 4");
g_ImageTable[g_imax++] = new Array ("image5.jpg", "Bild 5");
g_ImageTable[g_imax++] = new Array ("image6.jpg", "Bild 6");
g_ImageTable[g_imax++] = new Array ("image7.jpg", "Bild 7");
g_ImageTable[g_imax++] = new Array ("image8.jpg", "Bild 8");
g_ImageTable[g_imax++] = new Array ("image9.jpg", "Bild 9");
g_ImageTable[g_imax++] = new Array ("image10.jpg", "Bild 10");
//extend the above list as desired
pfad="pics/";
g_dwTimeOutSec=5
////End configuration/////////////////////////////
g_ImageTable2=g_ImageTable;
//if (document.getElementById||document.all)
window.onload=Play
</script>
</p>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>
</html>
------------------------------------------------------------------
CSS Codes
Reply With Quote
Bookmarks