JavaScript - Slide Show Help?

I used the slideshow technique described here and was successful: http://www.javascriptkit.com/howto/show2.shtml
But when I try to repeat the process to add additional images to the show, it doesn't work. It sticks to the three original images. Any tips as to how to add to this?
thanks!!

My slide show seem to not be initializing I used a base from webmonkey.com and tweaked it around to be exactly what I need and it won't start. Any ideas with whats wrong?
here is my js
Code:

var interval = 1500; //1.5 secs
 var random_display = 0; //goes in order
 //defines where the images are stored
 var imageDir = "../image/slideshow1/";
 
 //set images here
 var imageNum = 0;
 imageArray = new Array();
 imageArray[imageNum++] = new imageItem(imageDir + "01.jpg"); 
 imageArray[imageNum++] = new imageItem(imagedir + "02.jpg");
 imageArray[imageNum++] = new imageItem(imagedir + "03.jpg");
 imageArray[imageNum++] = new imageItem(imagedir + "04.jpg");
 
 //find total amount of images using .length
 var totalImages = imageArray.length;
 
function imageItem(image_location){
	this.image_item = new Image();
	this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
	return(imageObj.image_item.src)
}

//This is used if random is set to 1
function randNum(x, y){
	var range = y - x + 1;
	return Math.floor(Math.random() * range) + x;
}

//get next image
function getNextImage(){
	if(random_display){
		imageNum = randNum(0, totalImages-1);
	} else{
		imageNum = (imageNum+1) % totalImages;
	}
	//return the value now.
	var new_image = get_ImageItemLocation(imageArray[imageNum]);
	return (new_image);
}

function getPrevImage() {
	imageNum = (imageNum-1) % totalImages;
	var new_image = get_ImageItemLocation(imageArray[imageNum]);
	return (new_image);
}

function prevImage(place) {
	var new_image = getPrevImage();
	document[place].src = new_image;
}

//function to switch images
function switchImage(place){
	var new_image = getNextImage();
	document[place].src = new_image;
	var recur_call = "switchImage('"+place+"')";
	timerID = setTimeout(recur_call, interval);
}

Here is the html with buttons to control the slideshow
Code:

<div id = "articles">
    	<div class= "new_article">
    		<img name="slideImg" src="image/slideshow1/01.jpg" style = "width:400px; height:200px;" border=0>
			<a href="#" onClick="switchImage('slideImg')">play slide show</a>
			<a href="#" onClick="clearTimeout(timerID)"> pause</a>
			<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
			<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
    	</div>
	</div>

i want to create a slide show with javascript, but i don't know how to write a code, i have try full screen image slideshow in javascriptkit.com, but i don't know how to resize, not full screen because i want to insert another think, not only a slide show. how can i make an edit with full screen image slideshow coding?or is there someone can help me with the slide show in javascript, but with fadingtime, not an instant change?

can any guys help me to fine the jquery based slide show right to left with next previous and auto facilities on div not on ul li based?

I am using CSS navigation that shows/hides on mouseover with a javascript function.

I also have a slide show on the page right under the navigation that fades images in and out.

When the navigation is visible over an image in the slideshow it is always on top EXCEPT when the image is fading in and out. Once the image is done fading the navigation goes back to the front. VERY ANNOYING!

I have tried the z-index with no luck and also tried playing with the absolute and relative positioning. Neither worked as I had hoped. i believe that the problem lies within the Javascript of the slideshow during the fading but I am not sure where to start...Any thoughts?

My code:

*Navigation*
Code:

CSS
#nav {
	width: 800px;
	margin: 0 auto;
	padding: 0px 10px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background-color: rgb(59, 98, 120);
}

#nav a {
	float: left;
	padding: 0 15px;
	height: 25px;
	line-height: 220%;
	font-weight: bold;
	color: rgb(235, 235, 235);
	font-size: 11pt;
	text-align: center;
	text-decoration: none;
}
	
#nav a:hover {
	color: rgb(0, 0, 0);
}

table.menu {
	background: rgb(79, 131, 161);
	position: absolute;
	visibility: hidden;
}

JAVASCRIPT
function showmenu(elmnt) 
{
	document.getElementById(elmnt).style.visibility="visible";
}

function hidemenu(elmnt) 
{
	document.getElementById(elmnt).style.visibility="hidden";
}

*Slideshow*
Code:

HTML
var imgArray = new Array();
	imgArray[0] = "images/ss1.jpg";
	imgArray[1] = "images/ss2.jpg";
	imgArray[2] = "images/ss3.jpg";
	imgArray[3] = "images/ss4.jpg";
	imgArray[4] = "images/ss5.jpg";
	imgArray[5] = "images/ss6.jpg";
	imgArray[6] = "images/ss7.jpg";
	imgArray[7] = "images/ss8.jpg";
	imgArray[8] = "images/ss9.jpg";

slideshowFade('Slideshow1','',imgArray,8,3000);

JAVASCRIPT
var slideshowFadeAnimate = new Array();
var slideshowFadeTimer   = new Array();
var slideshowFadeCount   = new Array();
var slideshowFadeImages  = new Array();

