Slideshow code help

chris10mllr

07-18-2011, 07:06 PM

I found the code for how to create a basic slideshow on javascript kit. It tells you the code for 3 images. I am adding more images to my slide show, but when I go to preview it, it loops through the first 3 pictures only. Is there something else I need to change in order to get it to loop through all my pictures?

Here is the code I got from the site:
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<img src="firstcar.gif" name="slide" width="100" height="56" />
<script>

</script>
</body>
</html>

My code looks like this:

<!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" />
<script type="text/javascript">

</script>

<title>Untitled Document</title>
</head>

<body>
<img src="file:///K|/Michaels Homes Web/Images/Model01.jpg" name="slide" width=500 height=375>
<script type="text/javascript">

</script>
</body>
</html>

This is just the code for the slideshow, not any of the code from the rest of my website. It does the same thing when I test it either the code only or the whole webpage.

If I am missing something in the steps, please let me know.
Thanks

tracknut

07-18-2011, 07:08 PM

if (step<3)

Try changing that to 20.

Dave

chris10mllr

07-18-2011, 07:23 PM

I have tried that already, but when I went to preview it, it stops at 3 all together instead of looping. I am using Dreamweaver if that helps or makes a difference.

tracknut

07-18-2011, 07:32 PM

I don't see how it would do that. Do you have the site online somewhere so we can see it without having to build it ourselves?
Dave

bullant

07-19-2011, 07:11 AM

Maybe use this demo as a guide.

You can have as many slideshows on a page as you like.

