It can inserted into a page as simply as:
Code:
<html>
<head>
<title>Fade In Slide Show</title>
<script src="slide.config.js"></script>
<script src="slide.engine.js"></script>
<link rel="stylesheet" href="slide.css">
</head>
<body>
<div id="slide_navigator"></div>
</body>
</html>
slide.config.js
Code:
var slide_config={
author: "Tony Ogundipe",
title: "Crossfader Slideshow",
link: "http://www.mwebng.net/",
description: "A simple fader for gallery",
language: "en",
imageFolder: "images/",
imageWidth: "200",
imageHeight: "150",
HowMany: 4, //specify how many images are displayed per view
speed:2000, //time interval for autoplay in milleseconds
navigator:"slide_navigator",
//Images for slideshow
imageList: [
{
image1: "03stypegalext02.jpg|http://www.google.com/",
image2: "03stypegalext03.jpg|http://www.gmail.com/",
image3: "03stypegalext04.jpg|http://www.hotmail.com/",
image4: "03stypegalext05.jpg|http://www.facebook.com/",
image5: "03stypegalext08.jpg|http://www.msdn.com/",
image6: "03stypegalext10.jpg|http://www.lycos.com/",
image7: "03stypegalext11.jpg|http://www.angelfire.com/",
image8: "03xkgalext06.jpg|http://www.dynamicdrive.com/",
image9: "2005_Volkswagen_Beetle__front_.jpg|http://www.toyota.com/",
image10: "03stypegalext06.jpg|http://www.avensis.com/"
}
]
}
slide.css
Code:
#slide_navigator img {margin:10px;cursor:pointer;cursor:hand;}
And finally [takes a deep breath], the engine
Code:
//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 imageCount; //store amount of images to show per view
var icount=0; var image;
var canvas; //holding the slideshow
function initialize() {
//we want to read the images specified in the config into a 1 x 3 dimensional array
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(typeof(slide_config.HowMany)==null) {alert("You did not say how many images per view in config.");return;}
if(!document.getElementById(slide_config.navigator)) {alert("'"+slide_config.navigator+"' is missing.");return;}
canvas=document.getElementById(slide_config.navigator);
imageCount=slide_config.HowMany;
//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();var img=icache[i];
icache[i].src=slide_config.imageFolder+images[i][0];
img.style.width=slide_config.imageWidth+"px";
img.style.height=slide_config.imageHeight+"px";
img.title=images[i][1];
img.onclick=function() {window.open(this.title,'');} //launch link
img.style.cssText+=";display:none";
canvas.appendChild(img);
}
playNow();
return; //let's go
}
var vcache=new Array();
function playNow() {
//let's initializes
slide_pos=-1;
//create placeholders
for(i=0;i<imageCount;i++) {
vcache[i]=new Image();
var img=vcache[i];
img.style.width=slide_config.imageWidth+"px";
img.style.height=slide_config.imageHeight+"px";
img.onclick=function () {window.open(this.title,'')}; //launch link
img.style.cssText+=";visibility:hidden";
canvas.appendChild(img);
}
renderImage();
return;
}
var slide_pos; //variable for keeping the current position
var fade_pos=-1; //between 0 and 4
function renderImage() {
fade_pos++;
slide_pos++;
if(slide_pos==icache.length) {slide_pos=0;}
if(fade_pos==imageCount) {fade_pos=0;}
if(icount<imageCount) {icount++;}
//render next image
with(vcache[fade_pos]) {
title=icache[slide_pos].title;
src=icache[slide_pos].src;
style.visibility="visible";
style.opacity ="0.5";
}
//alert(fade_pos+":"+slide_pos+":"+icount);
fade('in');
}
function fadet(t, n) {
with(vcache[fade_pos]) {
if(t==1) {
style.opacity = (.1*n);
style.filter = 'alpha(opacity = '+(10*n)+')';
style.color = "rgb(" + (250-25*n) + ", " + (250-25*n) + ", " + (250-25*n) + ")";
} else {
style.opacity = (1-.1*n);
style.filter = 'alpha(opacity = '+(100-10*n)+')';
style.color = "rgb(" + (25*n) + ", " + (25*n) + ", " + (25*n) + ")";
}
if(n<10) {
setTimeout("fadet("+t+", "+(n+1)+")", 100);
} else {
setTimeout("renderImage();",slide_config.speed);
}
}
}
function fade(type) {
if (type=="out"){
fadet(0,0);
} else {
fadet(1,0)
}
}
Junior Coders
Gallery Slideshow with Easy Config & Unobtrusive Jscript
Posting Permissions
Reply With Quote
Bookmarks