PDA

View Full Version : creating an image slideshow??

lost
07-20-2003, 03:50 AM
I'm working on a site and would like to create an image slideshow with back and next buttons to navigate it.

What is the best method of achieving this? While planning this out, I had a few ideas but need some direction...

One idea is to have my buttons load from a database into a block level element. Another idea is using an iframe to reload the page via the slide show nav bar? Finally, I could use a javascript?

Anyone wanna point me in the right direction?

thanks
jay
scriptkeeper
07-20-2003, 06:05 AM
Yes it is possible to create an image slideshow with Javascript! I would try and steer away from frames eeehwww!! Here is a little something to point you a some direction if you have any ? just post again good luck


<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<script language="javascript1.2" type="text/javascript">
<!--
pixs=["001.jpg","002.jpg","003.jpg","004.jpg","005.jpg","006.jpg","007.jpg","008.jpg","009.jpg","010.jpg",]; //an array of images to use in slideshow.
pix=[] //an array for preloaded images to be stored.
for(i=0;i<pixs.length;i++){
pix[i]=new Image(); //this loop preloads the images into pix[] array.
pix[i].src=pixs[i];}
isImage=0; //index of wich image to display.
imCt=pix.length-1; // a count of images in slideshow minus starting image.
document.onkeyup=keyStruck; //asigns function to keyup event.
go_timer=""; //id for play function timer.
fade_timer=""; //id for fade function timer.
shuffleSpeed=1000; //the speed at which images shuffle(in Miliseconds(1000ms=1sec)).
p=0; //couter for fade function.
if(document.layers){
document.captureEvents(Event.KEYDOWN);
leftArrow=28; //sets keycodes for NS.
rightArrow=29;
}else{
leftArrow=37; //sets keycode for all others.
rightArrow=39;
}

//this funtion handles keystrike events!
function keyStruck(evt){
if(evt){
key_struck=evt.which;
}else{
key_struck=window.event.keyCode; }
if(key_struck==leftArrow)nextImage(-1);
else if(key_struck==rightArrow)nextImage(1);
}

//this funtion clears out play funtion!
function stop(){clearTimeout(go_timer);} // clear play function.

//this function keeps option on selected imaged.
function selected(){
isImage=document.selectIt.pictureList.selectedIndex;
fadeHandle=document.selectIt.op.checked;
randomHandle=document.selectIt.ran.checked;
if(randomHandle){
isImage=Math.floor(Math.random()*imCt);
document.mainShow.src=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
}if(fadeHandle)imageFader();
else{document.mainShow.src=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
}
}

//this function shuffles throught the images.
function go(){
clearTimeout(reverse_timer);
fadeHandle=document.selectIt.op.checked;
randomHandle=document.selectIt.ran.checked;
go_timer=setTimeout("go()",shuffleSpeed);
isImage=isImage+1;
if(isImage==10)isImage=0;
if(randomHandle){
isImage=Math.floor(Math.random()*imCt);
document.mainShow.src=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
}if(fadeHandle)imageFader();
else{document.mainShow.src=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
}
}

//this funtion crontrols the slideshow!
function nextImage(direction){
fadeHandle=document.selectIt.op.checked;
randomHandle=document.selectIt.ran.checked;
if(document.images){
isImage=isImage+direction;
if(isImage>imCt)isImage=0;
if(isImage<0)isImage=imCt;
if(randomHandle){
isImage=Math.floor(Math.random()*imCt);
document.mainShow.src=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
}if(fadeHandle)imageFader();
else{
document.mainShow.src=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
}
}
}

//this function applys a fade to image!
function imageFader(){
fade_timer=setTimeout("imageFader()",0);
if(p<100)p=p+5;
document.images.mainShow.src=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
document.mainShow.filters.alpha.opacity=p;
if(p>=100){
clearTimeout(fade_timer);
p=0;
}
}
-->
</script>
<style>
form{color:white;}
</style>
</head>
<body bgcolor="#000000" onload="document.selectIt.pictureList.selectedIndex=0;">
<center>
<form name="selectIt">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="nextImage(-1)" value="&lt;&lt">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="go()" value="play">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="stop()" value="stop">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="nextImage(1)" value="&gt;&gt;">
<br/>
random:&nbsp;<input type="checkbox" name="ran">
<select name="pictureList" onchange="selected()">
<option>0001.jpg
<option>0002.jpg
<option>0003.jpg
<option>0004.jpg
<option>0005.jpg
<option>0006.jpg
<option>0007.jpg
<option>0008.jpg
<option>0009.jpg
<option>0010.jpg
</select>
fade:&nbsp;<input type="checkbox" name="op">
</form>
<img src="0001.jpg" name="mainShow" style="filter:alpha(opacity=100);"/>
</center>
</body>
</html>
oracleguy
07-20-2003, 07:15 AM
http://www.javascriptkit.com/script/cutindex21.shtml
Check this link out too.
Mr J
07-20-2003, 11:49 AM
This script has a forward, back and auto button


<SCRIPT language="javascript">
<!--
// Realised by apache jeff
// www.huntingground.freeserve.co.uk
var ns=document.getElementById&&!document.all
newTrans=new Array()
newTrans[newTrans.length] = "progid:DXImageTransform.Microsoft.fade(duration=1, overlap=0.5)";


pics=new Array()
pics[pics.length]="pic1.jpg"
pics[pics.length]="pic2.jpg"
pics[pics.length]="pic3.jpg"
pics[pics.length]="pic4.jpg"


var preloadpics=new Array() // preloads images
for (i=0;i<=pics.length-1;i++) {
preloadpics[i]=new Image()
preloadpics[i].src=pics[i]
}

var tranSpeed = 2.0; // how long transition takes in seconds
var pause = 1000 // in milliseconds
var advance = (tranSpeed*1000)+pause //
var Running = 0;
var i=0
var picnum1=1

function RunMe(){
div_A=document.getElementById("divA")
if (Running == 1){return}
Running = 1;

if(!ns){
div_A.style.filter = newTrans[i];
div_A.filters[0].apply();
}
div_A.innerHTML = "<img src='"+pics[picnum1]+"'width='"+div_A.style.width+"'height='"+div_A.style.height+"'>"
if(!ns){
div_A.filters[0].play(tranSpeed);
}
if(i==newTrans.length-1){
i=-1}
if(picnum1==pics.length-1){
picnum1=0
}
picnum1++
i++
setTimeout("Running=0;setTimeout('auto()',2000)",tranSpeed*1000)
}

aut=0
function auto(){
if(aut==0){return}
RunMe()
}

timer_auto=""
function oback(){
aut=0
picnum1=picnum1-2

if(picnum1== -1){
picnum1=1
return
}

RunMe()
}

var b=0
function dualButt(){
b++
if (b==1){
one()
document.f1.b2.value="Stop"
document.f1.b1.disabled=true
document.f1.b3.disabled=true
}
else
if (b==2){
two()
document.f1.b2.value="Auto"
document.f1.b1.disabled=false
document.f1.b3.disabled=false
b=0
}

}

function one(){
auto(aut=1)
}

function two(){
auto(aut=0)
}

// -->
</SCRIPT>

<center>
<DIV id="divA" onfilterchange="" style="width:100px; height:100px; filter(); border:5px inset blue;cursor:hand;background-color:black" ><img src="pic1.jpg" width=100px height=100px>
</DIV>
<form name="f1">
<input type="button" name="b1" value="<<<" onclick="oback()">
<input type="button" name="b2" value="Auto" onclick="dualButt()">
<input type="button" name="b3" value=">>>" onclick="RunMe()">
</form>
</center>