dhteumeuleu » one day

one day

On February 5, 2010, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/slide-M.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>one day - 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 { 
		position: absolute; 
		margin: 0px; 
		padding: 0px; 
		background: #eee; 
		width: 100%; 
		height: 100%; 
	} 
	#border { 
		position:absolute; 
		width:440px; 
		height:340px; 
		margin-left:-220px; 
		margin-top:-170px; 
		left:50%; 
		top:50%; 
		background:#fff; 
		border:#aaa solid 1px; 
	} 
	#caption { 
		position:absolute; 
		width:440px; 
		height:60px; 
		left:50%; 
		top:50%; 
		margin-left:-220px; 
		margin-top:175px; 
	} 
	#screen { 
		position:absolute; 
		width:400px; 
		height:300px; 
		margin-left:-200px; 
		margin-top:-150px; 
		left:50%; 
		top:50%; 
		background:#fff; 
	} 
	#screen span { 
		position:absolute; 
		overflow:hidden; 
		border:#aaa solid 1px; 
		background:#fff; 
	} 
	#screen img{ 
		position:absolute; 
		left:-32px; 
		top:-32px; 
		cursor: pointer; 
		filter: alpha(opacity=100); 
	} 
	#caption { 
		color: #666; 
		font-family: georgia, 'times new roman', times, veronica, serif; 
		font-size: 1em; 
		text-align: center; 
	} 
	#caption b { 
		font-size: 2em; 
	} 
 
</style> 
 
<script type="text/javascript"> 
// =========================================================== 
// script: Gerard Ferrandez - Ge-1-doot - October 2005 
// http://www.dhteumeuleu.com 
// Updated - Feb 2010 - Namespaced script 
// =========================================================== 
// 
 
var siM = function () { 
	/* ---- private vars ---- */ 
	var obj = [], scr, spa, cap, img, W, Wi, Hi, wi, hi, Sx, Sy, M; 
	var xb = 0, yb = 0, ob =  - 1; 
	////////////////////////////////////////////////////////// 
	var Nx = 4; //size grid x 
	var Ny = 4; //size grid y 
	var Tx = 3; // image width 
	var Ty = 3; // image height 
	var Mg = 10; // margin 
	var SP = 1; // speed 
	////////////////////////////////////////////////////////// 
	var Cobj = function (o, x, y) { 
		this.o = o; 
		this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2)))); 
		this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2)))); 
		this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP; 
		this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP; 
		this.x = x; 
		this.y = y; 
		this.l = 0; 
		this.t = 0; 
		this.w = 0; 
		this.h = 0; 
		this.s = -1; 
		this.spa = spa[o].style; 
		this.img = img[o]; 
		this.txt = img[o].alt; 
		this.img.alt = ""; 
		/* center image */ 
		this.img.center = function () { 
			this.style.left = Math.round( -(this.width - Wi) / 2) + "px"; 
			this.style.top  = Math.round( -(this.height - Hi) / 2) + "px"; 
		} 
		/* events */ 
		this.img.onclick = function () { 
			obj[o].click(); 
		} 
		this.img.onload = function () { 
			this.center(); 
		} 
		/* initial display */ 
		this.zoom(); 
	} 
	/* zooming loop */ 
	Cobj.prototype.zoom = function() { 
		this.f = false; 
		this.l += this.li * this.s; 
		this.t += this.ti * this.s; 
		this.w += wi * this.s; 
		this.h += hi * this.s; 
		if ((this.s > 0 && this.w < Wi) || (this.s < 0 && this.w > Sx)) { 
			/* loop */ 
			var o = this.o; 
			setTimeout(function() { 
				obj[o].zoom(); 
			}, 16); 
		} else { 
			/* finished */ 
			if (this.s > 0) { 
				this.l = this.ix * M + this.ix * Sx; 
				this.t = this.iy * M + this.iy * Sy; 
				this.w = Wi; 
				this.h = Hi; 
			} else { 
				this.l = this.x * M + this.x * Sx; 
				this.t = this.y * M + this.y * Sy; 
				this.w = Sx; 
				this.h = Sy; 
			} 
		} 
		/* html animation */ 
		this.spa.left   = Math.round(this.l) + "px"; 
		this.spa.top    = Math.round(this.t) + "px"; 
		this.spa.width  = Math.round(this.w) + "px"; 
		this.spa.height = Math.round(this.h) + "px"; 
		this.spa.zIndex = Math.round(this.w); 
	} 
 
	Cobj.prototype.click = function() { 
		this.img.center(); 
		/* zooming logic */ 
		if (this.s > 0) { 
			this.s = -1; 
			this.zoom(); 
			cap.innerHTML = this.txt; 
		} else if (this.s < 0) { 
			if (ob >= 0) { 
				obj[ob].s =  - 1; 
				obj[ob].zoom(); 
			} 
			ob = this.o; 
			this.s = 1; 
			this.zoom(); 
			cap.innerHTML = this.txt; 
		} 
	} 
	/* ====== init script ====== */ 
	var init = function () { 
		/* html elements */ 
		scr = document.getElementById("screen"); 
		spa = scr.getElementsByTagName("span"); 
		img = scr.getElementsByTagName("img"); 
		cap = document.getElementById("caption"); 
 
		/* variables */ 
		W = scr.offsetWidth; 
		H = scr.offsetHeight; 
		M = W / 40; 
		Sx = (W - (Nx - 1) * M) / Nx; 
		Sy = (H - (Ny - 1) * M) / Ny; 
		Wi = Tx * Sx + (Tx - 1) * M; 
		Hi = Ty * Sy + (Ty - 1) * M; 
		SP = M * Tx * SP; 
		wi = (Wi - Sx) / SP; 
		hi = (Hi - Sy) / SP; 
 
		/* create objects */ 
		for (var k = 0, i = 0; i < Nx; i++) { 
			for (var j = 0; j < Ny; j++) 
				obj[k] = new Cobj(k++, i, j); 
		} 
	} 
	return { 
		init : init 
	} 
}(); 
 
