dhteumeuleu » I panicked

I panicked

On November 15, 2005, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/zoom-F.html
Updated: January 2010 – optimized code

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>I panicked - 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"> 
	body { 
		background: #111; 
		margin: 0; 
		padding: 0; 
	} 
	#screen { 
		position:absolute; 
		left: 50%; 
		top: 50%; 
		margin-left:-200px; 
		margin-top:-150px; 
		width:400px; 
		height:300px; 
		overflow:hidden; 
		outline: #000 solid 30px; 
		background:#000; 
	} 
	#screen img { 
		position: absolute; 
		visibility: hidden; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
	} 
	#images { 
		visibility: hidden; 
	} 
</style> 
 
<script type="text/javascript"> 
// =============================================================== 
// script written by Gerard Ferrandez - Ge-1-doot - October 2005 
// updated: January 2010 
// http://www.dhteumeuleu.com 
// =============================================================== 
// 
var Oz; 
var obj = []; 
var K = 0; 
var img, scr, W, H; 
var SP = 40; /* speed */ 
var dz = false; 
 
/* create object instances */ 
function Cobj(parent, N, x, y, w, h) { 
	this.zoomed = (parent ? 0 : 1); 
	obj[K] = this; 
	this.K = K ++; 
	this.parent = parent; 
	this.children = []; 
	this.x = x; 
	this.y = y; 
	this.w = w; 
	this.h = h; 
	this.vx = 0; 
	this.vy = 0; 
	this.vw = 0; 
	this.vh = 0; 
	this.xi = 0; 
	this.yi = 0; 
	this.wi = 0; 
	this.hi = 0; 
	this.x1 = 0; 
	this.y1 = 0; 
	this.w1 = 0; 
	this.h1 = 0; 
	this.x0 = 0; 
	this.y0 = 0; 
	this.w0 = 0; 
	this.h0 = 0; 
	this.imgsrc = img[N]; 
	/* create HTML elements */ 
	this.img = document.createElement("img"); 
	this.img.src = this.imgsrc.src; 
	this.img.obj = this; 
	scr.appendChild(this.img); 
	if (parent) parent.children.push(this); 
	/* mouse click */ 
	this.img.onclick = function() { 
		this.style.outline=""; 
		this.obj.click(); 
		return false; 
	} 
} 
/* Flickr */ 
Cobj.prototype.blink = function() { 
	this.img.style.cursor = "pointer"; 
	this.img.style.outline = "#FF0000 solid 4px"; 
} 
 
/* html positioning */ 
Cobj.prototype.position = function() { 
	var css    = this.img.style; 
	css.left   = Math.round(this.xi) + "px"; 
	css.top    = Math.round(this.yi) + "px"; 
	css.width  = Math.round(this.wi) + "px"; 
	css.height = Math.round(this.hi) + "px"; 
} 
/* display image & children */ 
Cobj.prototype.display = function(zoomed) { 
	this.xi = this.x0; 
	this.yi = this.y0; 
	this.wi = this.w0; 
	this.hi = this.h0; 
	this.position(); 
	this.img.style.visibility = "visible"; 
	if (this.parent &&  !zoomed) this.blink(); 
} 
 
/* init zoom */ 
Cobj.prototype.init_zoom = function(d) { 
	var that = this.parent; 
	this.w1 = this.imgsrc.width; 
	this.h1 = this.imgsrc.height; 
	this.x1 = (W - this.w1) / 2; 
	this.y1 = (H - this.h1) / 2; 
	this.x0 = (that ? this.x + that.x1 : (W - this.w1) / 2); 
	this.y0 = (that ? this.y + that.y1 : (H - this.h1) / 2); 
	this.w0 = (that ? this.w : this.w1); 
	this.h0 = (that ? this.h : this.h1); 
	this.xi = d > 0 ? this.x0 : this.x1; 
	this.yi = d > 0 ? this.y0 : this.y1; 
	this.wi = d > 0 ? this.w0 : this.w1; 
	this.hi = d > 0 ? this.h0 : this.h1; 
	this.vx = d * (this.x1 - this.x0) / SP; 
	this.vy = d * (this.y1 - this.y0) / SP; 
	this.vw = d * (this.w1 - this.w0) / SP; 
	this.vh = d * (this.h1 - this.h0) / SP; 
	that.vx = d * ((this.x1 - (this.x * this.w1 / this.w0)) - that.x1) / SP; 
	that.vy = d * ((this.y1 - (this.y * this.h1 / this.h0)) - that.y1) / SP; 
	that.vw = this.vw * (this.parent ? (that.w1 / this.w) : 0); 
	that.vh = this.vh * (this.parent ? (that.h1 / this.h) : 0); 
} 
 
