PDA

View Full Version : [DHTML] EasySlide



blm126
02-05-2007, 03:57 PM
1) CODE TITLE: EasySlide

2) AUTHOR NAME/NOTES: Brady Mulhollem, http://www.webtech101.com

3) DESCRIPTION: EasySlide is an image slideshow script that features quite a few options, while remaining simple to setup(no javascript knowledge required). I know there are more powerful scripts out there, but the goal of this script was to include most features, be fast to load, easy to setup, AND work in most modern browsers. My favorite part of this script is the unique way in which it is configured, I might even have to port that code to multi-level effect menu.

4) URL TO CODE: http://www.webtech101.com/uploads/EasySlide/demo.html

iMarc
02-05-2007, 06:00 PM
Wow nice. The code is very clean as well! Great job.

shachi
02-06-2007, 03:32 PM
LOVE IT!!! 10/10 You're truly an animation guru!! Works extremely well and fast(even on my slowest computer).

blm126
02-06-2007, 08:30 PM
Thanks you guys! Any suggestions?

Twey
02-06-2007, 10:03 PM
if(window.addEventListener){
window.addEventListener("load",EasySlideLoad,false);//W3C load advanced model
}
else if(window.attachEvent){
window.attachEvent("onload",EasySlideLoad);//IE advanced model
}Don't forget to use window.onload = function(){}; as a backup. Also, be consistent with your semicolons: ECMAScript will insert a semicolon after that anonymous function (since it forms part of a statement).
this.parent.innerHTML += '<div class="EStitle">'+this.images[0].alt+'</div>';//Add the first titleOuch... try:
var d = document.createElement("div");
d.className = "EStitle";
d.appendChild(document.createTextNode(this.images[0].alt));
this.parent.appendChild(d);innerHTML is non-standard and should be avoided where possible.
EasySlide.prototype.getConfig = function(name,default_val){
var classname = this.parent.className;//Store the classname
var array = classname.split(name+'(');//split the string at the config name
if(array.length > 1){//make sure it existed
var temp = array[1];//store almost what we want
return temp.split(')')[0];//cut off the extra and return it
}
else{
return default_val;//Variable is not included. return the default
}
}Easier:
EasySlide.prototype.getConfig = function(name,default_val){
var m = this.parent.className.match(new RegExp("\\b" + name + "\\(([^\\)]+)\\)"));
if(m) return m[1];
else return default_val;
}There are two other problems I have with it: a) it should be possible to set the colour of the title on a per-slide basis, since different slides with have different backgrounds, and b) the slide effect doesn't work in KHTML/KJS (the fade doesn't either, but it degrades nicely; the slide simply doesn't show anything).

Other than that, great work! I'm impressed.

blm126
02-07-2007, 01:33 AM
ECMAScript will insert a semicolon after that anonymous function
What anonymous function?

a) it should be possible to set the colour of the title on a per-slide basis, since different slides with have different backgrounds
Thanks for the idea! I have added it with the title_color option(check the demo page)

b) the slide effect doesn't work in KHTML/KJS (the fade doesn't either, but it degrades nicely; the slide simply doesn't show anything).
Weird, I dug out my Slax live CD and checked. The first time I loaded the page, nothing. But when I refreshed the page it suddenly worked. Could you check again and see if refreshing helps?

Other than that, great work! I'm impressed.
Thanks!

mburt
02-07-2007, 01:52 AM
Yes, a very nice script! Good job.