dhteumeuleu » not in vein

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/imgPress-X.html
Updated: Jan 23, 2010 – namespaced – possibility to support different images proportions

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>imgPress - 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: #fff; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		filter: alpha(opacity=100); 
	} 
	#box { 
		position: absolute; 
		background: #222; 
		border: gray solid 1px; 
		visibility: hidden; 
	} 
	#screen { 
		position: absolute; 
		left: 0px; 
		width: 100%; 
		top: 10%; 
		height: 80%; 
		background: #000; 
		border: gray solid 1px; 
	} 
	#box img  { 
		position: absolute; 
		border: gray solid 1px; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
		visibility: hidden; 
		background: #000; 
	} 
	#box span { 
		position: absolute; 
		color: #ccc; 
		font-family: verdana; 
		font-size: 12px; 
		width: 200px; 
	} 
	#box a { 
		text-decoration: none; 
		color:#ff8000; 
	} 
	#box a:hover	{ 
		text-decoration: none; 
		background:#ff8000; 
		color:#ffffff; 
	} 
	#box a:visited { 
		text-decoration: none; 
		color:#ff8000; 
	} 
	#box a:visited:hover { 
		text-decoration: none; 
		background:#ff8000; 
		color:#ffffff; 
	} 
	#lnk, #txt, #tit{ 
		visibility: hidden; 
	} 
</style> 
<script type="text/javascript"> 
// ==================================================== 
// script: Gerard Ferrandez - Ge-1-doot - JANUARY 2005 
// http://www.dhteumeuleu.com/ 
// Updated - January 23, 2010 
// ==================================================== 
 
var imP = function () { 
	/* ---- private vars ---- */ 
	var O = [], 
	    scr, 
	    box, 
	    img, 
	    txt, 
	    tit, 
	    W = 0, 
	    H = 0, 
	    nI = 0, 
	    sel = 0, 
	    si  = 0, 
	    ZOOM = 0, 
	    speed = .06, // animation speed 
	    delay = .5; // 1 = no delay 
 
	var dText = function() { 
		txt.style.textAlign = tit.style.textAlign = (sel<nI/2) ? "left" : "right"; 
		txt.innerHTML = O[sel].tx; 
		tit.innerHTML = O[sel].ti; 
	} 
 
	var CObj = function (n, s, x, tx, ti) { 
		this.n     = n; 
		this.dim   = s; 
		this.tx    = tx; 
		this.ti    = ti; 
		this.is    = img[n]; 
		this.iss   = this.is.style; 
		this.vz    = 0; 
		this.sx    = 0; 
		this.x0    = x; 
		this.x1    = 0; 
		this.zo    = 0; 
		this.rImg  = 1; 
		this.loaded = false; 
	} 
 
	CObj.prototype.over = function() { 
		if(this.n != sel){ 
			O[sel].dim = 100 / O[sel].rImg; 
			O[this.n].dim = ZOOM * 100; 
			sel = this.n; 
			cLeft(); 
			txt.innerHTML = tit.innerHTML = ""; 
			setTimeout(dText, 32); 
		} 
	} 
 
	CObj.prototype.anim = function () { 
		if (this.loaded) { 
			this.vz  = speed * (this.vz + (this.x1 - this.sx) * delay); 
			this.x1 -= this.vz; 
			this.sx  = (this.n === 0) ? 0 : O[this.n - 1].x0 + O[this.n - 1].dim; 
			this.zo -= (this.zo - (this.dim * this.rImg)) * speed; 
			var l    = (this.x1 * si) + 6 * (this.n + 1); 
			var w    = this.zo * si; 
			this.iss.left   = Math.round(l) + 'px'; 
			this.iss.top    = Math.round((H - w) * .5) + 'px'; 
			this.iss.width  = Math.round(w / this.rImg) + 'px'; 
			this.iss.height = Math.round(w) + 'px'; 
			if(sel === this.n){ 
				if(sel < nI * .5) { 
					tit.style.left = txt.style.left = Math.round(l + w / this.rImg + 6) + 'px'; 
				} else { 
					tit.style.left = txt.style.left = Math.round(l - (nx * .25) - 6) + 'px'; 
				} 
				txt.style.top = Math.round(-(w * this.rImg) * .15) + 'px'; 
				tit.style.top = Math.round((w * this.rImg) * .2) + 'px'; 
			} 
		} else { 
			if (this.is.complete) { 
				if (this.is.width) { 
					this.loaded = true; 
					this.rImg = this.is.height / this.is.width; 
					this.dim = (sel === this.n) ? ZOOM * 100 : 100 / this.rImg; 
					resize(); 
					this.iss.width = "0px"; 
					this.iss.visibility = "visible"; 
					if (this.n == 0 ) { 
						txt.style.visibility = "visible"; 
						tit.style.visibility = "visible"; 
					} 
				} 
			} 
		} 
	} 
 
	var cLeft = function() { 
		var l = 0; 
		for(var k = 0; k < nI; k++){ 
			var o = O[k]; 
			o.x0 = l; 
			l += o.dim; 
		} 
		return l; 
	} 
 
	var resize = function (){ 
		nx = scr.offsetWidth; 
		ny = scr.offsetHeight; 
		W  =  nx * 90 / 100; 
		var l = cLeft(); 
		si = (W - ((nI + 1) * 6)) / l; 
		H  = 100 * si + 14; 
		tit.style.width = Math.round(nx * .25) + 'px'; 
		txt.style.width = Math.round(nx * .25) + 'px'; 
		tit.style.fontSize = (nx / 30) + 'px'; 
		txt.style.fontSize = (nx / 70) + 'px'; 
		box.style.width  = Math.round(W) + 'px'; 
		box.style.height = Math.round(H) + 'px'; 
		box.style.left   = Math.round(nx / 2 - W / 2) + 'px'; 
		box.style.top    = Math.round(ny / 2 - H / 2) + 'px'; 
	} 
 
	//////////////////////////////////////////////////////////////////////////// 
	var init = function () { 
		scr = document.getElementById("screen"); 
		scr.onselectstart = new Function("return false"); 
		box = document.getElementById("box"); 
		tit = document.getElementById("tit"); 
		txt = document.getElementById("txt"); 
		img = box.getElementsByTagName("img"); 
		nI  = img.length; 
		ZOOM = nI; 
		var s = ZOOM * 100; 
		var x = 0; 
		for(var i=0; i<nI; i++) { 
			var tx = img[i].alt; 
			var ti = img[i].title; 
			var o = document.getElementById(ti) || false; 
			if (o) { 
				/* ==== hyperlink ==== */ 
				img[i].style.cursor = 'pointer'; 
				tx += '<br><a target="'+o.target+'" href="'+o.href+'">'+o.innerHTML+'</a>'; 
				img[i].onclick = new Function('window.open("'+o.href+'","'+o.target+'");'); 
			} 
			O[i] = new CObj(i, s, x, tx, ti); 
			img[i].alt = ""; 
			img[i].title = ""; 
			img[i].onmousedown = function() { return false; } 
			img[i].parent = O[i]; 
			img[i].onmouseover = function() { this.parent.over(); } 
			x += s; 
			s = 100; 
		} 
		tit.innerHTML = O[0].ti; 
		txt.innerHTML = O[0].tx; 
		resize(); 
		onresize = resize; 
		box.style.visibility = "visible"; 
		setInterval(function() { 
			for(var j in O) O[j].anim(); 
		}, 16); 
	} 
	//////////////////////////////////////////////////////////////////////////// 
	return { 
		init : init 
	} 
}(); 
 
