Solved

Make text appear before Image but disappear with image?

Posted on 2011-03-04
4
699 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:VAN_AL
  • 2
  • 2
4 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35043974
But is that not what

Demo1 does

http://www.devtrix.net/sliderman/examples.html
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 35050935
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 35053346
Did you ask the author?
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 35053954
I have emailed the author but have not received a response yet.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now