Creating customized slideshow?

[mikehende]

I would like to create a slideshow like what most wedding sites have but I would like to have some fancy transitions like "Random dissolve, checkerboard, spiral" e.t.c, how can I add any of those to my slideshow, this is a regular fade slideshow I have:

 var speed=40;       /* this is the image fade speed - higher value=slower, lower value=faster */
   var timer=4000      /* this is the time that each image is static - 4000=4 seconds */

   var pics=new Array();
       pics[0]='images/autumn.jpg';
       pics[1]='images/lace.jpg';
       pics[2]='images/lotus1.jpg';
       pics[3]='images/lotus.jpg';
       pics[4]='images/apple.jpg';
       pics[5]='images/apple4.jpg';
       pics[6]='images/girl.jpg';
       pics[7]='images/clouds.jpg';
       pics[8]='images/blood.jpg';
       pics[9]='images/buddha.jpg';

/****************** these links are optional and can be removed if not required ******************/

   var links=new Array();
       links[0]='http://www.google.com/';
       links[1]='http://www.guardian.co.uk/crossword/';
       links[2]='http://www.htmlforums.com/';
       links[3]='http://www.w3schools.com/';
       links[4]='http://www.alistapart.com/';
       links[5]='http://news.bbc.co.uk/';
       links[6]='http://validator.w3.org/';
       links[7]='http://en.wikipedia.org/';
       links[8]='http://tools.dynamicdrive.com/gradient/';
       links[9]='http://www.hoogerbrugge.com/';

/*************************************************************************************************/

   var topop=100;
   var botop=0;
   var topnum=0;
   var botnum=1;
   var test=0;

function init() { 

  objt=document.getElementById('top');

if(document.getElementById('link')) {
  objl=document.getElementById('link'); 
 }
else {
  objl=document.getElementById('container');
 }

  bimg=document.createElement('img');
  bimg.setAttribute('id','bot');
  bimg.setAttribute('src',pics[1]);

  objl.appendChild(bimg);

  objb=document.getElementById('bot');
          
  fader=setTimeout(function(){fadeout()},timer);
 }

function fadeout() {

if(document.getElementById('link')) {
   objl.href='#';                       
   objl.style.cursor='default';  
 }


   test==0?(topop--,botop++):(topop++,botop--);

if(objt.filters) {
   objt.style.filter='alpha(opacity='+topop+')';
   objb.style.filter='alpha(opacity='+botop+')';

 }
else {
   objt.style.opacity=topop/100;
   objb.style.opacity=botop/100;
 }
if(topop==0){
   test=1;
   topnum+=2;
if(topnum==pics.length+1) {
   topnum=1;
 }  
if(topnum==pics.length){
   topnum=0;
 }
   objt.src=pics[topnum];
   clearTimeout(fader);
   return stop();
 }
if(topop==100){
   test=0;
   botnum+=2;

if(botnum==pics.length) {
   botnum=0;
 } 
if(botnum==pics.length+1){
   botnum=1; 
 }
   objb.src=pics[botnum];
   clearTimeout(fader);
   return stop();
 }
   setTimeout(function(){fadeout()},speed);
 }

function stop(){
if(document.getElementById('link')) {
   objl.style.cursor='pointer'; 
 }

if(test==0){
   objl.href=links[topnum];
   topop=100;
   botop=0;
 }
if(test==1){
if(document.getElementById('link')) {
   objl.href=links[botnum];
 }

   topop=1;
   botop=99;
 }
   setTimeout(function(){fadeout()},timer);
 }

if(window.addEventListener){
   window.addEventListener('load',init,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',init);
  }
 }

[mikehende]

Sorry guys, I had posted this same post in my other thread on "animation" by mistake. Ok, let me add that I don't really need the script posted above as I don't know how modern that script is so I can use any other slideshow script such as this:

JavaScript Kit- RadialWipe Transition

but what I am getting at is this, I would like one script but be able to change only the transition effects when needed, can anyone recommend the best way to do this please?

[mikehende]

Also, I do have a great tutorial here:

Make a Javascript Slideshow | Webmonkey*| Wired.com

which gives the basic features needed BUT again, my problem is how to incorporate "any" transition effects I should need within this same script? Is there one piece of coding I would need to change or would I have to change up the entire script for each and any transition effect?

[mikehende]

ok, let me ask a basic question while I build this slideshow, according to the tut found here:

Make a Javascript Slideshow | Webmonkey*| Wired.com

This is from that page:

The random_display variable tells the script whether we want our slide show to display our images in a random or sequential order. In this case, 0 is equal to sequential, 1 is equal to random.

I don't understand, if 1 is equal to random then shouldn't the code be:

var random_display = 1;

instead of

var random_display = 0;

???

[paul_wilkins]

I don't understand, if 1 is equal to random then shouldn't the code be:

var random_display = 1;

instead of

var random_display = 0;

???

