[DHTML] EasySlide

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

Wow nice. The code is very clean as well! Great job.

LOVE IT!!! 10/10 You're truly an animation guru!! Works extremely well and fast(even on my slowest computer).

Thanks you guys! Any suggestions?

Code:

---

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

Code:

---

                this.parent.innerHTML += '<div class="EStitle">'+this.images[0].alt+'</div>';//Add the first title

---

Ouch... try:

Code:

---

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.

Code:

---

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:

Code:

---

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.

Quote:

---

Originally Posted by Twey

ECMAScript will insert a semicolon after that anonymous function

---

What anonymous function?

Quote:

---

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)

Quote:

---

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?

Quote:

---

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

---

Thanks!

Yes, a very nice script! Good job.