dhteumeuleu » a travel

a travel

On July 1, 2005, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/slideshow-img.html
Latest revision: January 10, 2010
- fixed Google Chrome perf. issue
- rewrote slider code
- fixed images loading logic

Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title> - 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%; 
		cursor: crosshair; 
	} 
	#screen { 
		position: absolute; 
		left: 0%; 
		top: 0%; 
		width: 100%; 
		height: 100%; 
		background: #000; 
		overflow: hidden; 
	} 
	#banner { 
		position: absolute; 
		height: 20%; 
		width: 100%; 
		overflow: hidden; 
	} 
	#rLinkTitle { 
		position: absolute; 
		color: #FFF; 
		font-family: verdana; 
		left: 1%; 
		top: 22%; 
		width: 34%; 
		height: 6%; 
		overflow: hidden; 
		background: #222; 
	} 
	#rLinkCaption { 
		position: absolute; 
		color: #FFF; 
		font-family: verdana; 
		left: 36%; 
		top: 22%; 
		width: 63%; 
		height: 6%; 
		overflow: hidden; 
		background: #222; 
	} 
	#rLinkScreen { 
		position: absolute; 
		top: 29%; 
		height: 70%; 
		left: -10000px; 
		overflow: hidden; 
	} 
	#rLinkZoom { 
		position: absolute; 
		cursor: crosshair; 
		-ms-interpolation-mode: nearest-neighbor; 
	} 
	#banner img { 
		position: absolute; 
		background: #444; 
		top: -2000px; 
		-ms-interpolation-mode: nearest-neighbor; 
		cursor: pointer; 
		border: #000 solid; 
	} 
</style> 
 
<script type="text/javascript"> 
// ========================================================================= 
//                 ===== slide show dhtml ===== 
// script: Gerard Ferrandez - June 2005 
// last update: January 10, 2010 
// http://www.dhteumeuleu.com 
// 3D Terragen pics: Silus - http://silusatrium.no.sapo.pt/galleries01.html 
// ========================================================================= 
 
var xm = -100; 
var ym = 0; 
var nx = 0; 
var ny = 0; 
var nw = 0; 
var nh = 0; 
 
function resize() 
{ 
	var o = document.getElementById("screen"); 
	nx = o.offsetLeft; 
	ny = o.offsetTop; 
	nw = o.offsetWidth; 
	nh = o.offsetHeight; 
	ssi.resize(); 
} 
onresize = resize; 
 
document.onmousemove = function(e) 
{ 
	if (window.event) e = window.event; 
	xm = (e.x || e.clientX) - nw * .5 - nx; 
	ym = (e.y || e.clientY) - nh * .5 - ny; 
} 
 