</script> 
</head> 
 
<body> 
 
 
	<div id="border"></div> 
	<div id="screen"> 
		<span><img src="../images/im6.jpg" alt="one day in <b>early</b> autumn"></span> 
		<span><img src="../images/im2.jpg" alt="detailing the raw <b>material</b>"></span> 
		<span><img src="../images/im3.jpg" alt="Waiting for the right <b>moment</b>"></span> 
		<span><img src="../images/im4.jpg" alt="<b>carefully</b> weight the options"></span> 
		<span><img src="../images/im5.jpg" alt="go <b>ahead</b>, I told myself"></span> 
		<span><img src="../images/im1.jpg" alt="Put <b>faith</b> to work"></span> 
		<span><img src="../images/im7.jpg" alt="<b>rough</b> tension"></span> 
		<span><img src="../images/im18.jpg" alt="mensuration, <b>prior</b> to meditation"></span> 
		<span><img src="../images/im8.jpg" alt="taking a break <b>too</b> long"></span> 
		<span><img src="../images/im10.jpg" alt="open to a <b>deep</b> breath, too"></span> 
		<span><img src="../images/im12.jpg" alt="I fell for <b>you</b>"></span> 
		<span><img src="../images/im17.jpg" alt="Paradise could be <b>beneath</b>"></span> 
		<span><img src="../images/im14.jpg" alt="<b>transmission</b>, essential"></span> 
		<span><img src="../images/im15.jpg" alt="little, hardly any <b>nuance</b>"></span> 
		<span><img src="../images/im16.jpg" alt="ends <b>meet</b> through thick and thin"></span> 
		<span><img src="../images/im9.jpg" alt="I shall <b>resist</b>"></span> 
	</div> 
	<div id="caption">- click - </div> 
 
 
<script type="text/javascript"> 
// starter 
siM.init(); 
</script> 
 
</body> 
</html>

Tagged with: diapo