Make text appear before Image but disappear with image?

I want to modify the following script so that text appears before my image, stays with the current image duration and disappears with current the image.

I'm using http://www.devtrix.net/sliderman/

See below is my code: and I need help with this urgently.


/**
* Sliderman.js 
* Version: 1.1.1
* Author: Taras Ozarko (tozarko@gmail.com)
*
* (c) 2010 Devtrix. All rights reserved. http://www.devtrix.net/sliderman/
**/

var Sliderman = new function(){
	var Sliderman = this;
	
	function random(l){
		r = Math.round(Math.random()*(l+1));
		if(r > 0 && r < l+1) r--;
		else r = random(l);
		return r;
	}//random
	
	function foreach(o, f){
		for(var k in o){
			if(o.hasOwnProperty(k) && f(k,o[k],o)) return;
		}
	}//foreach
	
	function addElementEvent(o,e,f){
		var of = o[e];
		o[e] = typeof of != 'function' ? f : function(){of();f();};
	}//addElementEvent
	
	var _loadImage = [];
	function loadImage(s,f,always_show_loading){
		var l = function(){if(_loadImage[s]){if(f)f(s);}else{var i=newElement('IMG');i.onload=function(){_loadImage[s]=true;if(f)f(s);};i.src=s;}}
		if(always_show_loading) setTimeout(l, typeof(always_show_loading) == 'number' ? always_show_loading : 1000);
		else l();
	}//loadImage
	
	function array_copy(a){
		if(a.constructor.name == 'Array') var r = [];
		else var r = {};
		
		foreach(a, function(i){
			r[i] = typeof(a[i]) != 'object' ? a[i] : array_copy(a[i]);
		});
		
		return r;
	}//array_copy
	
	function now(){
		return (new Date()).getTime();
	}//now
	
	function eq(a, b){
		return String(a).replace(/^\s+/, '').replace(/\s+$/, '').toLowerCase() == String(b).replace(/^\s+/, '').replace(/\s+$/, '').toLowerCase();
	}//eq
	
	function array_search(arr, a, b){
		var result = false;
		if(!b){
			foreach(arr, function(i){
				if(eq(arr[i], b)){
					result = i;
					return true;
				}
			});
		}
		else{
			foreach(arr, function(i){
				if(eq(arr[i][a], b)){
					result = i;
					return true;
				}
			});
		}
		return result;
	}//array_search
	
	function validateOption(a, b){
		b = b.split(',');
		var result;
		foreach(b, function(i){
			result = b[i];
			if(eq(a, b[i])) return true;
		});
		return result;
	}//validateOption
	
	var setOpacity;
	function setOpacityInit(){
		if(setOpacity) return;
		var p, b = document.body, s = b.style;
		if (typeof s.opacity == 'string') p = 'opacity';
	  else if (typeof s.MozOpacity == 'string') p = 'MozOpacity';
	  else if (typeof s.KhtmlOpacity == 'string') p = 'KhtmlOpacity';
	  else if (b.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) p = 'filter';
	  if(p == 'filter'){
			setOpacity = function(style, v){
				if(v > 1) v = 1;
				else if(v < 0) v = 0;
			  style[p] = "alpha(opacity=" + Math.round(v*100) + ")";
			}
		}else if(p){
			setOpacity = function(style, v){
				if(v > 1) v = 1;
				else if(v < 0) v = 0;
			  style[p] = v.toFixed(2);
			}
		}else setOpacity = ef
	}//setOpacityInit
	
	function setStyle(style, property, value){
		if(typeof(value) == 'string') style[property] = value;
		else if(property == 'clip') style[property] = 'rect('+Math.round(value[0])+'px, '+Math.round(value[1])+'px, '+Math.round(value[2])+'px, '+Math.round(value[3])+'px)';
		else if(property == 'opacity') setOpacity(style, value);
		else style[property] = Math.round(value)+'px';
	}//setStyle
	function setStyles(style, properties){
		foreach(properties, function(property){
			setStyle(style, property, properties[property]);
		});
	}
	function hide(style){style.display = 'none';}
	function show(style){style.display = '';}
	
	function newElement(tagName, styles){
		var e = document.createElement(tagName);
		if(styles) setStyles(e.style, styles);
		return e;
	}//newElement

	var EffectsArr = [];
	function Effects(parameters){
		var effect = parameters.effect,	display = parameters.display;
		if(!effect) effect = {};
		effect.interval = effect.interval || 40;
		effect.duration = effect.duration || 200;
		effect.delay = effect.delay || 0;
		var framesCount = Math.round(effect.duration / effect.interval);
		var index, piece, r, image, startStylesArr = [], AnimateArr = [], needAnimate = [], AnimateItemsArr = [], styleStart, styleEnd, styleDif;
		
		var container = newElement('div', {width: display.width, height: display.height, position: 'absolute', top: 0, left: 0, overflow: 'hidden'})
		parameters.container.appendChild(container);
		
		var pieces = {cols: effect.cols ? effect.cols : 1, rows: effect.rows ? effect.rows : 1};
		pieces.count = pieces.cols*pieces.rows;
		pieces.width = display.width / pieces.cols, pieces.height = display.height / pieces.rows;
		for(var c = 0; c < pieces.cols; c++) for(var r = 0; r < pieces.rows; r++) pieces[c+','+r] = [r*pieces.height, c*pieces.width+pieces.width, r*pieces.height+pieces.height, c*pieces.width];
		
		var optionsCopy = array_copy(effect);
		var effectsInvers = array_copy(effect);
		effectsInvers.top = optionsCopy.bottom;
		effectsInvers.bottom = optionsCopy.top;
		effectsInvers.left = optionsCopy.right;
		effectsInvers.right = optionsCopy.left;
		
		effect.order = validateOption(effect.order, 'straight,swirl,snake,straight_stairs,random');
		var orderArr = doOrder(pieces.cols, pieces.rows, effect.order, effect.road, effect.reverse);
		
		var effectsOptStr = effect.order == 'random' ? now() : [
			effect.interval, effect.duration, effect.delay, effect.cols, effect.rows,
			effect.top, effect.right, effect.bottom, effect.left,
			effect.fade, effect.zoom, effect.move, effect.chess,
			effect.order, effect.road, effect.reverse
		].join(',');
		
		if(EffectsArr[effectsOptStr]){
			startStylesArr = EffectsArr[effectsOptStr].startStylesArr;
			AnimateArr = EffectsArr[effectsOptStr].AnimateArr;
			needAnimate = EffectsArr[effectsOptStr].needAnimate;
		}else{
			for(r = 0; r < pieces.rows; r++) for(c = 0; c < pieces.cols; c++){
				index = orderArr[c+','+r];
				
				if(effect.chess && index % 2 == 1) effect = effectsInvers;
				else effect = optionsCopy;
				
				styleStart = {top: 0, left: 0, opacity: 1, width: display.width, height: display.height};
				styleEnd = array_copy(styleStart); piece = array_copy(pieces[c+','+r]);
				
				if(effect.fade) styleStart.opacity = 0;
				
				if(effect.top && effect.bottom) piece[0] = piece[2] = (piece[0] + piece[2]) / 2;
				else if(effect.top) piece[2] -= pieces.height;
				else if(effect.bottom) piece[0] += pieces.height;
				if(effect.left && effect.right) piece[1] = piece[3] = (piece[1] + piece[3]) / 2;
				else if(effect.left) piece[1] -= pieces.width;
				else if(effect.right) piece[3] += pieces.width;
				
				if(effect.zoom){
					styleStart.left = pieces[c+','+r][3];
					styleStart.top = pieces[c+','+r][0];
					if(effect.left && effect.right) styleStart.left += pieces.width / 2;
					else if(effect.right) styleStart.left += pieces.width;
					else if(!effect.left) styleStart.left = 0;
					if(effect.top && effect.bottom) styleStart.top += pieces.height / 2;
					else if(effect.bottom) styleStart.top += pieces.height;
					else if(!effect.top) styleStart.top = 0;
					if(effect.left || effect.right) piece[1] = piece[3] = 0;
					if(effect.top || effect.bottom) piece[0] = piece[2] = 0;
					styleStart.width = effect.left || effect.right ? 0 : display.width;
					styleStart.height = effect.top || effect.bottom ? 0 : display.height;
				}
				
				if(effect.move){
					if(effect.top){
						styleStart.top = parseInt(styleStart.top)-pieces.height;
						piece[0] += pieces.height; piece[2] += pieces.height;
					}
					if(effect.bottom){
						styleStart.top = parseInt(styleStart.top)+pieces.height;
						piece[0] -= pieces.height; piece[2] -= pieces.height;
					}
					if(effect.left){
						styleStart.left = parseInt(styleStart.left)-pieces.width;
						piece[1] += pieces.width; piece[3] += pieces.width;
					}
					if(effect.right){
						styleStart.left = parseInt(styleStart.left)+pieces.width;
						piece[1] -= pieces.width; piece[3] -= pieces.width;
					}
				}
				
				styleStart.clip = piece;
				styleEnd.clip = pieces[c+','+r];
				
				styleDif = [];
				foreach(styleEnd, function(property){
					if(styleStart[property].toString() != styleEnd[property].toString()){
						styleDif[property] = [];
						if(property == 'clip'){
							foreach(styleStart[property], function(n){
								styleDif[property][n] = styleEnd[property][n] - styleStart[property][n];
							});
						}else styleDif[property] = styleEnd[property] - styleStart[property];
						needAnimate[index] = true;
					}
				});
				
				startStylesArr[index] = styleStart; AnimateArr[index] = [];
				if(effect.delay) for(var n = 0; n < Math.round(index*effect.delay/effect.interval); n++) AnimateArr[index].push(null);
				
				var frameN;
				if(!needAnimate[index]) AnimateArr[index].push({display: ''});
				else for(frameN = 1; frameN <= framesCount; frameN++){
					progress = frameN/framesCount;
					progress = -Math.cos(progress*Math.PI)/2 + 0.5;
					var style_c = [];
					if(frameN == framesCount) style_c = styleEnd;
					else{
						foreach(styleDif, function(property){
							value = [];
							if(property == 'clip'){
								foreach(styleDif[property], function(n){
									value[n] = styleStart[property][n]+styleDif[property][n]*progress;
								});
							}else value = styleStart[property]+styleDif[property]*progress;
							style_c[property] = value;
						});
					}
					AnimateArr[index].push(style_c);
				}
				
			}//for
			EffectsArr[effectsOptStr] = {startStylesArr: startStylesArr, AnimateArr: AnimateArr, needAnimate: needAnimate};
		}
		
		for(r = 0; r < pieces.rows; r++) for(c = 0; c < pieces.cols; c++){
			index = orderArr[c+','+r];
			image = newElement('IMG', startStylesArr[index]);
			var style = image.style;
			image.src = parameters.src;
			style.position = 'absolute';
			container.appendChild(image);
			AnimateItemsArr[index] = style;
			if(!needAnimate[index]) hide(AnimateItemsArr[index]);
		}
		
		//ANIMATE
		var time_s = now();
		var framesCountAll = AnimateArr[AnimateArr.length-1].length;
		var AnimateItem, AnimateItemsComplete = [], timerFuncStatus = true, timerFunc = function(){
			if(timerFuncStatus){
				var frameC = Math.ceil((now() - time_s) / effect.interval);
				frameC = frameC >= framesCountAll ? framesCountAll-1 : frameC-1;
				foreach(AnimateArr, function(index){
					AnimateItem = frameC > AnimateArr[index].length-1 ? AnimateArr[index].length-1 : frameC;
					if(AnimateArr[index][AnimateItem] && !AnimateItemsComplete[index+','+AnimateItem]){
						setStyles(AnimateItemsArr[index], AnimateArr[index][AnimateItem]);
						AnimateItemsComplete[index+','+AnimateItem] = true;
					}
				});
				if(frameC == framesCountAll-1){
					if(pieces.count > 1) container.innerHTML = '<img src="'+parameters.src+'" width="'+display.width+'" height="'+display.height+'" />';
					parameters.callback(container);
					timerFuncStatus = false;
				}
			}
			return timerFuncStatus;
		};
		var animateInterval = setInterval(function(){
			if(!timerFunc()) clearInterval(animateInterval);
		}, effect.interval);
		
		
}//Effects

	var OrderArr = [];
	function doOrder(cols, rows, order, road, reverse){
		cols = parseInt(cols); rows = parseInt(rows);
		var arr = [], tmp = [], i = 0, c = 0, r = 0, count = cols*rows, cl = cols - 1, rl = rows - 1, il = count - 1, func;
		if(!road) road = 'RB';
		function map(f){for(r = 0; r < rows; r++) for(c = 0; c < cols; c++) f();}
		
		var OrderOptStr = [cols, rows, order, road, reverse].join(',');
		if(!OrderArr[OrderOptStr]){
			if(count > 1){
				
				switch(order){
					case 'straight':
						switch(road){
							case 'BL': func = function(){arr[c+','+r] = il-(c*rows+(rl-r));}; break;
							case 'RT': func = function(){arr[c+','+r] = il-(r*cols+(cl-c));}; break;
							case 'TL': func = function(){arr[c+','+r] = il-(c*rows+r);};
							case 'LT': func = function(){arr[c+','+r] = il-(r*cols+c);}; break;
							case 'BR': func = function(){arr[c+','+r] = c*rows+r;}; break;
							case 'LB': func = function(){arr[c+','+r] = r*cols+(cl-c);}; break;
							case 'TR': func = function(){arr[c+','+r] = c*rows+(rl-r);}; break;
							default: func = function(){arr[c+','+r] = r*cols+c;}; break;//'RB'
						}
						map(func);
					break;
					case 'swirl':
						var courses, course = 0;
						switch(road){
							case 'BL': c = cl; r = 0; courses = ['r+', 'c-', 'r-', 'c+']; break;
							case 'RT': c = 0; r = rl; courses = ['c+', 'r-', 'c-', 'r+']; break;
							case 'TL': c = cl; r = rl; courses = ['r-', 'c-', 'r+', 'c+']; break;
							case 'LT': c = cl; r = rl; courses = ['c-', 'r-', 'c+', 'r+']; break;
							case 'BR': c = 0; r = 0; courses = ['r+', 'c+', 'r-', 'c-']; break;
							case 'LB': c = cl; r = 0; courses = ['c-', 'r+', 'c+', 'r-']; break;
							case 'TR': c = 0; r = rl; courses = ['r-', 'c+', 'r+', 'c-']; break;
							default: c = 0; r = 0; courses = ['c+', 'r+', 'c-', 'r-']; break;//'RB'
						}
						i = 0;
						while(i < cols*rows){
							if(c >= 0 && c < cols && r >= 0 && r < rows && typeof(arr[c+','+r]) == 'undefined') arr[c+','+r] = i++;
							else switch(courses[course++%courses.length]){case 'c+': c--; break; case 'r+': r--; break; case 'c-': c++; break; case 'r-': r++; break;}
							switch(courses[course%courses.length]){case 'c+': c++; break; case 'r+': r++; break; case 'c-': c--; break; case 'r-': r--; break;}
						}
					break;
					case 'snake':
						var courses, course = 0;
						switch(road){
							case 'BL': c = cl; r = 0; courses = ['r+', 'c-', 'r-', 'c-']; break;
							case 'RT': c = 0; r = rl; courses = ['c+', 'r-', 'c-', 'r-']; break;
							case 'TL': c = cl; r = rl; courses = ['r-', 'c-', 'r+', 'c-']; break;
							case 'LT': c = cl; r = rl; courses = ['c-', 'r-', 'c+', 'r-']; break;
							case 'BR': c = 0; r = 0; courses = ['r+', 'c+', 'r-', 'c+']; break;
							case 'LB': c = cl; r = 0; courses = ['c-', 'r+', 'c+', 'r+']; break;
							case 'TR': c = 0; r = rl; courses = ['r-', 'c+', 'r+', 'c+']; break;
							default: c = 0; r = 0; courses = ['c+', 'r+', 'c-', 'r+']; break;//'RB'
						}
						i = 0;
						while(i < cols*rows){
							if(c >= 0 && c < cols && r >= 0 && r < rows && typeof(arr[c+','+r]) == 'undefined'){
								arr[c+','+r] = i++;
								switch(courses[course%courses.length]){case 'c+': c++; break; case 'r+': r++; break; case 'c-': c--; break; case 'r-': r--; break;}
							}
							else{
								switch(courses[course++%courses.length]){case 'c+': c--; break; case 'r+': r--; break; case 'c-': c++; break; case 'r-': r++; break;}
								switch(courses[course++%courses.length]){case 'c+': c++; break; case 'r+': r++; break; case 'c-': c--; break; case 'r-': r--; break;}
							}
						}
					break;
					case 'straight_stairs':
						switch(road){
							case 'BL': case 'TR': case 'TL': case 'BR': var C = 0, R = 0; break;
							case 'LB': case 'RT': case 'LT': case 'RB': default: var C = cl, R = 0; break;
						}
						c = C; r = R;
						while(i < count){
							if(road.indexOf('T') == 1 || road.indexOf('R') == 1) arr[c+','+r] = il - i++;
							else arr[c+','+r] = i++;
							switch(road){
								case 'BL': case 'TR': c--; r++; break;
								case 'TL': case 'BR': c++; r--; break;
								case 'LB': case 'RT': c--; r--; break;
								case 'RB': case 'LT': default: c++; r++; break;
							}
							if(c < 0 || r < 0 || c > cl || r > rl){
								switch(road){
									case 'BL': case 'TR': C++; break;
									case 'LB': case 'RT': case 'TL': case 'BR': R++; break;
									case 'RB': case 'LT': default: C--; break;
								}
								if(C < 0 || R < 0 || C > cl || R > rl){
									switch(road){
										case 'BL': case 'TR': C = cl; R++; break;
										case 'TL': case 'BR': R = rl; C++; break;
										case 'LB': case 'RT': R = rl; C--; break;
										case 'RB': case 'LT': default: C = 0; R++; break;
									}
									if(R > rl) R = rl; else if(R < 0) R = 0; else if(C > cl) C = cl; else if(C < 0) C = 0;
								}
								r = R; c = C;
							}
						}
					break;
				}
				
				if(reverse) foreach(arr, function(i){arr[i] = il - arr[i];});
				
			}else arr['0,0'] = 0;
				
			OrderArr[OrderOptStr] = arr;
		}
		
		if(order == 'random'){
			map(function(){tmp.push(c+','+r)});
			tmp.sort(function(a,b){return Math.random() > 0.5;});
			for(var i = 0; i < cols*rows; i++) arr[tmp[i]] = i;
			OrderArr[OrderOptStr] = arr;
		}
		return OrderArr[OrderOptStr];
	}//doOrder
	
	var _effectName = 0;
	function effectName(){
		return 'Sliderman-nameless-effect-'+_effectName++;
	}//effectName
	
	var globalEffects = [];
	Sliderman.effect = function(e){
		if(e){
			var n = -1;
			if(e.name){
				var globalEffectsId = array_search(globalEffects, 'name', e.name);
				if(globalEffectsId) n = globalEffectsId;
			}else e.name = effectName();
			if(n >= 0) globalEffects[n] = e;
			else globalEffects.push(e);
		}
	}//Sliderman.effect
	
	Sliderman.effect({name: 'fade', fade: true, duration: 400});
	Sliderman.effect({name: 'move', left: true, move: true, duration: 400});
	Sliderman.effect({name: 'stairs', cols: 7, rows: 5, delay: 30, order: 'straight_stairs', road: 'BL', fade: true});
	Sliderman.effect({name: 'blinds', cols: 10, delay: 100, duration: 400, order: 'straight', right: true, zoom: true, fade: true});
	Sliderman.effect({name: 'rain', cols: 10, delay: 100, duration: 400, order: 'straight', top: true, fade: true});
	
	Sliderman.slider = function(parameters){
		setOpacityInit();
		
		var Slider = {}, current, previous, prevImg, status = 'free', isHover = true, images = [], descriptions = [], links = [], ef = function(){};
		
		//EVENTS
		var events = parameters.events, eventCall = events ? function(e){if(events[e] && typeof(events[e]) == 'function') events[e](Slider);} : ef;
		
		//SLIDER EFECTS		
		var effects = [];
		var previousEffect = -1;
		var addEffect = function(e){
			if(typeof(e) == 'string'){
				e = e.split(',');
				if(e.length == 1){
					var globalEffectsId = array_search(globalEffects, 'name', e);
					if(globalEffectsId) addEffect(globalEffects[globalEffectsId])
				}else for(var i  = 0; i < e.length; i++) addEffect(e[i]);
			}else if(e){
				if(!e.name) e.name = effectName();
				var effectsId = array_search(effects, 'name', e.name);
				if(!effectsId) effectsId = effects.length;
				effects[effectsId] = array_copy(e);
			}
		}//addEffect
		var getEffect = function(){
			var n = 0;
			if(effects.length > 1){
				n = random(effects.length);
				if(previousEffect == n) n++;
				n %= effects.length;
				previousEffect = n;
			}
			return effects[n];
		}//getEffect
		if(parameters.effects){
			if(parameters.effects.constructor.name == 'Array') for(var i = 0; i < parameters.effects.length; i++) addEffect(parameters.effects[i]);
			else addEffect(parameters.effects);
		}
		if(!effects.length) effects = array_copy(globalEffects);
		
		//OPTIONS
		var display = parameters.display || {};
		display.width = parameters.width;
		display.height = parameters.height;
		var loading = display.loading || {};
		var description = display.description || null;
		var navigation = display.navigation || null;
		var buttons = display.buttons || null;
		
		var styleDef = {width: display.width, height: display.height, position: 'absolute', top: 0, left: 0, display: 'block'};
		
		var mainCont = document.getElementById(parameters.container);
		addElementEvent(mainCont, 'onmouseover', function(){isHover = true;
			if(buttons && buttons.hide) show(buttonsCont.style);
			if(description && description.hide) show(descriptionCont.style);
			if(display.pause) autoplay(false);
		});
		addElementEvent(mainCont, 'onmouseout', function(){isHover = false;
			if(buttons && buttons.hide) hide(buttonsCont.style);
			if(description && description.hide) hide(descriptionCont.style);
			if(display.pause) autoplay(true);
		});
		
		//GET CONTENT
		for(var i = 0; i < mainCont.childNodes.length; i++){
			if(mainCont.childNodes[i].nodeType == 1){
				if(mainCont.childNodes[i].tagName == 'A'){
					var img = mainCont.childNodes[i].getElementsByTagName('IMG');
					if(img.length){
						images.push(img[0].src);
						links[images.length-1] = mainCont.childNodes[i];
					}else descriptions[images.length-1] = mainCont.childNodes[i];
				}else if(mainCont.childNodes[i].tagName == 'IMG'){
					images.push(mainCont.childNodes[i].src);
					if(mainCont.childNodes[i].useMap){
						var maps = document.getElementsByTagName('MAP'), map;
						if(maps.length){
							for(var m = 0; m < maps.length; m++){
								if(maps[m].name && mainCont.childNodes[i].useMap.replace(/^[^#]*#/, '') == maps[m].name) map = maps[m];
							}
						}
						if(map) links[images.length-1] = map;
					}
				}else if(mainCont.childNodes[i].tagName == 'MAP') continue;
				else descriptions[images.length-1] = mainCont.childNodes[i];
				hide(mainCont.childNodes[i].style);
			}
		}
		for(var i = 0; i < images.length; i++) loadImage(images[i]);
		
		//CONTAINERS
		var sliderCont = newElement('DIV', {width: display.width, height: display.height, position: 'relative'}); mainCont.appendChild(sliderCont);
		var imagesCont = newElement('DIV', styleDef); sliderCont.appendChild(imagesCont);
		var partsCont = newElement('DIV', styleDef); sliderCont.appendChild(partsCont);
		var lnk = newElement('DIV', styleDef); partsCont.appendChild(lnk);
		var loadingCont = newElement('DIV'); partsCont.appendChild(loadingCont);
		var descriptionCont = newElement('DIV'); partsCont.appendChild(descriptionCont);
		var buttonsCont = newElement('DIV'); partsCont.appendChild(buttonsCont);
		
		//LINKS
		var linkUpd = function(){
			lnk.innerHTML = '';
			value = links[current];
			if(value){
				if(value.tagName == 'MAP'){
					var a = newElement('IMG', styleDef);
					a.src = images[current];
					a.useMap = '#'+value.name;
				}else{
					var a = newElement('A', styleDef);
					a.href = value.href;
					a.target = value.target;
				}
				setStyles(a.style, {opacity: 0, background: '#000000'})
				a.onfocus = function(){this.blur();};
				lnk.appendChild(a);
			}
		}
		
		//LOADING
		if(loading.background){
			var loadingBgStyle = array_copy(styleDef);
			loadingBgStyle.background = loading.background;
			if(loading.opacity) loadingBgStyle.opacity = loading.opacity;
			loadingCont.appendChild(newElement('DIV', loadingBgStyle));
		}
		if(loading.image){
			var loadingImgStyle = array_copy(styleDef);
			loadingImgStyle.background = 'url('+(loading.image)+') no-repeat center center';
			loadingCont.appendChild(newElement('DIV', loadingImgStyle));
		}
		var showLoading = function(a){
			if(a) show(loadingCont.style);
			else hide(loadingCont.style);
			status = a ? 'loading' : 'free';
		}
		
		//DESCRIPTION
		if(description){
			if(description.hide) hide(descriptionCont.style);
			
			var descriptionStl = {position: 'absolute', overflow: 'hidden', textAlign: 'left'};
			if(!description) description = [];
			description.position = validateOption(description.position, 'top,left,right,bottom')
			descriptionStl.background = description.background || 'white';
			descriptionStl.opacity = description.opacity || 0.5;
			descriptionStl.width = description.position == 'top' || description.position == 'bottom' ? display.width : description.width || display.width*0.2;
			descriptionStl.height = description.position == 'left' || description.position == 'right' ? display.height : description.height || display.height*0.2;
			descriptionStl[description.position == 'bottom'?'bottom':'top'] = 0;
			descriptionStl[description.position == 'right'?'right':'left'] = 0;
				
			var descBg = newElement('DIV', descriptionStl); descriptionCont.appendChild(descBg);
			descriptionStl.opacity = 1; descriptionStl.background = '';
			var desc = newElement('DIV', descriptionStl); descriptionCont.appendChild(desc);
			
			var descriptionShow = function(){
				desc.innerHTML = '';
				setStyle(descriptionCont.style, 'visibility', 'hidden');
				var value = descriptions[current];
				if(value){
					setStyle(descriptionCont.style, 'visibility', 'visible');
					value = value.cloneNode(true);
					show(value.style);
					desc.appendChild(value);
					if(isHover) show(descriptionCont.style);
				}
			}
		}else var descriptionShow = ef
		
		//BUTTONS
		if(buttons){
			if(buttons.hide) hide(buttonsCont.style);
			var btnPrev = newElement('A'); buttonsCont.appendChild(btnPrev);
			btnPrev.href = 'javascript:void(0);';
			var btnNext = btnPrev.cloneNode(true); buttonsCont.appendChild(btnNext);
			btnPrev.onfocus = function(){this.blur();}
			btnNext.onfocus = function(){this.blur();}
			btnPrev.onclick = function(){Slider.prev();}
			btnNext.onclick = function(){Slider.next();}
			btnPrev.innerHTML = typeof(buttons.prev.label) != 'undefined' ? buttons.prev.label : 'prev';
			btnNext.innerHTML = typeof(buttons.next.label) != 'undefined' ? buttons.next.label : 'next';
			if(buttons.prev.className) btnPrev.className = buttons.prev.className;
			if(buttons.next.className) btnNext.className = buttons.next.className;
			if(buttons.opacity || buttons.prev.opacity) setOpacity(btnPrev.style, buttons.opacity || buttons.prev.opacity);
			if(buttons.opacity || buttons.next.opacity) setOpacity(btnNext.style, buttons.opacity || buttons.next.opacity);
		}
		
		//NAVIGATION
		if(navigation){
			var navigationCont = document.getElementById(navigation.container);
			var navigationLinks = [];
			for(var i = 0; i < images.length; i++){
				var a = newElement('A');
				if(navigation.label) a.innerHTML = typeof(navigation.label) == 'string' ? navigation.label : i+1;
				a.href = 'javascript:void(0);';
				a.id = parameters.container+'_SliderNavigation'+i;
				a.onfocus = function(){this.blur();};
				a.onclick = function(){Slider.go(this.id.replace(/[^\d]+/g, ''));};
				navigationLinks.push(a);
				navigationCont.appendChild(a);
			}
			var navigationUpd = function(){
				for(var i = 0; i < navigationLinks.length; i++) navigationLinks[i].className = '';
				navigationLinks[current].className = 'active';
			}
		}else var navigationUpd = ef
		
		//AUTOPLAY
		if(display.autoplay){
			var autoplayTimeout;
			var autoplay = function(a){
				if(autoplayTimeout) clearTimeout(autoplayTimeout);
				if(a && !(isHover && display.pause)) autoplayTimeout = setTimeout(Slider.next, display.autoplay);
			}//autoplay
		}else var autoplay = ef
		
		Slider.next = function(){Slider.go(current + 1);}
		Slider.prev = function(){Slider.go(current - 1);}
		Slider.go = function(index){
			index = (images.length + index) % images.length;
			autoplay(false);
			if(status != 'free' || current == index) return;
			previous = current;
			current = index;
			eventCall('loading');
			showLoading(true);
			loadImage(images[current], function(src){
				eventCall('before');
				showLoading(false); status = 'busy'; descriptionShow(); linkUpd(); navigationUpd();
				Effects({effect: getEffect(), display: display, container: imagesCont, src: src, callback: function(img){
					if(prevImg) prevImg.parentNode.removeChild(prevImg);
					prevImg = img; status = 'free'; autoplay(true);
					eventCall('after');
				}});
			}, display.always_show_loading);
		}//go
		Slider.get = function(a){
			switch(a){
				case 'length': return images.length; break;
				case 'current': return current; break;
				case 'previous': return previous; break;
				case 'images': return images; break;
				case 'links': return links; break;
				case 'descriptions': return descriptions; break;
			}
		}//get
		
		if(display.mousewheel){
			onmousewheel = function(d){
				if(d > 0) Slider.prev();
				else if(d < 0) Slider.next();
				return true;
			};
			function wheel(event){
				var d = 0;
				if(!event) event = window.event;
				if(event.wheelDelta){
					d = event.wheelDelta/120;
					if(window.opera) d = -d;
				}else if(event.detail) d = -event.detail/3;
				if(d && onmousewheel(d)){
					if(event.preventDefault) event.preventDefault();
					event.returnValue = false;
				}
			}//wheel
			if(mainCont.addEventListener){
				mainCont.addEventListener("DOMMouseScroll",wheel,false);
				mainCont.addEventListener("mousewheel",wheel,false);
			}else addElementEvent(mainCont, 'onmousewheel', wheel);
		}
		
		Slider.go(0);
		return Slider;
	}//Sliderman.slider
	
}

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<style type="text/css">
		* { margin: 0; outline: none; }
		body { background-color: #fff; }
		.c { clear: both; }
		#wrapper { margin: 0 auto; padding: 0 40px 60px 40px; width: 960px; }
		h2 { padding: 20px 0 10px 0; font-size: 24px; line-height: 40px; font-weight: normal; color: #fff; text-shadow: 0 1px 3px #fff;
		.SliderNameDescription > a {color: #ffffff;}
		
		 }
	</style>

	<!-- sliderman.js -->
	<script type="text/javascript" src="js/sliderman.1.1.1.js"></script>
	<link rel="stylesheet" type="text/css" href="css/sliderman.css" />
	<!-- /sliderman.js -->
</div>
<body>
	<div id="wrapper">

		<div id="examples_outer">
			
			<div id="slider_container_1">

				<div id="SliderName">

					<a href="#1">
						<img src="SlideImage/123-60yrs-1.jpg" title="Description from Image Title" />
					</a>
										
					<a href="#2">
						<img src="SlideImage/123-6dec-2.jpg" />
					</a>
					
					<img src="SlideImage/123-pio-3.jpg" />
					
					
					<img src="SlideImage/123-socioenviro-4.jpg" />
					
				
					
					
					<img src="SlideImage/123-ground-5.jpg" />
					<div class="SliderNameDescription"><a href="#3">> View our <strong>INTERACTIVE TIMELINE</strong> 150 Years</a></div>
					
					<p class="SliderNameDescription" src="SlideImage/Images-LyrsC2.gif" alt="last_tex" width="930" height="330" />
				</div>

			
		
			
<script type="text/javascript"><!--//

							Sliderman.effect({name: 'devtrix01', cols: 10, rows: 5, fade: true, order: 'swirl', delay: 50});
							Sliderman.effect({name: 'devtrix02', cols: 10, rows: 5, fade: true, order: 'swirl', road: 'TL', reverse: true, delay: 50});
							Sliderman.effect({name: 'devtrix03', cols: 1, rows: 1, duration: 500, fade: true});
							Sliderman.effect({name: 'devtrix04', cols: 1, rows: 6, duration: 500, fade: true, top: true});
							Sliderman.effect({name: 'devtrix05', cols: 10, rows: 1, duration: 500, fade: true, left: true});
							Sliderman.effect({name: 'devtrix06', cols: 9, rows: 3, delay: 50, duration: 500, fade: true, right: true});
							Sliderman.effect({name: 'devtrix07', cols: 9, rows: 3, delay: 50, chess: true, duration: 500, fade: true, bottom: true});
							Sliderman.effect({name: 'devtrix08', cols: 6, rows: 3, delay: 70, duration: 400, move: true, top: true});
							Sliderman.effect({name: 'devtrix09', cols: 8, rows: 4, delay: 70, duration: 400, move: true, top: true, road: 'TL', order: 'straight'});
							Sliderman.effect({name: 'devtrix10', cols: 10, rows: 5, delay: 40, duration: 500, fade: true, road: 'TL', order: 'straight_stairs'});
							Sliderman.effect({name: 'devtrix11', cols: 10, rows: 5, delay: 40, duration: 500, fade: true, road: 'BR', order: 'straight_stairs'});
							Sliderman.effect({name: 'devtrix12', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
							Sliderman.effect({name: 'devtrix13', cols: 10, rows: 5, delay: 50, duration: 500, fade: true, road: 'TR', order: 'snake'});
							Sliderman.effect({name: 'devtrix14', cols: 10, rows: 5, delay: 30, duration: 500, fade: true, road: 'RB', order: 'snake'});
							Sliderman.effect({name: 'devtrix15', cols: 10, rows: 5, delay: 30, duration: 500, fade: true, road: 'LT', order: 'snake'});
							Sliderman.effect({name: 'devtrix16', cols: 6, rows: 1, duration: 400, fade: true, move: true, left: true});
							Sliderman.effect({name: 'devtrix17', cols: 1, rows: 4, duration: 400, fade: true, move: true, top: true});
							Sliderman.effect({name: 'devtrix18', cols: 10, rows: 5, fade: true, delay: 10, duration: 400});
							Sliderman.effect({name: 'devtrix19', fade: true, duration: 500, move: true, top: true});
							Sliderman.effect({name: 'devtrix20', fade: true, duration: 400, move: true, left: true});
							Sliderman.effect({name: 'devtrix21', move: true, duration: 900, move: true, right: true});
							Sliderman.effect({name: 'devtrix51', move: true, right: true, move: true, duration: 800});
							Sliderman.effect({name: 'devtrix51a',move: true, right: true, fade: true, duration: 1600});
							Sliderman.effect({name: 'devtrix22', fade: true, duration: 500, move: true, bottom: true});
							Sliderman.effect({name: 'devtrix23', cols: 10, delay: 100, duration: 400, order: 'straight', bottom: true, road: 'RB', fade: true});
							Sliderman.effect({name: 'devtrix24', rows: 8, delay: 100, duration: 400, order: 'straight', left: true, fade: true, chess: true});
							Sliderman.effect({name: 'devtrix25', cols: 10, delay: 100, duration: 500, order: 'straight', right: true, move: true, zoom: true, fade: true});
							
							// we don't want the default presets (fade,move,stairs,blinds,rain) to appear, so passing an array of the effect we created above
							devtrixEffects = ['devtrix51']; 
							
							var slider = Sliderman.slider({container: 'SliderName', width: 930, height: 330, 
								effects: devtrixEffects,
								display: {
										pause: true, // slider pauses on mouseover
						autoplay: 5000, // 3 seconds slideshow
						always_show_loading: 200, // testing loading mode
						description: {background: '#003399', color: '#ffffff', opacity: 0.7, height: 50, position: 'bottom', height: 30}, // image description box settings
						loading: {background: '#ffffff', opacity: 0.2}, // loading box settings
								}
							});
							
							
							devtrixEffectsX = ['devtrix10']; 
							var slider = Sliderman.slider({container: 'SliderNamedesc', width: 930, height: 330, 
								effects: devtrixEffectsX,
								display: {
										pause: true, // slider pauses on mouseover
						autoplay: 5000, // 3 seconds slideshow
						always_show_loading: 200, // testing loading mode
						description: {background: 'transparent', zIndex:100, color: '#ffffff', opacity: 0.7, height: 50, position: 'bottom', height: 30}, // image description box settings
						loading: {background: '#ffffff', opacity: 0.2}, // loading box settings
								}
							});
							//-->
						</script>



				<div class="c"></div>
			</div>
			<div class="c"></div>
		</div>
					
	</body>
</html>

Open in new window

LVL 1
VAN_ALAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
But is that not what

Demo1 does

http://www.devtrix.net/sliderman/examples.html
0
VAN_ALAuthor Commented:
How do I add another div on top of the current image after the image loads, (i want to add text on top of an image) and then id slides off, both the image and text, how do I do that? Is there a pay service for this.
0
Michel PlungjanIT ExpertCommented:
Did you ask the author?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
VAN_ALAuthor Commented:
I have emailed the author but have not received a response yet.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.