They're not going to allow random order from the start. They say in the "Make a Features List" section that they're going to have them as sequential, but allow you to use random if you're feeling frisky.

[mikehende]

Thanks, this is the entire script I have put together from that tut but it is not working on my end, can any of you guys try it on yours and let me know please?

<script type="text/javascript" >
var interval = 1500;
var random_display = 0;
var imageDir = "Test";

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(Test + "firstcar.gif");
imageArray[imageNum++] = new imageItem(Test + "secondcar.gif");
imageArray[imageNum++] = new imageItem(Test + "thirdcar.gif");

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)
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}
else {
imageNum = (imageNum+1) % totalImages;
}

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 switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

<img name="slideImg" src="27.jpg" width=500 height=375 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>



</script>

 </head>

<body onLoad="switchImage('slideImg')">


</body>

[paul_wilkins]

First up, you have some html tags inside your scripting code.

But after that's resolved, Test is not a known variable. Perhaps you meant imageDir instead?

[mikehende]

Are these the html tags you're referring to? If so, do you mean that these items should go inside the Body?

<img name="slideImg" src="27.jpg" width=500 height=375 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>

Also, I replaced imageDir with "Test" because I had thought that the script was asking for the location of the images for the slideshow which is in a folder on my C drive named Test, will replace with imageDir

[paul_wilkins]

Are these the html tags you're referring to? If so, do you mean that these items should go inside the Body?

What I mean is that they should not be inside a script tag.

[mikehende]

I have adjusted the script to what's below but now I am only seeing the slideshow menu: play slide show pause previous next

<script type="text/javascript" >
var interval = 1500;
var random_display = 0;
var imageDir = "Test";

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "firstcar.gif");
imageArray[imageNum++] = new imageItem(imageDir + "secondcar.gif");
imageArray[imageNum++] = new imageItem(imageDir + "thirdcar.gif");

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)
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}
else {
imageNum = (imageNum+1) % totalImages;
}

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 switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

</script>

 </head>

<body onLoad="switchImage('slideImg')">
<img name="slideImg" src="27.jpg" width=500 height=375 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>

</body>

[paul_wilkins]

What do you think will be the result of this?

imageDir + "firstcar.gif"

[mikehende]

I removed them from within the body and placed back within the HEAD but outside of the script tags, same result:

<script type="text/javascript" >
var interval = 1500;
var random_display = 0;
var imageDir = "Test";

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "firstcar.gif");
imageArray[imageNum++] = new imageItem(imageDir + "secondcar.gif");
imageArray[imageNum++] = new imageItem(imageDir + "thirdcar.gif");

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)
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}
else {
imageNum = (imageNum+1) % totalImages;
}

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 switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

</script>
<img name="slideImg" src="27.jpg" width=500 height=375 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>
 </head>

<body onLoad="switchImage('slideImg')">


</body>

[mikehende]

What do you think will be the result of this?

imageDir + "firstcar.gif"

I was following the instructions as stated here?

Then just copy and paste that line, change the image names for each one, and we’ve got ourselves an array.
1	imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");
2	 
3	imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");
4	 
5	imageArray[imageNum++] = new imageItem(imageDir + "04.jpg");
6	 
7	imageArray[imageNum++] = new imageItem(imageDir + "05.jpg");

[paul_wilkins]

I was following the instructions

Go back even further. What are the instructions where the imageDir variable is assigned?

[mikehende]

If I am understanding your question, this will be the images path name?

var imageDir = "my_images/";

If so, I am thinking that since the images are located in the 'Test' folder that I should replace "my_images/" with "Test" or should it be "my_images/Test"? If the latter still doesn't work on my end.

[paul_wilkins]

If so, I am thinking that since the images are located in the 'Test' folder that I should replace "my_images/" with "Test" or should it be "my_images/Test"? If the latter still doesn't work on my end.

What is the location where you have the images stored. Start from there.

[mikehende]

Sorry Paul, I am not getting this solved, I have my images [firstcar.gif, secondcar.gif and thirdcar.gif] stored in a folder name "Test" on my C drive so I have reflected that here

var imageDir = "Test";

and my images I have reflected that here:

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "firstcar.gif");
imageArray[imageNum++] = new imageItem(imageDir + "secondcar.gif");
imageArray[imageNum++] = new imageItem(imageDir + "thirdcar.gif");

[paul_wilkins]

Sorry Paul, I am not getting this solved, I have my images [firstcar.gif, secondcar.gif and thirdcar.gif] stored in a folder name "Test" on my C drive so I have reflected that here

var imageDir = "Test";

and my images I have reflected that here:

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "firstcar.gif");
imageArray[imageNum++] = new imageItem(imageDir + "secondcar.gif");
imageArray[imageNum++] = new imageItem(imageDir + "thirdcar.gif");

imageDir equals "Test" so what does imageDir + "firstcar.gif" equal?

It equals *drumroll*
.
.
.
"Testfirstcar.gif"