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);
}
}
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:
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?
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?
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:
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.
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>
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
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");
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.
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”);