</script> 
</head> 
<body> 
<div id="screen"> 
	<div id="box""> 
		<img src="../images/newborn.jpg" title="explain" alt="They explained a little about what they were doing."> 
		<img src="../images/majesty.jpg" title="strain" alt="I hoped I wouldn´t crack under the strain."> 
		<img src="../images/whitemagic.jpg" title="retain" alt="Clearly they were ready to do almost anything to retain their position."> 
		<img src="../images/gazebo2k3.jpg" title="mundane" alt="I observed the face of power at its most mundane."> 
		<img src="../images/pyre.jpg" title="inhumane" alt="But they couldn´t hide the very worst of their inhumane undertakings from the people."> 
		<img src="../images/singularity.jpg" title="disdain" alt="They showed their utter, complete disdain for justice."> 
		<img src="../images/spellcraft.jpg" title="never again" alt="Never more. Never again."> 
		<span id="txt"></span> 
		<span id="tit"></span> 
		<span id="lnk"> 
			<a id="explain" target="_blank" href="http://www.dhteumeuleu.com/">www.dhteumeuleu.com</a> 
		</span> 
	</div> 
</div> 
 
<script type="text/javascript"> 
/* ==== start script ==== */ 
setTimeout(imP.init, 256); 
</script> 
 
</body> 
</html>

Abu says:

April 8, 2010 at 1:30 pm

I am feeling neutral

Very nice work Gerard . My own website is built with many of your source code and I have done some enhancement to some of them. Thanks for sharing.

Tanja says:

April 21, 2010 at 4:06 pm

I am feeling positive

Your galery work is great. Thanks for making the code available. My website is not online, yet. Anyway I used your wonderful galery. It’s a pity that it doesn’t work with IE.

Personel Servisi says:

May 5, 2010 at 9:46 am

Your galery work is great.

Comment marked as

read by ge1doot

Z says:

June 19, 2010 at 11:31 pm

fantastic work and I’m trying to work out the maths behind it all as some images scale larger than others and a landscape one won’t scale large enough. Is it quick and easy to specify the height for all images to resize to and regardless of the browser window size?

Elizabeth says:

July 3, 2010 at 8:39 pm

I was looking for a gallery to display just a few images of plant cultivar flowers. This one is ideal! Thank you so much. I’ll be studying your code intensely. Thank you for generously supplying a valuable learning tool.