PDA

View Full Version : Gallery Slideshow with Easy Config & Unobtrusive Jscript



diltony
12-28-2008, 07:44 PM
1) CODE TITLE: Gallery Slideshow with Easy Config & Unobtrusive Jscript

2) AUTHOR NAME/NOTES: Tony Ogundipe

3) DESCRIPTION: This shows an image gallery on your webpage. You can specify the number of images you want It uses unobtrusive javascript. So it is easy to use, and does not usually clash with other scripts on your web page.

4) URL TO CODE: http://ds.mwebng.net/index.php?subset=js&page=slideshow

or, ATTACHED BELOW (see #3 in guidelines below):

diltony
12-28-2008, 07:47 PM
It can inserted into a page as simply as:



<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


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


#slide_navigator img {margin:10px;cursor:pointer;cursor:hand;}


And finally [takes a deep breath], the engine


//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)
}
}

diltony
12-28-2008, 07:53 PM
I must add that, it is not as powerful as Ultimate Fade-in slide show on dynamic drive, this was a modification of the Slideshow Script that was earlier posted by Magicyte.
I was just toying around a bit. As usual.

Snookerman
12-28-2008, 07:59 PM
There's a scrollbar..

diltony
12-28-2008, 08:21 PM
The main demo itself is on: http://ds.mwebng.net/pages/js/slideshow/gallery.html

Scrollbars showing depend on the number of images....
And yes that reminds me, this is unlike most of the other scripts i have posted so far, i needed it on a website, i just took the easy way out, besides, there is really nutin much i can do - if u need something robust u can get the ultimate slideshow directly on dd and some others, but if this is precisely what u need, u can just opt for it.
The coding is quite simple to manipulate anyway with comments in lots of places and a very simple config file, and yes i forgot to add, it can link to external sites too.