Interactive Image Slideshow With Text Description - Source Code - JsMadeEasy.com

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Interactive Image Slideshow With Text Description
An incredibly cool DHTML image slideshow. Features manual/ automatic cycling, and accompany text description of each image. Requires IE 4+ to work.
Description: Number of Pictures: 2 of 4


Insert into <HEAD>


Insert into <BODY>
<p align="center"><input type="button" name="btnPrev" value="<< Previous" onclick="Prev();"> <input type="button" name="bntPlay" value="Play - Stop" onclick="Play()"> <input type="button" name="btnNext" value=" Next >> " onclick="Next();"></p> <p align="center"><img name="_Ath_Slide" onload="OnImgLoad()"> </p> <p align="center"><b>Description: <SPAN id="_Ath_FileName"></b> </SPAN> <br> <b>Number of Pictures: <SPAN id="_Ath_Img_X"></b>2</SPAN> <strong>of</strong> <b><SPAN id="_Ath_Img_N"></b>4</SPAN> </p> <p align="center"><script language="JavaScript1.2" event="onload" for="window"> main(); </script> <script language="JavaScript1.2"> /* Interactive Image slideshow with text description By Christian Carlessi Salvadó E-Mail: cocolinks@c.net.gt Featured on Dynamicdrive.com For full source code to this script and more, visit Dynamicdrive.com / g_fPlayMode = 0; g_iimg = 0; 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 Update(){ document.all._Ath_Slide.src = g_ImageTable[g_iimg][0]; document.all._Ath_FileName.innerHTML = g_ImageTable[g_iimg][1]; document.all._Ath_Img_X.innerHTML = g_iimg + 1; document.all._Ath_Img_N.innerHTML = g_imax; } function Play() { g_fPlayMode = !g_fPlayMode; if (g_fPlayMode) { btnPrev.disabled = btnNext.disabled = true; Next(); } else { btnPrev.disabled = btnNext.disabled = false; } } function OnImgLoad() { if (g_fPlayMode) window.setTimeout("Tick()", g_dwTimeOutSec1000); } function Tick() { if (g_fPlayMode) Next(); } function Prev() { ChangeImage(false); } function Next() { ChangeImage(true); } function main() { Update(); } ////configure below variables///////////////////////////// //configure the below images and description to your own. g_ImageTable[g_imax++] = new Array ("http://dynamicdrive.com/dynamicindex4/cake.gif", "It's a cake!"); g_ImageTable[g_imax++] = new Array ("http://dynamicdrive.com/dynamicindex4/TN00411A.gif", "Bike Rider"); g_ImageTable[g_imax++] = new Array ("http://dynamicdrive.com/dynamicindex4/PE01803A.gif", "Soccer Player"); g_ImageTable[g_imax++] = new Array ("http://dynamicdrive.com/dynamicindex4/PE02054A.gif", "Wath Out!!"); g_ImageTable[g_imax++] = new Array ("http://dynamicdrive.com/dynamicindex4/PE01805A.gif", "Hurry Up!"); //extend the above list as desired g_dwTimeOutSec=2 ////End configuration///////////////////////////// window.onload=Play </script> </p>

Other Options
To configure the script, go down to the bottom of the code, and edit the lines as indicated by the documentation.