bannerPics contains the images for each slideshow. The demo is set up for 2 slideshows containing 3 and 6 images. The 2nd slide show has optional back/next/ stop/play buttons turned on.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.ssCtlBtn {
width: 50px;
padding: 3px 0px 3px 0px;
}
.ssCntlBtnsContainer {
width: 150px;
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
}
.ssCaption {
text-align: center;
}
img {
filter:alpha(opacity=100);
opacity: 1;
}
</style>
<script type="text/javascript">
var bannerPics = [
[
['num1.jpg','caption 1'],
['num2.jpg','caption 2'],
['num3.jpg','caption 3']
],
[
['num4.jpg','caption 4'],
['num5.jpg','caption 5'],
['num6.jpg','caption 6'],
['num7.jpg','caption 7'],
['num8.jpg','caption 8'],
['num9.jpg','caption 9']
]
];
function fade(obj){
if(obj.fadeTimerImg){clearInterval(obj.fadeTimerImg);}
obj.fadeTimerImg = setInterval(function(){setOpacity(obj);},obj.speed);
}
function setOpacity(obj) {
obj.curOpac = obj.curOpac + (obj.opacStep * obj.dirn);
if(obj.curOpac < 0){
obj = swapImage(obj);
obj.curOpac = 0;
obj.dirn = 1;
fade(obj);
return;
}
if(obj.curOpac > 10){
obj.curOpac = 10;
clearInterval(obj.fadeTimerImg);
obj.dirn = -1;
obj.newImageTimer = setTimeout(function(){fade(obj);},obj.lagTime);
return;
}
if(typeof(obj.style.opacity) == 'string'){
obj.style.opacity = obj.curOpac/10;
} else {
obj.style.filter = 'alpha(opacity=' + obj.curOpac*10 + ')';
}
}
function swapImage(obj){
obj.curPic += obj.slideDir;
if(obj.curPic > obj.pics.length-1){obj.curPic = 0;}
if(obj.curPic < 0){obj.curPic = obj.pics.length-1;}
//resize the img element
var newDims = calcNewDimensions(obj.pics[obj.curPic][0].width,obj.pics[obj.curPic][0].height,obj.maxWidth,obj.maxHeight);
obj.width = newDims['width'];
obj.height = newDims['height'];
obj.src = obj.pics[obj.curPic][0].src; //swap the image
document.getElementById('cap'+obj.capNum).innerHTML = obj.pics[obj.curPic][1]; //swap caption
return obj;
}
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
}
return newDims;
}
var captionNum = 0;
function SlideShowObj(elem, picsA){
this.elem = elem;
this.elem.pics = picsA; //preloaded pics array
this.elem.maxWidth = 100;
this.elem.maxHeight = 100;
this.elem.lagTime = 2000; //milliseconds lag between image swaps
this.elem.speed = 50; //milliseconds speed of fading
this.elem.opacStep = 0.5; //increment of opacity change
this.elem.fadeTimerImg;
this.elem.newImageTimer;
this.elem.curOpac = 10; //original image opacity: 10=opaque
this.elem.curPic = 0;
this.elem.dirn = -1; //direction of fading: 1=fading in, -1=fading out
this.elem.slideDir = 1; //direction of slide show: 1=right, -1=left
this.elem.showControls = true;
this.elem.playing = false;
this.elem.capNum = captionNum++;
this.elem.src = this.elem.pics[this.elem.curPic][0].src;
this.init=function(){
var selfO = this;
var newDims = calcNewDimensions(this.elem.pics[this.elem.curPic][0].width,this.elem.pics[this.elem.curPic][0].height,selfO.elem.maxWidth,selfO.elem.maxHeight);
selfO.elem.width = newDims['width'];
selfO.elem.height = newDims['height'];
selfO.elem.src = this.elem.src;
if(typeof(selfO.elem.style.opacity) == 'string'){
selfO.elem.style.opacity = selfO.elem.curOpac/10;
} else {
selfO.elem.style.filter = 'alpha(opacity=' + selfO.elem.curOpac*10 + ')';
}
//create the captions container
var oSlideShowContainer = selfO.elem.parentNode.parentNode;
oSlideShowContainer.style.width = selfO.elem.maxWidth+'px';
selfO.elem.parentNode.style.height = selfO.elem.maxHeight+'px';
var newDiv = document.createElement('div');
newDiv.className = 'ssCaption';
newDiv.id = 'cap'+selfO.elem.capNum;
newDiv.appendChild(document.createTextNode(selfO.elem.pics[selfO.elem.curPic][1]));
oSlideShowContainer.appendChild(newDiv);
//set up the control buttons
switch (selfO.elem.showControls){
case true:
//create the slide left button
var newDiv = document.createElement('div');
newDiv.className = 'ssCntlBtnsContainer';
var newButton = document.createElement('button');
newButton.className = 'ssCtlBtn';
newButton.innerHTML = '&lt';
newButton.onclick=function(){
selfO.elem.dirn = -selfO.elem.dirn;
selfO.elem.slideDir = -1;
}
newDiv.appendChild(newButton);
//create the play/stop button
newButton = document.createElement('button');
newButton.className = 'ssCtlBtn';
newButton.innerHTML = 'Play';
newButton.onclick=function(){
selfO.elem.playing = (selfO.elem.playing)? false : true;
this.innerHTML = (this.innerHTML == 'Play')? 'Stop' : 'Play';
if(selfO.elem.playing){
fade(selfO.elem);
} else {
if(selfO.elem.newImageTimer){clearTimeout(selfO.elem.newImageTimer);}
clearInterval(selfO.elem.fadeTimerImg);
}
}
newDiv.appendChild(newButton);
//create the slide right button
var newButton = document.createElement('button');
newButton.className = 'ssCtlBtn';
newButton.innerHTML = '&gt';
newButton.onclick=function(){
selfO.elem.dirn = -selfO.elem.dirn;
selfO.elem.slideDir = 1;
}
newDiv.appendChild(newButton);
//append the control buttons to the slideshow container
oSlideShowContainer.appendChild(newDiv);
break;
case false:
setTimeout(function(){fade(selfO.elem);},selfO.elem.lagTime);
}
}
}
window.onload=function(){
//load the pics into Image objects
var picO = new Array();
for(i=0; i < bannerPics.length; i++){
picO[i] = new Array();
for(j=0; j < bannerPics[i].length; j++){
picO[i][j] = new Array();
picO[i][j][0] = new Image();
picO[i][j][0].src = bannerPics[i][j][0];
picO[i][j][1] = bannerPics[i][j][1];
}
}
show1 = new SlideShowObj(document.getElementById('img1'),picO[0]);
show1.elem.showControls = false;
show1.init();

show2 = new SlideShowObj(document.getElementById('img2'),picO[1]);
show2.elem.lagTime = 5000;
show2.elem.showControls = true;
show2.init();
}
</script>
</head>
<body>

<div id="preloadedImgsContainer" style="display: none"></div>
<script type="text/javascript">
for(i=0; i < bannerPics.length; i++){
for(j=0; j < bannerPics[i].length; j++) {
var newImg = document.createElement('img');
newImg.src = bannerPics[i][j][0];
document.getElementById('preloadedImgsContainer').appendChild(newImg);
}
}
</script>

<div id="div1">
<div>
<img id="img1" src="" alt="" />
</div>
</div>
<div id="div2">
<div>
<img id="img2" src="" alt="" />
</div>
</div>
</body>
</html>