var ssi = { 
	dx  : 0, 
	x0  : 0, 
	y0  : 0, 
	iz  : false, 
	iL  : -1, 
	rL  : 0, 
	N   : 0, 
	ov  : -1, 
	NW  : 0, 
	nxi : 0, 
	nyi : 0, 
	nxo : 0, 
	nyo : 0, 
	nho : 0, 
	imgWidth  : 0, 
	imgHeight : 0, 
	borWidth  : 0, 
	loaded    : false, 
 
	iZoom : function () 
	{ 
		if(!ssi.iz) 
		{ 
			ssi.rlz.width  = Math.round(ssi.nxi) + 'px'; 
			ssi.rlz.height = Math.round(ssi.nyi) + 'px'; 
			ssi.iz = true; 
			ssi.iResize(); 
			ssi.scroll(); 
		} 
		else 
		{ 
			ssi.iz = false; 
			ssi.iResize(); 
		} 
	}, 
 
	slide : function () 
	{ 
		if(!ssi.iz && ssi.loaded) 
		{ 
			ssi.dx -= xm * .02; 
			var p = ssi.dx % ssi.NW; 
			for(var i = 0; i < ssi.N; i++) 
			{ 
				var img = ssi.img[i]; 
				var w = p + i * Math.round(img.w0 + ( 2 * ssi.borWidth)); 
				if (w < - img.w0) w += ssi.NW; 
				else if (w + img.w0 > ssi.NW - img.w0) w -= ssi.NW; 
				img.style.left = Math.round(w) + 'px'; 
			} 
		} 
		setTimeout(ssi.slide, 16); 
	}, 
 
	scroll : function () 
	{ 
		if(ssi.iz) 
		{ 
			ssi.xmo = Math.min(ssi.nwo, Math.max(0, ((-ssi.nxo + xm + nw * .5)))); 
			ssi.ymo = Math.min(ssi.nho, Math.max(0, ((-ssi.nyo + ym + nh * .5)))); 
			var x   = -ssi.xmo * (ssi.nxi / ssi.nwo) + ssi.xmo; 
			var y   = -ssi.ymo * (ssi.nyi / ssi.nho) + ssi.ymo; 
			ssi.x0 += ((ssi.x0 > x) ? -1 : 1) * Math.abs(ssi.x0 - x) * .1; 
			ssi.y0 += ((ssi.y0 > y) ? -1 : 1) * Math.abs(ssi.y0 - y) * .1; 
			ssi.rlz.left = Math.round(ssi.x0) + 'px'; 
			ssi.rlz.top  = Math.round(ssi.y0) + 'px'; 
			setTimeout(ssi.scroll, 16); 
		} 
	}, 
 
	iResize : function () 
	{ 
		if(ssi.iz) 
		{ 
			ssi.nwo = Math.min(ssi.nxi, Math.round(98 * nw / 100)); 
			ssi.nxo = Math.round((nw - ssi.nwo) / 2); 
		} 
		else 
		{ 
			ssi.nho = ssi.rls.offsetHeight; 
			ssi.nyo = ssi.rls.offsetTop; 
			ssi.nwo = Math.round((ssi.nxi / ssi.nyi) * ssi.nho); 
			ssi.nxo = Math.round((nw - ssi.nwo) / 2); 
		} 
		if(ssi.nwo) 
		{ 
			ssi.rls.style.width = Math.round(ssi.nwo) + 'px'; 
			ssi.rls.style.left  = Math.round(ssi.nxo) + 'px'; 
		} 
	}, 
 
	disp : function (i) 
	{ 
		if (i != ssi.iL) { 
			var img = ssi.img[i]; 
			if (ssi.iL >= 0) ssi.img[ssi.iL].style.borderColor = "#000"; 
			img.style.borderColor = "#FFF"; 
			ssi.iL = i; 
			if(ssi.iz) ssi.iZoom(); 
			document.getElementById("rLinkTitle").innerHTML = img.t; 
			document.getElementById("rLinkCaption").innerHTML = img.a; 
			document.getElementById("rLinkZoom").src = img.src; 
			ssi.nxi = img.w; 
			ssi.nyi = img.h; 
			ssi.iResize(); 
		} 
	}, 
 
	init : function () 
	{ 
		for(var i = 0; i < ssi.N; i++) 
		{ 
			var o = ssi.img[i]; 
			o.className = "thumbOut"; 
			o.onmousedown = function () { return false; } 
			o.onclick = function () { ssi.iZoom(); } 
			o.i = i; 
			o.onmouseover = function() 
			{ 
				ssi.ov = this.i; 
				ssi.disp(ssi.ov); 
			} 
		} 
	}, 
 
	oResize : function () 
	{ 
		ssi.NW = 0; 
		for(var i = 0; i < ssi.N; i++) 
		{ 
			var img = ssi.img[i]; 
			if(img && img.loaded) 
			{ 
				img.w0 = (img.w / img.h) * ssi.imgHeight; 
				img.style.left = Math.round(ssi.NW) + 'px'; 
				img.style.top    = '0px'; 
				img.style.width  = Math.round(img.w0) + 'px'; 
				img.style.height = Math.round(ssi.imgHeight) + 'px'; 
				img.style.borderWidth = Math.round(ssi.borWidth) + 'px'; 
				ssi.NW += img.w0 + ( 2 * ssi.borWidth); 
			} 
		} 
	}, 
 
	resize : function () 
	{ 
		ssi.borWidth = Math.round(1.4 * nh / 100); 
		ssi.imgHeight = document.getElementById("banner").offsetHeight - (2 * ssi.borWidth); 
		ssi.oResize(); 
		ssi.iResize(); 
		ssi.NW = Math.round(ssi.NW); 
		if(!ssi.loaded) ssi.NW = nw; 
		document.getElementById("rLinkTitle").style.fontSize   = Math.round(4.5 * nh / 100) + 'px'; 
		document.getElementById("rLinkCaption").style.fontSize = Math.round(2.5 * nh / 100) + 'px'; 
	}, 
 
	run : function () 
	{ 
		ssi.init(); 
		resize(); 
		ssi.slide(); 
		ssi.images_load(); 
	}, 
	load : function () 
	{ 
		ssi.rls = document.getElementById("rLinkScreen"); 
		ssi.img = document.getElementById("banner").getElementsByTagName("img"); 
		ssi.rlz = document.getElementById("rLinkZoom").style; 
		ssi.N   = ssi.img.length; 
		ssi.run(); 
	}, 
	images_load : function () 
	{ 
		var M = 0; 
		for (var i = 0; i < ssi.N; i++) 
		{ 
			var img = ssi.img[i]; 
			if (img.complete) 
			{ 
				M++; 
				if (!img.loaded && img.width) 
				{ 
					img.w = img.width; 
					img.h = img.height; 
					img.t = img.title; 
					img.a = img.alt; 
					img.alt = img.title = ""; 
					img.loaded = true; 
					resize(); 
					if (i == 0 && ssi.ov == -1) ssi.img[0].onmouseover(); 
				} 
			} 
		} 
		if (M < ssi.N) 
			setTimeout(ssi.images_load, 128); 
		else 
		{ 
			ssi.loaded = true; 
			resize(); 
		} 
	} 
} 
 
</script> 
</head> 
 
<body> 
<!-- layout --> 
<div id="screen"> 
	<div id="banner"> 
		<img title="red sea" alt="Oxymoron: an organized adventure travel." src="../images/redsea.jpg"> 
		<img title="secrets of the past" alt="We are family now." src="../images/secretsofthepast.jpg"> 
		<img title="jagged peaks" alt="We shall never forget that summer." src="../images/jaggedpeaks.jpg"> 
		<img title="twin gate keepers" alt="Adrenaline galore ..." src="../images/twingatekeepers.jpg"> 
		<img title="King Tut's Backyard" alt="There was actual danger." src="../images/kingtutsbackyard.jpg"> 
		<img title="dead volcano" alt="Reality took over." src="../images/deadvolcano.jpg"> 
		<img title="children of the sea" alt="You know, we were too young, all that." src="../images/childrenofthesea.jpg"> 
		<img title="glim passage" alt="But we were not conscious of it." src="../images/glimpassage.jpg"> 
		<img title="sea canyon" alt="An initiatic trip, though." src="../images/seacanyon.jpg"> 
	</div> 
	<div id="rLinkTitle" style=""></div> 
	<div id="rLinkCaption"></div> 
	<div id="rLinkScreen"> 
		<img id="rLinkZoom" alt="" src="o" onmouseover="if(!ssi.iz)ssi.iZoom();" onclick="ssi.iZoom();"> 
	</div> 
</div> 
 
 
<script type="text/javascript"> 
// ======= start script ====== 
ssi.load(); 
</script> 
 
</body> 
</html>

Tagged with: diapo