function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
{
	if(cl)
		cl = ' class="'+cl+'"';
		document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/></div>');

	var ss = document.getElementById(id+'img');
	
	slideshowFadeCount[id]   = 0;
	slideshowFadeImages[id]  = imageArray;
	slideshowFadeAnimate[id] = 'run';
	slideshowFadeTimer[id]   = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);
}

function slideshowFadeAnimation(id,holdTime)
{
	if(slideshowFadeAnimate[id]=='run')
	{
		var obj = document.getElementById(id+'img');
		var opa = slideshowFadeCount[id]%200;
		if(opa==0)
		{
			slideshowFadeAnimate[id] = 'load';
			obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
		}
		else if(opa==100)
		{
			slideshowFadeAnimate[id] = 'hold';
			setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);
		}
		else if(opa>100)
			opa = 200-opa;
			obj.style.opacity = (opa/100).toString();
			obj.style.filter  = "alpha(opacity="+opa.toString()+")";
			slideshowFadeCount[id]++;
		if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
			slideshowFadeCount[id]=0;
	}
}

function slideshowFadeRun(id)
{
	slideshowFadeAnimate[id] = 'run';
}

piece of simple javascript that i can't get to behave...
it's a basic image/slide show.....

in the <head> section.....

Code:

<script type="text/javascript">

var image1=new image() image1.src="../Images/WebSite/HomePage/HpLavender.jpg";
var image2=new image() image2.src="../Images/WebSite/HomePage/HpCreams.jpg";
var image3=new image() image3.src="../Images/WebSite/HomePage/HpBathMelts.jpg";
var image4=new image() image4.src="../Images/WebSite/HomePage/HpCandles.jpg";
var image5=new image() image5.src="../Images/WebSite/HomePage/HpMostlyMen.jpg";

</script>

and then in the body:

Code:

  
<img src="../Images/WebSite/HomePage/HpLavender.jpg"  name="slide" border="0" alt="">

<script type = "text/javascript">

var step=1;
function slideit() 
{
if (!document.images) {return}

document.images.slide.src=eval("image"+step+".src");

if (step<5) {step++}
else {step=1}
setTimeout("slideit()",2500);
}
slideit();

</script>

The coding seems to be tripping up on the line:
document.images.slide.src=eval("image"+step+".src");
(i inserted document.write statements before and after this line and only received the 'before' statement).

The image before the javascript kicks in
<img src="../Images/WebSite/HomePage/HpLavender.jpg" name="slide" border="0" alt="">
displays fine - and the images listed in the header are correctly named

Feel this must be real close but then i've said that before!!!

i hope this is the right section to post this in. wasnt sure if this question was client side or server side


i have a javascript slideshow that i would like to add to my website. its free to use and it came with some coding when downloaded. my problem is that this is my first time EVER using java (ive fiddled with php tho ) and i cant get the slide show to work on my site. the coding it came with gives you an entire webpage ... i just need the slideshow to go inside a div container instead of being a whole page

the following is an embedded style that you can simply copy and paste to notepad, save as an html file, and open in your browser. (im using firefox) all the images etc are already being hosted. so you have to do nothing but open it in your browser to see the script working. like i said, this is the code for an entire webpage ... i just need the slide show by it self in a div container

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinySlider - JavaScript Slideshow</title>
<style all="media" title="YourConnexx Media" type="text/css">

* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#555; background:#222 url(images/bg.jpg) 50% 0 no-repeat}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:578px; margin:75px auto}

