dhteumeuleu » harmony

harmony

On July 14, 2001, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/diaporamaH.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>harmony - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="imagetoolbar" content="no"> 
 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position: absolute; 
		left: 15%; 
		top: 5%; 
		width: 70%; 
		height: 90%; 
		overflow: hidden; 
		background: #000; 
	} 
	#images img { 
		position: absolute; 
		left:-10000px; 
		filter: alpha(opacity=40); 
		opacity: 0.4; 
		cursor: pointer; 
		height: 12%; 
		top: 88%; 
	} 
	.transAlpha { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		visibility: hidden; 
		filter: alpha(opacity=100); 
		opacity: 1; 
	} 
	#transAlpha { 
		position: absolute; 
		width: 100%; 
		height: 81%; 
	} 
	#legend { 
		position: absolute; 
		left: 0px; 
		top: 81%; 
		width: 100%; 
		color: #FFF; 
		font-family: arial, helvetica, verdana, sans-serif; 
		font-weight: bold; 
		text-align: center; 
	} 
</style> 
 
<script type="text/javascript"> 
// ===================================================== 
// script: Gerard Ferrandez - ge1doot - July 14, 2001 
// DOM crossbrowser version - April 17th, 2006 
// http://www.dhteumeuleu.com 
// Updated: February 2010 - namespaced 
// ===================================================== 
 
var diapoH = function (duration, frames) { 
	var oCurrent, img, nI, s, t, status, queued, im0, im1; 
	var setOpacity = function (alpha) { 
		if (this.filters) { 
			if (this.filters.alpha) 
				this.filters.alpha.opacity = Math.round( 
					Math.max(0, Math.min(100, alpha)) 
				); 
		} else { 
			this.style.opacity = alpha * .01; 
		} 
	} 
	var timer = function (){ 
		if (status) 
			setTimeout(timer, t); 
		else { 
			im1.setOpacity(0); 
			im1.src = oCurrent.src; 
			im1.style.visibility = "visible"; 
			status = true; 
			var p = (100 / (s / t)) / t; 
			var alpha = 0; 
			for(var i = 0; i <= s; i += t) { 
				setTimeout(function() { 
					alpha += t; 
					im1.setOpacity(alpha * p); 
				}, i); 
			} 
			setTimeout(function() { 
				end(); 
			}, s); 
		} 
	} 
	var end = function (){ 
		status = false; 
		im0.style.visibility = "visible"; 
		im0.src = im1.src; 
		im1.setOpacity(0); 
	} 
	var resize = function () { 
		var scr = document.getElementById("screen"); 
		var nx = scr.offsetWidth; 
		var ny = scr.offsetHeight; 
		for(var i = 0; i < nI; i++) { 
			img[i].i = i; 
			img[i].setOpacity = setOpacity; 
			img[i].onclick = function() { 
				trans(this); 
			} 
			img[i].onmouseover = function() { 
				this.setOpacity(100); 
			} 
			img[i].onmouseout = function() { 
				if (this != oCurrent) 
					this.setOpacity(40); 
			}; 
			var css = img[i].style; 
			css.left = Math.round(Math.ceil(1 + (nx - nI) / nI) * i) + 'px'; 
			css.width = Math.round(-4 + (nx - nI) / nI) + 'px'; 
		} 
		document.getElementById("legend").style.fontSize = Math.round(ny / 20)+'px'; 
	} 
	onresize = resize; 
	var trans = function (oTarget) { 
		if (oTarget != oCurrent) { 
			if (oCurrent.i >= 0) 
				img[oCurrent.i].setOpacity(40); 
			oCurrent = oTarget; 
			oTarget.setOpacity(100); 
			if (!queued) { 
				queued = true; 
				scan(); 
			} 
		} 
	} 
	var scan = function () { 
		if (!status) { 
			document.getElementById("legend").innerHTML = oCurrent.alt; 
			queued = false; 
			timer(); 
		} else setTimeout(scan, 128); 
	} 
	//////////////////////////////////////////////////////////// 
	var init = function (duration, frames) { 
	    s = duration; 
		t = frames; 
		img = document.getElementById("images").getElementsByTagName("img"); 
		nI = img.length; 
		resize(); 
		status = false; 
		oCurrent = 0; 
		var scr = document.getElementById("transAlpha"); 
		im0 = document.createElement("img"); 
		im1 = document.createElement("img"); 
		im0.className = im1.className = "transAlpha"; 
		im1.setOpacity = setOpacity; 
		scr.appendChild(im0); 
		scr.appendChild(im1); 
		trans(img[0]); 
	} 
	//////////////////////////////////////////////////////////// 
	return { 
		init : init 
	} 
}(); 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"> 
 
	<div id="transAlpha" class="transAlpha"></div> 
	<div id="legend"></div> 
	<div id="images"> 
		<img alt="night"  src="../images/i135.jpg"> 
		<img alt="light"  src="../images/i131.jpg"> 
		<img alt="tight"  src="../images/i144.jpg"> 
		<img alt="blight" src="../images/i138.jpg"> 
		<img alt="bright" src="../images/i143.jpg"> 
		<img alt="sight"  src="../images/i140.jpg"> 
	</div> 
</div> 
 
<script type="text/javascript"> 
	setTimeout(function() { 
		diapoH.init(3000, 32); 
	}, 1000); 
</script> 
 
</body> 
</html>

Tagged with: diapo