Introduction
I was looking for a JavaScript banner solution that allows me to run banners on my web, when I discovered the BarelyFitz JavaScript slideshow. It's the best slideshow script I've seen, and I decided to use if for my banners.
Inheritance
The easiest method to "borrow" somebody else's code, is through inheritance. Using Nicholas C. Zakas's technique makes inheritance in JavaScript a dream:
Object.prototype.extend = function (oSuper) {
for (sProperty in oSuper) {
this[sProperty] = oSuper[sProperty];
}
}
function ClassA () {
}
function ClassB() {
this.extend(new ClassA());
}
The Banner Class
The reason I wrote this banner
class, was to be able to have two (or more) banners on one page. The banner
class acts as a wrapper around the slideshow
class and inherits slideshow
's methods and properties.
You'll find a demo here.
Prerequisite
BarelyFitz JavaScript slideshow.js.
The code
<HEAD>
<SCRIPT type="text/javascript" src="slideshow.js"></SCRIPT>
<SCRIPT language="JavaScript1.3" type="text/javascript">
<!--
Object.prototype.extend = function (oSuper) {
for (sProperty in oSuper) {
this[sProperty] = oSuper[sProperty];
}
}
function Banner (id,url) {
this.extend(new slideshow());
this.name = id;
if (arguments[2])
this.target = arguments[2];
else
this.target = '_self';
this.images = function() {
for(i=0;i<arguments.length;i++){
s = new slide();
s.src = arguments[i];
if (typeof(url) == 'string')
s.link = url;
else
s.link = url[i];
s.target = this.target;
this.add_slide(s);
}
}
}
<A name=sample></A>
var firstBanner = new Banner("firstBanner","http://soderlind.no/","_blank");
var arrURLs = new Array(
"http://www.codeproject.com"
,"http://soderlind.no/"
,"http://syndicated.INFO/"
);
var secondBanner = new Banner("secondBanner",arrURLs,"_blank");
function initBanner() {
if (document.images) {
firstBanner.images(
"http://soderlind.no/images/soderlind468x60.gif"
,"http://soderlind.no/images/soderlind468x60-black.gif"
);
firstBanner.image = document.images.BANNER1;
firstBanner.timeout = 5000;
firstBanner.update();
firstBanner.play();
secondBanner.images(
"http://www.codeproject.com/images/codeproject468x60.gif"
,"http://soderlind.no/images/soderlind468x60.gif"
,"http://syndicated.info/i/gfx/logo.gif"
);
secondBanner.image = document.images.BANNER2;
secondBanner.timeout = 7000;
secondBanner.update();
secondBanner.play();
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="initBanner();">
<!-- firstBanner.hotlink() is inherited, see <A href="http://www.barelyfitz.com/webapps/apps/slideshow/index.php/5" target=_blank>slideshow documentation</A> -->
<A href="javascript:void(0)" onClick="firstBanner.hotlink();return false;">
<IMG name="BANNER1" src="http://soderlind.no/images/soderlind468x60.gif"
width="468" height="60" border="0">
</A>
<A href="javascript:void(0)" onClick="secondBanner.hotlink();return false;">
<IMG name="BANNER2"
src="http://www.codeproject.com/images/codeproject468x60.gif"
width="468" height="60" border="0">
</A>
</BODY>
Have fun coding.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.