/* animate zoom in - out */ 
Cobj.prototype.zoom = function() { 
	/* closure for setTimeout */ 
	var o = this; 
	var zoom = function() { 
		o.zoom(); 
	} 
	/* inc zoom */ 
	var that = this.parent; 
	this.xi += this.vx; 
	this.yi += this.vy; 
	this.wi += this.vw; 
	this.hi += this.vh; 
	that.xi += that.vx; 
	that.yi += that.vy; 
	that.wi += that.vw; 
	that.hi += that.vh; 
	/* HTML rendering */ 
	this.position(); 
	that.position(); 
	/* loop or stop */ 
	if ((this.zoomed === 0 && this.wi > this.w0 - this.vw) || (this.zoomed === 1 && this.wi < this.w1 - this.vw)) { 
		setTimeout(zoom, 16); 
	} else { 
		dz = false; 
		var i = 0, o; 
		while (o = Oz.children[i++]) { 
			o.init_zoom(); 
			o.display(false); 
		} 
	} 
} 
 
/* start zoom */ 
Cobj.prototype.click = function() { 
	if (this.parent && !dz && this.imgsrc.complete) { 
		if (this.zoomed == 1) { 
			/* zoom out */ 
			Oz = this.parent; 
			this.zoomed = 0; 
			this.init_zoom( -1); 
			var i = 0, o; 
			while (o = this.children[i++]) o.img.style.visibility = "hidden"; 
			this.parent.zoomed = 1; 
			dz = true; 
			this.zoom(); 
		} else if (this.zoomed == 0) { 
			/* zoom in */ 
			Oz = this; 
			this.img.style.cursor = "crosshair"; 
			this.zoomed = 1; 
			this.init_zoom(1); 
			var i = 0, o; 
			while (o = this.parent.children[i++]) { 
				if (this != o) 
					o.img.style.visibility = "hidden"; 
			} 
			this.parent.zoomed =  -1; 
			dz = true; 
			this.zoom(); 
		} 
	} 
} 
/* initialization */ 
/* must start after the first image is loaded */ 
function starter() { 
	scr = document.getElementById("screen"); 
	img = document.getElementById("images").getElementsByTagName("img"); 
	W = scr.offsetWidth; 
	H = scr.offsetHeight; 
 
	/* ==== tree-zoom ==== */ 
	//  new Cobj(parent, image, x, y, w, h) 
	O = new Cobj(0, 0, 0, 0, 0, 0); 
		O0 = new Cobj(O, 1, 127, 98, 181, 134); 
			O1 = new Cobj(O0, 2, 158, 150, 85, 155); 
				O11 = new Cobj(O1, 4, 136, 98, 80, 196); 
					O111 = new Cobj(O11, 5, 20, 154, 70, 57); 
						O1111 = new Cobj(O111, 6, 161, 137, 154, 76); 
					O112 = new Cobj(O11, 11, 155, 154, 70, 57); 
						O1121 = new Cobj(O112, 12, 273, 116, 49, 72); 
			O2 = new Cobj(O0, 3, 281, 150, 90, 154); 
				O21 = new Cobj(O2, 7, 35, 295, 133, 82); 
					O211 = new Cobj(O21, 15, 316, 183, 20, 36); 
				O22 = new Cobj(O2, 8, 179, 295, 127, 79); 
					O221 = new Cobj(O22, 13, 132, 84, 54, 102); 
						O2211 = new Cobj(O221, 14, 6, 234, 69, 50); 
							O22111 = new Cobj(O2211, 14, 267, 90, 135, 98); 
				O23 = new Cobj(O2, 9, 92, 148, 138, 76); 
					O231 = new Cobj(O23, 10, 249, 106, 83, 65); 
						O2311 = new Cobj(O231, 0, 120, 87, 57, 59); 
 
	/* display */ 
	O.init_zoom(1); 
	O.display(true); 
	var i = 0, o; 
	while (o = O.children[i++]) { 
		o.init_zoom(1); 
		o.blink(); 
		o.display(true); 
	} 
} 
</script> 
</head> 
 
<body> 
 
	<div id="screen"></div> 
 
	<div id="images"> 
		<img onload="setTimeout('starter();',500)" src="../images/wi37.jpg"> 
		<img src="../images/wi2.jpg"> 
		<img src="../images/wi7.jpg"> 
		<img src="../images/wi20.jpg"> 
		<img src="../images/wi3.jpg"> 
		<img src="../images/wi10.jpg"> 
		<img src="../images/wi30.jpg"> 
		<img src="../images/wi11.jpg"> 
		<img src="../images/wi21.jpg"> 
		<img src="../images/wi29.jpg"> 
		<img src="../images/wi19.jpg"> 
		<img src="../images/wi27.jpg"> 
		<img src="../images/wi33.jpg"> 
		<img src="../images/wi35.jpg"> 
		<img src="../images/wi42.jpg"> 
		<img src="../images/wi15.jpg"> 
	</div> 
 
</body> 
</html>

Tagged with: fractal • zoom