stippled memories

On April 15, 2006, in demo, by ge1doot Maximize  Maximize Page : PreviousNext


Direct Link

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>stippled memories - Interactive DHTML 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%; 
	} 
	#diapo { 
		position: absolute; 
		left: 0px; 
		top: 10%; 
		width: 100%; 
		height: 80%; 
		background: #000; 
		overflow: hidden; 
	} 
	#slider { 
		position: absolute; 
		width: 100%; 
		height: 80%; 
	} 
	#slider img { 
		border: none; 
		position:absolute; 
		visibility: hidden; 
		filter: alpha(opacity=40); 
		opacity: 0.4; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
	} 
	#button { 
		position: absolute; 
		overflow: hidden; 
	} 
	#legend { 
		position: absolute; 
		font-family: arial, helvetica, verdana, sans-serif; 
		background: #111; 
	} 
	#button span { 
		position:absolute; 
		height: 100%; 
	} 
	#button span:hover { 
		background:#FFF; 
	} 
	.loaded { 
		background: #666; 
		cursor: pointer; 
	} 
	.selected { 
		background: #FFF; 
	} 
	#title { 
		float: left; 
		margin-left: 0.5em; 
		color: #fff; 
	} 
	#txt { 
		float: left; 
		margin-left: 1em; 
		color: #aaa; 
	} 
	#credit { 
		position: absolute; 
		color: #888; 
		font-family: arial; 
		font-size: 0.6em; 
		width:99%; 
		text-align: right; 
		bottom: 2px; 
	} 
	a {text-decoration: none;color:#fff;} 
	a:hover	{text-decoration: none;background:#ff8000;color:#fff;} 
	a:visited {text-decoration: none;color:#fff;} 
	a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;} 
</style> 
 
<script type="text/javascript"> 
/* ================================================================================== 
                          ===== DHTML slide show ===== 
            script by Gerard Ferrandez - ge1doot - April 10th, 2006 
                          http://www.dhteumeuleu.com 
   ================================================================================== */ 
 
id = function(o){return document.getElementById(o);} 
 
position = function(o, css){for(var i in css)o.style[i]=Math.round(css[i])+'px';} 
 
setOpacity = function(o,alpha){ 
	if(o.filters)o.filters.alpha.opacity = alpha*100; 
	else o.style.opacity = alpha; 
} 
 
diapo = { 
	N:0, 
	W:0, 
	H:0, 
	/////////////////// 
	image_ratio:4/3, 
	fsTitle:16, 
	fsText:8, 
	imgMargin:3, 
	butMargin:3, 
	/////////////////// 
	ims:0, 
	imx:[], 
	tit:[], 
	txt:[], 
	thu:0, 
	pos:0, 
	xc:0, 
	xd:0, 
	xm:0, 
	dt:0, 
	xs:0, 
	move:false, 
 
	slide:function(){ 
		with(this){ 
			// ===== scrolling loop ===== 
			xm += xs; 
			xc += (dt*xm*.0025); 
			id("slider").style.left = Math.round(xc)+"px"; 
			if (xm == 20) xs = -1; 
			if (xm) setTimeout("diapo.slide();", 16); 
			else { 
				// ===== enlighten pic ===== 
				for(var i=.5;i<=1;i+=.1)setTimeout("setOpacity(diapo.ims[diapo.pos], "+i+")", 160*i); 
				setTimeout("diapo.move=false", 160); 
			} 
		} 
	}, 
 
	cxd:function(p){ 
		with(this){ 
			// ===== calculates slider position ===== 
			if(W/H>image_ratio){ 
				wi = Math.round(H*(ims[p].width/ims[p].height)); 
				xd = -imx[p]+((W-wi)/2); 
			} else xd = -imx[p]; 
			// ===== display text ===== 
			thu[p].className = "selected"; 
			id("title").innerHTML = tit[p]; 
			id("txt").innerHTML = txt[p]; 
		} 
	}, 
 
	scroll:function(p){ 
		with(this){ 
			if(move){ 
				// ===== already scrolling: queue event ===== 
				setTimeout("diapo.scroll("+p+");", 128); 
			} else { 
				if(thu[p].className == "loaded"){ 
					// ===== start scrolling ===== 
					cxd(p); 
					setOpacity(ims[pos], .4); 
					thu[pos].className = "loaded"; 
					pos = p; 
					dt = xd-xc; 
					xm = 0; 
					xs = 1; 
					move = true; 
    				slide(); 
				} 
			} 
		} 
	}, 
 
	pos_button:function(x,y,w){ 
		with(this){ 
			// ===== button bar & text positioning ===== 
			position(id("button"), {'left':x,'top':y+butMargin,'width':w,'height':H/20}); 
			position(id("legend"), {'left':x,'top':y+(butMargin*2)+H/20,'width':w,'height':H}); 
			position(id("title"), {'fontSize':Math.max(12,H/(250/fsTitle))}); 
			position(id("txt"), {'fontSize':Math.max(6,H/(250/fsText)),'marginTop':.5*H/(250/fsText)}); 
			thu = id("button").getElementsByTagName("span"); 
			for(var i=0;i<N;i++){ 
				var wi = Math.round(w/N)-butMargin; 
				position(thu[i], {'left':(butMargin*.5)+i*(wi+butMargin),'width':wi}); 
				if(ims[i].complete)thu[i].className = (i==pos)?"selected":"loaded"; 
			} 
		} 
	}, 
 
	resize:function(){ 
		with(diapo){ 
			// ===== resize layout ===== 
			W=id("slider").offsetWidth; 
			H=id("slider").offsetHeight; 
			var w=0; 
			var h=0; 
			var x=0; 
			for(var i=0;i<N;i++){ 
				if(ims[i].complete){ 
					w=ims[i].width; 
					h=ims[i].height; 
					ims[i].style.visibility="visible"; 
					setOpacity(ims[i], (i==pos)?1:.4); 
					if(W/H>image_ratio){ 
						// ===== horizontal centering ===== 
						wi = Math.round(H*(w/h)); 
						position(ims[i], {'left':x,'top':0,'width':wi,'height':H}); 
						imx[i] = x; 
						x += wi+imgMargin; 
						if(i==0) pos_button((W-wi)/2,H,wi); 
					} else { 
						// ===== vertical centering ===== 
						hi = Math.round(W/(w/h)); 
						position(ims[i], {'left':x,'top':(H-hi)/2,'width':W,'height':hi}); 
						imx[i] = x; 
						x += W+imgMargin; 
						if(i==0) pos_button(0,hi+(H-hi)/2,W); 
					} 
				} 
				if(xs==0)xc=xd; 
			} 
			// ===== reajust scroll position ===== 
			if(!move){ 
				cxd(pos); 
				position(id("slider"), {'left':xd}); 
			} 
		} 
	}, 
 
	images_load:function(){ 
		with(this){ 
			// ===== loop until all images are loaded ===== 
			var M=0; 
			for(var i=0;i<N;i++) if(ims[i].complete) M++; 
			if(!move && ims[0].complete) resize(); 
			if(M<N || move) setTimeout("diapo.images_load();", 128); 
		} 
	}, 
 
	init:function(){ 
		with(this){ 
			// ===== images source ===== 
			ims = id("slider").getElementsByTagName("img"); 
			N = ims.length; 
			// ===== create buttons ===== 
			for(var i=0;i<N;i++) { 
				o = document.createElement("span"); 
				tit[i] = ims[i].title; 
				txt[i] = ims[i].alt; 
				ims[i].title = ""; 
				ims[i].alt = ""; 
				o.onmousedown = new Function("diapo.scroll("+i+");"); 
				id("button").appendChild(o); 
			} 
			images_load(); 
		} 
	} 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="diapo"> 
	<div id="slider"> 
		<a target="_blank" href="http://www.shiftedreality.com/"><img title="ceramic" alt="<i>I bent over to pick up a small piece of ancient ceramic and ran back to the car.</i>" src="../images/brothers-c.jpg"></a> 
		<img title="window pane" alt="<i>At home, incense sticks that slowly burned here and there comforted me. I stared through my window pane.</i>" src="../images/elbalia-c.jpg"> 
		<img title="I breathed" alt="<i>No one was waiting for me. I breathed deep.</i>" src="../images/alone-c.jpg"> 
		<img title="she knew" alt="<i>My friend mused her worries over the cellphone; she knew I would listen to her.</i>" src="../images/breakthrough-c.jpg"> 
		<img title="far away" alt="<i>We laughed recalling our late trips to the library on fridays. Now all that seemed to be very far away.</i>" src="../images/giants-c.jpg"> 
		<img title="Time" alt="<i>Time was running too fast.</i>" src="../images/simosha-c.jpg"> 
		<img title="away" alt="<i>I told her how I had felt his gaze on me, then a shudder while turning my head away.</i>" src="../images/may-c.jpg"> 
		<img title="more" alt="<i>She seemed to be more relieved than I was.</i>" src="../images/caleth-c.jpg"> 
		<img title="neighbour" alt="<i>A far-off clanking noise, likely a neighbour's work in progress.</i>" src="../images/sunrise_on_etarelith-c.jpg"> 
		<img title="up late" alt="<i>I woke up late into the morning.</i>" src="../images/2mountains-c.jpg"> 
		<img title="believed" alt="<i>We learned that the old farm had burned to ashes. Peasants believed that the Elf Woman kept living in the area.</i>" src="../images/winter-c.jpg"> 
		<img title="never" alt="<i>We planned our getaway, aware that we would never make it.</i>" src="../images/tribute-c.jpg"> 
	</div> 
	<div id="button"></div> 
	<div id="legend"> 
		<span id="title"></span> 
		<span id="txt"></span> 
	</div> 
</div> 
<div id="credit">CG Images by Juergen Eilts: <a href="http://www.shiftedreality.com">www.shiftedreality.com</a><br>Text by Pola</div> 
 
<script type="text/javascript"> 
// ===== start script while loading images ===== 
function dom_onload() { 
	if(id("slider")) diapo.init(); else setTimeout("dom_onload();", 128); 
} 
dom_onload(); 
// ===== window resize event ===== 
onresize = diapo.resize; 
// ================================================ 
</script> 
 
</body> 
</html>

Tagged with:
 
5 Comments
Digg Delicious StumbleUpon Digg

Feed updates subscription

Enter your email address:

Delivered by FeedBurner

Donate

Want to give me some extra encouragement ?

License

Creative Commons License

Except where otherwise noted, all Javascript code on this site is licensed under a Creative Commons License.