.sliderbutton {float:left; width:32px; padding-top:134px}
.sliderbutton img {cursor:pointer}
.sliderbutton img:hover {background:#666}
#slider {float:left; position:relative; overflow:auto; width:500px; height:300px; border:2px solid #fff; background:#fff}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:500px; height:300px; padding-right:10px}

.pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px}
.pagination li {float:left; cursor:pointer; padding:5px 8px; background:#666; border:1px solid #999; margin:0 4px 0 0; text-align:center; color:#222}
.pagination li:hover {background:#777; border:1px solid #bbb; color:#000}
li.current {border:1px solid #ccc; background:#888}

li#content {width:464px; height:270px; padding:15px 28px 15px 18px}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}




</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
	<div>
		<div class="sliderbutton"><img src="images/left.gif" width="32" height="38" alt="Previous" onclick="slideshow.move(-1)" /></div>
		<div id="slider">
			<ul>
				<li id="content">
					<h1>TinySlider - Simple JavaScript Slideshow</h1>
					<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>
					<p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>
				</li>
				<li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li>
				<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li>
				<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li>
			</ul>
		</div>
		<div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Next" onclick="slideshow.move(1)" /></div>
	</div>
	<ul id="pagination" class="pagination">
		<li onclick="slideshow.pos(0)">1</li>
		<li onclick="slideshow.pos(1)">2</li>
		<li onclick="slideshow.pos(2)">3</li>
		<li onclick="slideshow.pos(3)">4</li>
	</ul>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
	id:'slider',
	auto:3,
	resume:true,
	vertical:false,
	navid:'pagination',
	activeclass:'current',
	position:0
});
</script>
</body>
</html>

please show me what i need to get this slide show into a div container by it self. when i do it it doesnt work at all. it appears in the div container as a text area or something but it doesnt work at all. just shows the first slide and nothing else

Hello,

I'm trying to make a slide show for a website that has simple controls on it.

I've attached this example so you can see what i mean....

http://www.bigw.com.au/bigw/home.jsp

As you can see they use 3 images, and they have controls to go between images easily.

Can someone please help me with this code urgently??

Thanks,
S.

Hi all. This is my first post, so be gentle!

I found a really nice "Slide-Show" online, however, the problem is that it is fixed-width.

I would like to place it on my home page, but my middle column is "fluid" with a Max-Min width setting so that my home page adjusts to different monitor sizes and resolutions.

I could use some help figuring out how to modify the JavaScript so that the Slide-Show is "fluid" as well.

Here is a link to my test page. It includes an example of how my home page currently works with a fluid middle column. Then there is a second link to the slide-show that I would like help modifying...

http://doubledee.byethost2.com/

Thanks,



Debbie

I'm very new at this and have very limited HTML/Java Script knowledge, but since my designer is very busy, I thought I'd take a look at some of this coding and see if I can learn how to do certain things myself.

I'm trying to create a clickable slide show. I read all the instructions given on www.javascriptkit.com and created the following:

Code:

 Slide Show Code

<script type="text/javascript">// <![CDATA[
//preload images
var image1=new Image()
image1.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
var image2=new Image()
image2.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
var image3=new Image()
image3.src="http://www.moxiecouture.com/images/daddysprincesstutuonesielarge.jpg"
// ]]></script>
<p><a href="javascript:slidelink()"><img src="../images/princesspettiset2.jpg" border="0" alt="" width="50" height="75" /></a></p>
<script type="text/javascript">// <![CDATA[
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
else if (whichimage==2)
window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
else if (whichimage==3)
window.location="http://moxiecouture.com/category_2/TuTu-One-Pieces.htm"
}
// ]]></script>

My issue with this is that it's not rotating the images. Of course, there is something I'm missing even though I tried to read the instructions carefully. Can anyone help me understand what I'm doing wrong?

Thanks!

I realize this is an overly simple question, but I'm rather horrible at javascript. What I'm doing is changing an img src and having it loop through images. I want it to only start looping when I click and than stop if I click again.


It loops through when I click once, but when I click again it starts changing its rate of image switching. Starts off switching at 1000 milliseconds than upon clicking again it switches through two images quickly and than slows again.

Code:

var myImage = document.getElementById("mainImage");

var imageArray=["1.jpg","2.jpg","3.jpg","4.jpg" ];

var imageIndex=0;

What I assume is the trouble causing function:

Code:

function changeImage(){
	myImage.setAttribute("src", imageArray[imageIndex]);
	imageIndex++;
	if(imageIndex >= imageArray.length) {
		imageIndex=0;
	}
}

How the trouble function is being called:
Code:

var imgSwtch=0;

myImage.onclick= function(){
		if(imgSwtch==0){
			var intervalHandle = setInterval(changeImage,1000);
			imgSwtch=1;
			console.log("start");
		}
		else{
			clearInterval(intervalHandle);
			imgSwtch=0;
			console.log("stop");
		}
		
};

Hello,

I just have a quick question; what code would I need to insert into the coding below in order to get the slide show to pause
when someone hovers their cursor on an image?

Code:

<html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="firstcar.gif" name="slide" border="0" width="100" height="56" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>
</body>
</html>

Thanks in advance! I'm newer to coding this stuff and have tried various ways to get this to work, ending in failure of course.

I have a background slide show from codelifter.com that normally runs in the body - I would like to use it as the background in a table cell.

Thanks in advance for any help,
Cyber-guys

Here is the code:
[CODE]
<html>
<head>
<style>

body{
background-repeat: no-repeat;
background-position: 200 100;}

</style>

<script language="JavaScript">
<!--

// (C) 2006 CodeLifter.com

var speed = 3000;
var crossFadeDuration = 2;
var Pic = new Array();

Pic[0] = 'slideshow1_1.jpg';
Pic[1] = 'slideshow1_2.jpg';
Pic[2] = 'slideshow1_3.jpg';
Pic[3] = 'slideshow1_4.jpg';
Pic[4] = 'slideshow1_5.jpg';

var t;
var j = 0;
var p = Pic.length;

var preLoad = new Array();
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Pic[i];}

function runSlideShow(){

if (document.all){
document.body.style.filter="blendTrans(duration=crossFadeDuration)";
document.body.filters.blendTrans.Apply();
document.body.filters.blendTrans.Play();}

if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)}

}

//-->
</script>

<title>
CodeLifter.com :: Background Image Slideshow With Crossfade
</title>

</head>

<body onload="runSlideShow()" bgcolor="#000000">

<table border="0" width="444" cellpadding="0" cellspacing="0">
<tr>
<td>
<font size="2" face="Verdana,Arial" color="#FFFFFF">
Lorem ipsum dolor situm amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer...
</font>
</td>
</tr>
</table>

</body>

</html>