PDA

View Full Version : [JS] Slideshow Script



magicyte
12-19-2008, 09:19 PM
1) CODE TITLE: Slideshow Script

2) AUTHOR NAME/NOTES: magicyte (aka 'Chris')

3) DESCRIPTION: Freelance made by myself for a symphony's website. The site is still under construction. It has a Back link, Next link, and Pause/Play link. The images have links to websites. This was originally made for displaying concert images.

4) URL TO CODE: slideshowScript.zip (http://localhostr.com/files/801644/slideshowScript.zip)

The description speaks for itself.

Nile
12-19-2008, 09:24 PM
Your coding is very unusual. Usually someone would have a function that adds opacity to the image instead of you doing it manually. Also why are you calling it js/css, it should be just js I think.

magicyte
12-19-2008, 09:27 PM
Usually someone would have a function that adds opacity to the image instead of you doing it manually.

What do you mean?

-magicyte

Snookerman
12-20-2008, 01:02 AM
The fading effect is very "bumpy". jQuery would do this a lot better.

magicyte
12-20-2008, 01:17 AM
Yes- I do agree that it is bumpy. When I tried to make the fading effect smooth, in FF, it just went through the fading instantly so it just stayed opaque throughout the whole thing. I don't know why it won't work, though... However, it did work in IE when I made it smooth. Any who, if you want a smooth fading effect, you can increase the fading in the 'fade()' function.

-magicyte

Snookerman
12-20-2008, 01:28 AM
I didn't look at the script code since JavaScript is not my thing, but maybe you could use jQuery for the effect?

Or wait for Nile to explain his suggestion

magicyte
12-20-2008, 01:37 AM
I could use jQuery, but I'd rather not for the moment. I would if I figure I can't do this on my own w/out jQuery. If I can recreate something alike to jQuery, I just use that. If I can't, I guess I'll have to use jQuery.

-magicyte

Nile
12-21-2008, 12:34 AM
I didn't look at the script code since JavaScript is not my thing, but maybe you could use jQuery for the effect?

Or wait for Nile to explain his suggestion

Usually a fade would be something like:


var i=0;
i+=1;

But your doing:


var i = 0;
i = 20;
i = 50;
i = 90;
i = 100;


Take a look at this in Firefox(doesn't work in IE):
http://niler.net/examples/gallery/
(Made by: Nile, thetestingsite)
It scrolls smoothly. Look at the source.
And it increases a variable.

magicyte
12-21-2008, 01:39 AM
I tried that (that being the variable incrementor), but for some reason it hadn't worked! I didn't understand why... There was no error flagged, but it wasn't fading correctly. Any idea how this could have happened?

-- BTW, it does work in IE (8, that is)

-magicyte

Nile
12-21-2008, 01:40 AM
Post the code that you were trying(I suggest in a helping topic, don't post it here).

Master_script_maker
12-22-2008, 07:19 PM
here is a fade code i made that seems to work:

function fadet(t, n) {
if(t==1) {
document.getElementById('slideshow').style.opacity = (.1*n);
document.getElementById('slideshow').style.filter = 'alpha(opacity = '+(10*n)+')';
document.getElementById('ititle').style.color = "rgb(" + (250-25*n) + ", " + (250-25*n) + ", " + (250-25*n) + ")";
} else {
document.getElementById('slideshow').style.opacity = (1-.1*n);
document.getElementById('slideshow').style.filter = 'alpha(opacity = '+(100-10*n)+')';
document.getElementById('ititle').style.color = "rgb(" + (25*n) + ", " + (25*n) + ", " + (25*n) + ")";
}
if(n<10) {
setTimeout("fadet("+t+", "+(n+1)+")", 100);
}
}
and change your fade function to:

function fade(type) {
if (type=="out"){
fadet(0,0);
} else {
fadet(1,0)
}
}

magicyte
12-22-2008, 08:45 PM
Thanks for the code Master_script_maker. Here's some code I finally whipped up this morning (EARLY @ 1). It may or may not be bad, and it uses the 'dreaded' Jasoop Framework. It looks awfully beautiful in IE, but in FF it kinda fades awkwardly:

sstest.html


<!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" lang="en" xml:lang="en">
<head>
<title>Slideshow Script Example</title>
<script type="text/javascript" src="jasoop.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<style type="text/css">
body {
font-family: Tahoma, Arial, Sans-Serif;
font-size: 15px;
font-weight: normal;
background-color: #FFFFFF;
}

a, a:active, a:focus, a:link, a:visited { color: #707070; text-decoration: underline; }
a:hover { color: #C0C0C0; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { color: #404040; }
</style>
</head>
<body>
<center>
<b><span id="ititle"></span></b>
<br /><br />
<a href="index.php" id="slideshowlink" onmousedown="this.blur();" onmouseup="this.blur();" onmouseover="this.blur();" onmouseout="this.blur();"><img src="pics/Winter.jpg" width="500" height="270" style="border: 1px solid #707070;" id="slideshow"></img></a>
<br />
<br />
<a href="#" onmousedown="slide(-1);this.blur();" onmouseup="this.blur();" onmouseover="this.blur();" onmouseout="this.blur();">&laquo; Back</a>
|
<a href="#" id="pause" onmousedown="if(this.innerHTML == 'Pause') { this.innerHTML = 'Play'; slide('pause'); } else { this.innerHTML = 'Pause'; slide('resume'); } this.blur();" onmouseup="this.blur();" onmouseover="this.blur();" onmouseout="this.blur();">Pause</a>
|
<a href="#" onmousedown="slide(1);this.blur();" onmouseup="this.blur();" onmouseover="this.blur();" onmouseout="this.blur();">Next &raquo;</a>
</center>
</body>
</html>


slideshow.js


var images = [], text = [], url = [], speed = 12000, i = 0, j = null, ss;

images[0] = new Image();images[0] = "Winter.jpg";
images[1] = new Image();images[1] = "Water lilies.jpg";
images[2] = new Image();images[2] = "Blue hills.jpg";
images[3] = new Image();images[3] = "Sunset.jpg";

text[0] = "Winter";
text[1] = "Water Lilies";
text[2] = "Blue Hills";
text[3] = "Sunset";

url[0] = "index.php";
url[1] = "index.php";
url[2] = "index.php";
url[3] = "index.php";

function slide(len) {
clearInterval(j);
if(typeof len == "number") {
if(i + len < images.length && i + len >= 0) {
i = i + len;
}
else {
if(i + len < 0) {
i = images.length-1;
}
else {
i = 0;
}
}
document.getElementById('slideshow').src = images[i];
document.getElementById('slideshow').title = text[i];
document.getElementById('slideshowlink').href = url[i];
document.getElementById('ititle').innerHTML = text[i];
if(document.getElementById("pause").innerHTML == "Pause") {
j = setInterval("if(i < images.length-1) ++i; else i = 0; document.getElementById('slideshow').src = images[i]; document.getElementById('slideshow').title = text[i]; document.getElementById('slideshowlink').href = url[i]; document.getElementById('ititle').innerHTML = text[i]; ss.opacity = 0; ss.fade('in', 2, 2);", speed);
}
}
else {
if(len == "pause" || len == "PAUSE") clearInterval(j);
else if(len == "resume" || len == "RESUME") j = setInterval("if(i < images.length-1) ++i; else i = 0; document.getElementById('slideshow').src = images[i]; document.getElementById('slideshow').title = text[i]; document.getElementById('slideshowlink').href = url[i]; document.getElementById('ititle').innerHTML = text[i]; ss.opacity = 0; ss.fade('in', 2, 2);", speed);
}
}

window.onload = function() {
document.getElementById('slideshow').src = images[i];
document.getElementById('slideshow').title = text[i];
document.getElementById('slideshowlink').href = url[i];
document.getElementById('ititle').innerHTML = text[i];
ss = new Effect("slideshow");
ss.fade('in', 2, 2);
j = setInterval("if(i < images.length-1) ++i; else i = 0; document.getElementById('slideshow').src = images[i]; document.getElementById('slideshow').title = text[i]; document.getElementById('slideshowlink').href = url[i]; document.getElementById('ititle').innerHTML = text[i]; ss.opacity = 0; ss.fade('in', 2, 2);", speed);
};

jasoop.js (still needs work)


/********** - IMPORTANT LABEL - **********/
/* Title: Jasoop Toolbox */
/* Name: jasoop.js */
/* Author: 2008 Arthur C. Watkins */
/* Lastmod: 1:30 AM 12/22/2008 */
/* Notice: This label must stay intact */
/* for usage of this document. */
/********** - IMPORTANT LABEL - **********/

// Start Jasoop Toolbox

var Effect = function() {
privates = [];
durations = {
"short": 250,
"normal": 500,
"long": 1000
};
ac = 0;

function Effect(el) {
this.pause = false;
this.autodelete = false;
this.loop = false;
this.visible = false;
this.opacity = 0;
this.element = document.getElementById(el);
this.style = this.element.style;
}

Effect.prototype = {
moveTo: function(x, y) {
this.style.position = "absolute";
this.style.left = (x + "px");
this.style.top = (y + "px");
},

toggle: function() {
if (!this.visible) {
this.style.display = "inline";
this.visible = true;
}
else {
this.style.display = "none";
this.visible = false;
}
},

fade: function(type, inc, del) {
if(type.toLowerCase() == "in") {
this.style.filter = "alpha(opacity = " + this.opacity + ")";
this.style.MozOpacity = this.opacity/100;
this.style.opacity = this.opacity/100;
if(this.opacity < 100) {
this.opacity += inc;
setTimeout((function(effect) {
return function() {
effect.fade("in", inc, del);
};
})(this), (durations[del] || del));
}
}
if(type.toLowerCase() == "out") {
this.style.filter = "alpha(opacity = " + this.opacity + ")";
this.style.MozOpacity = this.opacity/100;
this.style.opacity = this.opacity/100;
if(this.opacity > 0) {
this.opacity -= inc;
setTimeout((function(effect) {
return function() {
effect.fade("out", inc, del);
};
})(this), (durations[del] || del));
}
}
},

compute: function(options) {
privates[privates.length] = new Entry(
(durations[options.delay] || options.delay),
options.left,
options.top,
options.height,
options.width,
options.layer,
options.bgcolor,
options.fgcolor,
options.opacity
);
},

start: function() {
if (!this.pause) {
if (ac < privates.length) {
if (privates[ac].x != undefined) {
this.style.position = "absolute";
this.style.left = privates[ac].x;
}
if (privates[ac].y != undefined) {
this.style.position = "absolute";
this.style.top = privates[ac].y;
}
if (privates[ac].z != undefined) {
this.style.position = "absolute";
this.style.zIndex = privates[ac].z;
}
if (privates[ac].op != undefined) {
this.style.filter = "alpha(opacity = " + privates[ac].op + ")";
this.style.MozOpacity = privates[ac].op/100;
this.style.opacity = privates[ac].op/100;
}
if (privates[ac].h != undefined) this.style.height = privates[ac].h;
if (privates[ac].w != undefined) this.style.width = privates[ac].w;
if (privates[ac].bg != undefined) this.style.backgroundColor = privates[ac].bg;
if (privates[ac].fg != undefined) this.style.color = privates[ac].fg;
setTimeout((function(effect) {
return function() {
effect.start();
};
})(this), privates[ac].delay);
ac++;
}
else {
if (this.autodelete) this.reset();
else ac = 0;
if ((!this.autodelete) && (this.loop)) this.start();
}
}
else {
this.pause = false;
}
},

stop: function() {
this.pause = true;
},

reset: function() {
privates = [];
ac = 0;
},

constructor: Effect

};

function Entry(d, x, y, h, w, z, b, f, o) {
this.x = x;
this.y = y;
this.h = h;
this.w = w;
this.z = z;
this.bg = b;
this.fg = f;
this.op = o;
this.delay = d || 0;
}

return Effect;
} ();

// End Jasoop Toolbox

/********** - IMPORTANT LABEL - **********/
/* Title: Jasoop Toolbox */
/* Name: jasoop.js */
/* Author: 2008 Arthur C. Watkins */
/* Lastmod: 1:30 AM 12/22/2008 */
/* Notice: This label must stay intact */
/* for usage of this document. */
/********** - IMPORTANT LABEL - **********/

Master_script_maker
12-22-2008, 09:34 PM
1% opacity every 1 millisecond, isn't that very labor intensive?

magicyte
12-22-2008, 09:45 PM
I guess, but you could always make it 0 (or 100) milliseconds :D. Do you have a suggestion? I'm ready to contemplate and apply it.

Master_script_maker
12-22-2008, 10:02 PM
1% per millisecond is 1000 frames a second, the average human eye sees around 60+ fps, so many frames are not being seen, or are being seen because of lag. In my example it is 10% per 100 milliseconds, which is 100 fps, near the fps of eyes, but still fluid.
The length of the animation is the main difference though. the length of mine is 1000 ms and yours is 100ms. yours uses more resources, mine less. To reduce the amount of resources for your animation and keep the quality and length (if you prefer), you could use something like 2% per 2 milliseconds, giving the effect of 1000 fps, but using the number of resources for 200 fps.

magicyte
12-22-2008, 10:47 PM
Alright. I'll change that now.

Master_script_maker
12-22-2008, 11:00 PM
in case you want it, here is my version of the fader (so far):
var slideshow = {
name: "Slideshow Script",
version: "1.0",
author: "magicyte",
created: "2008"
};

var images = [], text = [], url = [], speed = 5000, i = 0, j = null, s_speed=500, fps=50;

images[0] = new Image();images[0] = "Winter.jpg";
images[1] = new Image();images[1] = "Water lilies.jpg";
images[2] = new Image();images[2] = "Blue hills.jpg";
images[3] = new Image();images[3] = "Sunset.jpg";

text[0] = "Winter";
text[1] = "Water Lilies";
text[2] = "Blue Hills";
text[3] = "Sunset";

url[0] = "http://www.google.com/";
url[1] = "http://www.yahoo.com/";
url[2] = "http://www.lycos.com/";
url[3] = "http://www.ask.com/";

function slide(len) {
clearInterval(j);
if(typeof len == "number") {
if(i + len < images.length && i + len >= 0) {
i = i + len;
}
else {
if(i + len < 0) {
i = images.length-1;
}
else {
i = 0;
}
}
document.getElementById('slideshow').src = images[i];
document.getElementById('slideshow').title = text[i];
document.getElementById('slideshowlink').href = url[i];
document.getElementById('ititle').innerHTML = text[i];
if(document.getElementById("pause").innerHTML == "Pause") {
j = setInterval("if(i < images.length-1) ++i; else i = 0; document.getElementById('slideshow').src = images[i]; document.getElementById('slideshow').title = text[i]; document.getElementById('slideshowlink').href = url[i]; document.getElementById('ititle').innerHTML = text[i]; fade('in');", speed);
}
}
else {
if(len == "pause" || len == "PAUSE") clearInterval(j);
else if(len == "resume" || len == "RESUME") j = setInterval("if(i < images.length-1) ++i; else i = 0; document.getElementById('slideshow').src = images[i]; document.getElementById('slideshow').title = text[i]; document.getElementById('slideshowlink').href = url[i]; document.getElementById('ititle').innerHTML = text[i]; fade('in');", speed);
}
}

function fade(type) {
if (type=="out"){
fadet(0,0);
} else {
fadet(1,0)
}
}

function fadet(t, n) {
var f=fps*s_speed/1000;
n=n>1?1:n
var i=n*f;
n=n*10;
if(t==1) {
document.getElementById('slideshow').style.opacity = (.1*n);
document.getElementById('slideshow').style.filter = 'alpha(opacity = '+(10*n)+')';
document.getElementById('ititle').style.color = "rgb(" + (255-25*n) + ", " + (255-25*n) + ", " + (255-25*n) + ")";
} else {
document.getElementById('slideshow').style.opacity = (1-.1*n);
document.getElementById('slideshow').style.filter = 'alpha(opacity = '+(100-10*n)+')';
document.getElementById('ititle').style.color = "rgb(" + (25*n) + ", " + (25*n) + ", " + (25*n) + ")";
}
if(i<f) {
setTimeout("fadet("+t+", "+((i+1)/f)+")", s_speed/f);
}
}

window.onload = function() {
document.getElementById('slideshow').src = images[i];
document.getElementById('slideshow').title = text[i];
document.getElementById('slideshowlink').href = url[i];
document.getElementById('ititle').innerHTML = text[i];
fade('in');
j = setInterval("if(i < images.length-1) ++i; else i = 0; document.getElementById('slideshow').src = images[i]; document.getElementById('slideshow').title = text[i]; document.getElementById('slideshowlink').href = url[i]; document.getElementById('ititle').innerHTML = text[i]; fade('in');", speed);
};

you might want to get rid of those large intervals somehow.
i changed the script to fade in and out and took out the large intervals:
var slideshow = {
name: "Slideshow Script",
version: "1.0",
author: "magicyte",
created: "2008"
};

var images = [], text = [], url = [], speed = 5000, i = 0, j = null, s_speed=500, fps=50, k=null;

images[0] = new Image();images[0] = "Winter.jpg";
images[1] = new Image();images[1] = "Water lilies.jpg";
images[2] = new Image();images[2] = "Blue hills.jpg";
images[3] = new Image();images[3] = "Sunset.jpg";

text[0] = "Winter";
text[1] = "Water Lilies";
text[2] = "Blue Hills";
text[3] = "Sunset";

url[0] = "http://www.google.com/";
url[1] = "http://www.yahoo.com/";
url[2] = "http://www.lycos.com/";
url[3] = "http://www.ask.com/";

function slide(len) {
clearInterval(j);
clearInterval(k);
if(typeof len == "number") {
if(i + len < images.length && i + len >= 0) {
i = i + len;
}
else {
if(i + len < 0) {
i = images.length-1;
}
else {
i = 0;
}
}
document.getElementById('slideshow').src = images[i];
document.getElementById('slideshow').title = text[i];
document.getElementById('slideshowlink').href = url[i];
document.getElementById('ititle').innerHTML = text[i];
if(document.getElementById("pause").innerHTML == "Pause") {
document.getElementById("pause").innerHTML = "Play"
}
}
else {
if(len == "pause" || len == "PAUSE") {
clearInterval(j);
clearInterval(k);
}
else if(len == "resume" || len == "RESUME") {
setTimeout("j = setInterval('intervals()', speed);", s_speed*2+fps*2);
k=setInterval('fade("out")', speed);
}
}
}

function fade(type) {
if (type=="out"){
fadet(0,0);
} else {
fadet(1,0)
}
}

function fadet(t, n) {
var f=fps*s_speed/1000;
n=n>1?1:n
var i=n*f;
n=n*10;
if(t===1) {
document.getElementById('slideshow').style.opacity = (.1*n);
document.getElementById('slideshow').style.filter = 'alpha(opacity = '+(10*n)+')';
document.getElementById('ititle').style.color = "rgb(" + (255-25*n) + ", " + (255-25*n) + ", " + (255-25*n) + ")";
} else {
document.getElementById('slideshow').style.opacity = (1-.1*n);
document.getElementById('slideshow').style.filter = 'alpha(opacity = '+(100-10*n)+')';
document.getElementById('ititle').style.color = "rgb(" + (25*n) + ", " + (25*n) + ", " + (25*n) + ")";
}
if(i<f) {
setTimeout("fadet("+t+", "+((i+1)/f)+")", s_speed/f);
}
}

function intervals() {
if(i < images.length-1) ++i; else i = 0;
document.getElementById('slideshow').src = images[i];
document.getElementById('slideshow').title = text[i];
document.getElementById('slideshowlink').href = url[i];
document.getElementById('ititle').innerHTML = text[i];
fade('in');
}

window.onload = function() {
document.getElementById('slideshow').src = images[i];
document.getElementById('slideshow').title = text[i];
document.getElementById('slideshowlink').href = url[i];
document.getElementById('ititle').innerHTML = text[i];
fade('in');
setTimeout("j = setInterval('intervals()', speed);", s_speed*2+fps*2);
k=setInterval('fade("out")', speed);
};

magicyte
12-26-2008, 10:55 AM
Thanks.

Jasoop edited


/********** - IMPORTANT LABEL - **********/
/* Title: Jasoop Toolbox */
/* Name: jasoop.js */
/* Author: 2008 Arthur C. Watkins */
/* Lastmod: 4:19 AM 12/26/2008 */
/* Notice: This label must stay intact */
/* for usage of this document. */
/********** - IMPORTANT LABEL - **********/
// Start Jasoop Toolbox
var Effect = function() {
privates = [];
durations = {
"short": 250,
"normal": 500,
"long": 1000
};
ac = 0;
increase = false;
decrease = true;
fadet = setTimeout(function(){}, 0);
function Effect(el, o) {
if(o !== undefined && o !== null) this.element = document.getElementsByTagName(el)[o];
else this.element = document.getElementById(el);
this.pause = false;
this.autodelete = false;
this.loop = false;
this.visible = false;
this.opacity = 0;
this.style = this.element.style;
}
Effect.prototype = {
move: function(x, y) {
this.style.position = "absolute";
this.style.left = (x + "px");
this.style.top = (y + "px");
},
toggle: function() {
if (this.style.display == "none") {
this.style.display = "inline";
this.visible = true;
} else {
this.style.display = "none";
this.visible = false;
}
},
fade: function(type, inc, del) {
if (type.toString().toLowerCase() == "in") {
if(!increase && decrease) {
increase = true;
decrease = false;
clearTimeout(fadet);
}
this.style.filter = "alpha(opacity = " + this.opacity + ")";
this.style.KHTMLOpacity = this.opacity / 100;
this.style.MozOpacity = this.opacity / 100;
this.style.opacity = this.opacity / 100;
if (this.opacity < 100) {
this.opacity += inc;
setTimeout((function(effect) {
return function() {
effect.fade("in", inc, del);
};
})(this), (durations[del] || del));
}
}
if (type.toString().toLowerCase() == "out") {
if(increase && !decrease) {
increase = false;
decrease = true;
clearTimeout(fadet);
}
this.style.filter = "alpha(opacity = " + this.opacity + ")";
this.style.KHTMLOpacity = this.opacity / 100;
this.style.MozOpacity = this.opacity / 100;
this.style.opacity = this.opacity / 100;
if (this.opacity > 0) {
this.opacity -= inc;
setTimeout((function(effect) {
return function() {
effect.fade("out", inc, del);
};
})(this), (durations[del] || del));
}
}
if (type.toString().toLowerCase() == "toggle") {
if (!increase && decrease) this.fade("in", inc, del);
else this.fade("out", inc, del);
}
if (this.opacity < 0) this.opacity = 0;
if (this.opacity > 100) this.opacity = 100;
},
compute: function(options) {
privates[privates.length] = new Entry((durations[options.delay] || options.delay), options.left, options.top, options.height, options.width, options.layer, options.bgcolor, options.fgcolor, options.opacity);
},
start: function() {
if (!this.pause) {
if (ac < privates.length) {
if (privates[ac].x !== undefined) {
this.style.position = "absolute";
this.style.left = privates[ac].x;
}
if (privates[ac].y !== undefined) {
this.style.position = "absolute";
this.style.top = privates[ac].y;
}
if (privates[ac].z !== undefined) {
this.style.position = "absolute";
this.style.zIndex = privates[ac].z;
}
if (privates[ac].op !== undefined) {
this.style.filter = "alpha(opacity = " + privates[ac].op + ")";
this.style.MozOpacity = privates[ac].op / 100;
this.style.opacity = privates[ac].op / 100;
}
if (privates[ac].h !== undefined) this.style.height = privates[ac].h;
if (privates[ac].w !== undefined) this.style.width = privates[ac].w;
if (privates[ac].bg !== undefined) this.style.backgroundColor = privates[ac].bg;
if (privates[ac].fg !== undefined) this.style.color = privates[ac].fg;
setTimeout((function(effect) {
return function() {
effect.start();
};
})(this), privates[ac].delay);
ac++;
} else {
if (this.autodelete) this.reset();
else ac = 0;
if ((!this.autodelete) && (this.loop)) this.start();
}
} else {
this.pause = false;
}
},
stop: function() {
this.pause = true;
},
reset: function() {
privates = [];
ac = 0;
},
addEvent: function(ev, response) {
if (this.element.addEventListener) this.element.addEventListener(ev, response, false);
else if (this.element.attachEvent) {
var res = function() {
response.apply(this.element);
};
this.element.attachEvent("on" + ev, res);
} else this.element['on' + ev] = response;
},
addEvents: function(evs, response) {
for (var x = 0; x < evs.length; ++x) this.addEvent(this.element, evs[x], response);
},
constructor: Effect
};
function Entry(d, x, y, h, w, z, b, f, o) {
this.x = x;
this.y = y;
this.h = h;
this.w = w;
this.z = z;
this.bg = b;
this.fg = f;
this.op = o;
this.delay = d || 0;
}
return Effect;
} ();
// End Jasoop Toolbox
/********** - IMPORTANT LABEL - **********/
/* Title: Jasoop Toolbox */
/* Name: jasoop.js */
/* Author: 2008 Arthur C. Watkins */
/* Lastmod: 4:19 AM 12/26/2008 */
/* Notice: This label must stay intact */
/* for usage of this document. */
/********** - IMPORTANT LABEL - **********/

diltony
12-26-2008, 11:54 AM
The idea of the slideshow is very nice. I am working on the bugs right now, if i am able to fix it to show well in all browsers, i will post it right back to you.
I will try to use simple codes that will be easy for you to follow [that will limit me a bit but it will still work]. I think the script is nice anyway.

diltony
12-26-2008, 03:34 PM
I have done quite a number of corrections into the slideshow script.
You can see it on http://ds.mwebng.net/pages/js/ddslideshow/slide.html
that is not a public area on my site, i just created it for the purpose of this demo. Well, first of all, i did not remove the fade function, just tweaked it a bit to fade both the title and the image, and also added a few functions on when not to fade. There is now a configuration file similar to the one i used in my crossbrowser messagebox script. I avoided using any class, and i commented where needed. I have transformed it into an almost complete dhtml stuff. I was tempted to add some ajax stuffs into it but did not.
THe list of files:

slide.html
slide.css
slide.config.js
slide.engine.js

slide.html is the main file you wish to display the slideshow in.
Alot of codes have been removed leaving the few but needed ones - afterall its dhtml - reduce manual config and allow user preferences to superceed.
slide.css is the former style sheet you were using.
slide.config.js is a json type script used to configure the slideshow: dimensions of the image, and even the id of the elements used in the slideshow.
Then finally the slide.engine.js - this is a bit long - i had to add stuffs to check and make sure the right things are configured...and comments where needed to make sure u follow what is going on.

slide.config.js
var slide_config={
author: "Magic Cyte",
title: "Dynamic Slideshow",
link: "http://www.dynamicdrive.com/forums/showthread.php?t=39885",
description: "A simple fading slideshow script",
language: "en",
imageFolder: "images/",
imageWidth: "500",
imageHeight: "270",

speed:6000, //time interval for autoplay in milleseconds
autoplay:true, //if you want slideshow to autoplay
title:"slide_title",
image:"slide_image",
navigator:"slide_navigator",

//Images for slideshow
imageList: [
{
image1: "Winter.jpg|Winter|http://www.winter.com/",
image2: "Water lilies.jpg|Water Lilies|http://www.waterlilly.com/",
image3: "Blue hills.jpg|Blue Hills|http://www.bluehills.com/",
image4: "Sunset.jpg|Sunset View|http://www.sunset.com/"
}
]
}


index.html


<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Slideshow Script Example</title>
<script src="slide.config.js"></script>
<script src="slide.engine.js"></script>
<link rel="stylesheet" href="slide.css">
</head>
<body>
<center>
<b><span id="slide_title"></span></b>
<br><br>
<a href="#" target="_blank"><img id="slide_image" width="50" height="50" style="border: 1px solid #707070;"></a>
<br><br>
<div id="slide_navigator">
<a href="javascript:void(0)">&laquo; Back</a>
|
<a href="javascript:void(0)">Pause</a>
|
<a href="javascript:void(0)">Next &raquo;</a>
</div>
</center>
</body>
</html>



slide.css


body {
font-family: Tahoma, Arial, Sans-Serif;
font-size: 15px;
font-weight: normal;
background-color: #FFFFFF;
}
a, a:active, a:focus, a:link, a:visited { color: #707070; text-decoration: underline; }
a:hover { color: #C0C0C0; text-decoration: none;}
h1, h2, h3, h4, h5, h6 { color: #404040; }


slide.engine.js


//borrowed functions from my library
function createEvent(evt,target,handler) {
if(this.createEvent.arguments.length!=3) {return false;}
try {if(window.addEventListener){target.addEventListener(evt, handler, false);} else {target.attachEvent('on'+evt,handler);}} catch(e)
{if(document.all) {this.jalert("Cannot create event '"+evt+"':"+e.number+":"+e.description);} else {this.jalert("Cannot create event '"+evt+"'\n"+e);}}
}
//end of borrowed functions

createEvent('load',window,initialize); //i prefer to use this rather than disturb any other script that may be using onload event

var images=new Array(); //images array
var icache=new Array(); //images cache
var slide_pos=-1; //variable for keeping the current position
var links; //will later hold array for the navigation links

function initialize() {
//we want to read the images specified in the config into a 1 x 3 dimensional array
try {
for(key in slide_config.imageList[0]) {images[images.length]=slide_config.imageList[0][key].split("|");}
//let's check if the right #ids are in the html document
if(!document.getElementById(slide_config.title)) {alert("'"+slide_config.title+"' is missing.");return;}
if(!document.getElementById(slide_config.image)) {alert("'"+slide_config.image+"' is missing.");return;}
if(!document.getElementById(slide_config.navigator)) {alert("'"+slide_config.navigator+"' is missing.");return;}
//i almost forgot to check if the config contain any image
if(images.length==0) {alert("There is no image in the config!");return;}
//now that there is at least an image present, let's just try to cache the images to make them load faster
for(i=0;i<images.length;i++) {
icache[i]=new Image();
icache[i].src=slide_config.imageFolder+images[i][0];
}

//so far so good. so let's find the navigation links in the slideshow
links=document.getElementById(slide_config.navigator).getElementsByTagName("A");
if(links.length!=3) {alert("Ehm, i was told to expect 3 links - i quit!");return;}
//time to create handlers for the links
links[0].onclick=function() {doaction("prev");} //previous link
links[1].onclick=function() {doaction("play");} //play/pause link
links[2].onclick=function() {doaction("next");} //next link

//so far, we have encountered no issues, so lets go!
doaction("start"); //this will kick off the match.

} catch(err) {
alert("There is an error in your slideshow configuration!"); return;
}
return;
}

function doaction(action) {
switch(action) {
case "start":
//alert("Start Offf"); //will run only once
//since this will run only once, let's make best use of it
with(document.getElementById(slide_config.image)) { //selects the slide image
//apply the configurational settings for image dimensions
style.width=slide_config.imageWidth+"px";
style.height=slide_config.imageHeight+"px";
}
//let's check the autoplay options
if(slide_config.autoplay) {
links[1].innerHTML="Pause";
} else {
links[1].innerHTML="Play";
}

//it is time to start showing images. Let's simulate the click next event
slide_pos = 0;
fade_query();
renderImage();
break;

case "next":
//alert("Move next");
slide_pos = slide_pos+1 <icache.length ? slide_pos+1 : 0;
renderImage();
break;

break;
case "prev":
slide_pos = slide_pos-1 < 0 ? icache.length-1 : slide_pos-1;
renderImage();
break;
case "play":
//alert("play/Pause");
//tweak config
with(links[1]) {
if(innerHTML=="Play") {
innerHTML="Pause";
this.slide_config.autoplay=true;
return doaction('next');
} else {
innerHTML="Play";
this.slide_config.autoplay=false;
}
}

break;
}
return;
}

function renderImage() {fade('out');}

var auto_timer;
function fade_query() {
//switch image
document.getElementById(slide_config.title).innerHTML=images[slide_pos][1];
with(document.getElementById(slide_config.image)) {
src=icache[slide_pos].src;
parentNode.href=images[slide_pos][2]; //setup the external website
}

if(last_fade=='out') {fade("in");}
else {
if(slide_config.autoplay) {
clearInterval(auto_timer);
auto_timer=setTimeout("doaction('next');",slide_config.speed);
}
}

}

var init_fade=false; var last_fade='in';
function fade(type) {last_fade=type;
if (type=="out"&&init_fade!=false){init_fade=true;
fadet(0,0);
} else {
fadet(1,0)
}
if(!init_fade) {
init_fade=true;
last_fade="in";
}

}

var fade_busy;
var fade_timer;
function fadet(t, n) {
if(fade_busy) {clearTimeout(fade_timer)} //to avoid blinking effect
var image=document.getElementById(slide_config.image);
var title=document.getElementById(slide_config.title);
if(t==1) {
with(image) {
style.opacity = (.1*n);
style.filter = 'alpha(opacity = '+(10*n)+')';
style.color = "rgb(" + (250-25*n) + ", " + (250-25*n) + ", " + (250-25*n) + ")";
}
with(title) {
style.opacity = (.1*n);
style.filter = 'alpha(opacity = '+(10*n)+')';
style.color = "rgb(" + (250-25*n) + ", " + (250-25*n) + ", " + (250-25*n) + ")";
}
} else {
with(image) {
style.opacity = (1-.1*n);
style.filter = 'alpha(opacity = '+(100-10*n)+')';
style.color = "rgb(" + (25*n) + ", " + (25*n) + ", " + (25*n) + ")";
}
with(title) {
style.opacity = (1-.1*n);
style.filter = 'alpha(opacity = '+(100-10*n)+')';
style.color = "rgb(" + (25*n) + ", " + (25*n) + ", " + (25*n) + ")";
}
}
if(n<10) {
fade_busy=true; //setup flag
fade_timer=setTimeout("fadet("+t+", "+(n+1)+")", 100);
} else {fade_busy=false;fade_query();}
}


If u have any questions, just send them to me directly.