Tema: Modificar un poco este script
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/11/2005, 05:58
gelon
 
Fecha de Ingreso: marzo-2005
Mensajes: 47
Antigüedad: 19 años, 2 meses
Puntos: 0
Pregunta Modificar un poco este script
http://www.premiumwanadoo.com/dhteum...eshow-img.html

Código: 
<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">
	body {
		background: #000;
		margin: 0;
		padding: 0;
		position: absolute;
		overflow: hidden;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.thumbOut  {border:#000 solid;}
	.thumbOver {border:#FFF solid;cursor:pointer;}

</style>

<script type="text/javascript"><!--
// =========================================================================
//                 ===== slide show dhtml =====
// script: Gerard Ferrandez - June 2005
// http://www.dhteumeuleu.com
// 3D Terragen pics: Silus - http://silusatrium.no.sapo.pt/galleries01.html
// =========================================================================

var xm=-100,ym=0,nx=0,ny=0,dx=0,x0=0,y0=0,iz=false,iL=0;
var N,b0,b1,NW,ims,img,imgWidth,imgHeight,borWidth,nxi,nyi,nxo=0,nyo,nho,nxo=0;

el=function(o){	return document.getElementById(o); }

function iZoom(){
	if(!iz){
		with(el("rLinkZoom").style){
			width  = nxi;
			height = nyi;
		}
		iz = true;
		iResize();
		scroll();
	} else {
		iz = false;
		iResize();
		with(el("rLinkZoom").style){
			height = "100%";
			width  = "100%";
			left   = 0;
			top    = 0;
		}
	}
}

function slide(){
	if(!iz){
		dx-=xm/70;
		if(dx>0)dx-=NW; else if(dx<-NW)dx+=NW;
		b0.style.left = Math.round(dx);
		b1.style.left = Math.round(dx+NW);
	}
	setTimeout("slide()",16);
}

function scroll(){
	if(iz){
		xmo = Math.min(nwo,Math.max(0,((-nxo+xm+nx))));
		ymo = Math.min(nho,Math.max(0,((-nyo+ym+ny))));
		x = -xmo*(nxi/nwo)+xmo;
		y = -ymo*(nyi/nho)+ymo;
		x0 += ((x0>x)?-1:1)*Math.abs(x0-x)/10;
		y0 += ((y0>y)?-1:1)*Math.abs(y0-y)/10;
		with(el("rLinkZoom").style){
			left = x0;
			top  = y0;
		}
		setTimeout("scroll()",16);
	}
}

function iResize(){
	if(iz){
		nwo = Math.min(nxi,Math.round(98*nx/50));
		nxo = Math.round(((2*nx)-nwo)/2);
	} else {
		nho = Math.round(parseInt(el("rLinkScreen").style.height)*ny/50);
		nyo = Math.round(parseInt(el("rLinkScreen").style.top)*ny/50);
		nwo = Math.round((nxi/nyi)*nho);
		nxo = Math.round((2*nx-nwo)/2);
	}
	with(el("rLinkScreen").style){
		width = nwo;
		left = nxo;
	}
}

function iBorder(o,i){
	o=o.getElementsByTagName("img");
	o[iL].className="thumbOut";
	o[i].className="thumbOver";
}

function disp(i,title,caption){
	iBorder(b0,i);
	iBorder(b1,i);
	iL=i;
	if(iz)iZoom();
	el("rLinkTitle").innerHTML = title;
	el("rLinkCaption").innerHTML = caption;
	el("rLinkZoom").src = img[i].src;
	nxi = ims[i].width;
	nyi = ims[i].height;
	iResize();
}

function init(obj){
	obj.innerHTML = el("source").innerHTML;
	img = obj.getElementsByTagName("img");
	for(i=0;i<N;i++){
		img[i].className = "thumbOut";
		img[i].style.position = "absolute";
		img[i].style.background = "#444";
		img[i].style.top = 0;
		img[i].onmousedown = new Function("return false;");
		img[i].onclick = new Function("iZoom();");
		img[i].onmouseover = new Function('disp('+i+',"'+img[i].title+'","'+img[i].alt+'");');
		img[i].alt   = "";
		img[i].title = "";
	}
}

function oResize(obj){
	img = obj.getElementsByTagName("img");
	NW = 0;
	for(i=0;i<N;i++){
		w = (ims[i].width/ims[i].height)*imgHeight;
		img[i].style.left = NW;
		NW += w+(2*borWidth);
		img[i].style.width  = Math.max(1,w);
		img[i].style.height = Math.max(1,imgHeight);
		img[i].style.borderWidth   = Math.max(1,borWidth);
	}
}

function resize(){
	nx = document.body.offsetWidth /2;
	ny = document.body.offsetHeight /2;
	borWidth = Math.round(1.4*ny/50);
	imgHeight = Math.round((parseInt(el("banner").style.height)*ny/50) - (2*borWidth));
	oResize(b0);
	oResize(b1);
	iResize();
	NW = Math.round(NW);
	el("rLinkTitle").style.fontSize = Math.round(4*ny/50)+"px";
	el("rLinkCaption").style.fontSize = Math.round(2*ny/50)+"px";
}
onresize = resize;

document.onmousemove = function(e) {
	if (window.event) e = window.event;
	xm = (e.x || e.clientX)-nx;
	ym = (e.y || e.clientY)-ny;
}

function run() {
	o = el("banner").getElementsByTagName("span");
	b0 = o[0];
	b1 = o[1];
	init(b0);
	init(b1);
	img[0].onmouseover();
	resize();
	slide();
}

//-->
</script>
</head>

<body>
<!-- ======================================layout================================================================== -->
<div id="banner" style="position:absolute;left:1%;top:1%;width:98%;height:20%;background:#000;overflow:hidden">
	<span style="position:absolute;left:0;top:0;"></span>
	<span style="position:absolute;left:0;top:0;"></span>
</div>
<div id="rLinkTitle" style="position:absolute;color:#FFF;font-family:verdana;left:1%;top:22%;width:34%;height:6%;overflow:hidden;background:#222;">Loading...</div>
<div id="rLinkCaption" style="position:absolute;color:#FFF;font-family:verdana;left:36%;top:22%;width:63%;height:6%;overflow:hidden;background:#222;"></div>
<div id="rLinkScreen" style="position:absolute;top:29%;height:70%;left:-10000;overflow:hidden;"><img id="rLinkZoom" src="" onmouseover="if(!iz)iZoom();" onclick="iZoom();"style="position:absolute;top:0;height:100%;left:0;width:100%;cursor:crosshair;"></div>

<!-- =====================================img source=============================================================== -->
<div id="source" style="visibility:hidden;width:0;height:0;overflow:hidden">
	<img title="red sea" alt="Oxymoron: an organized adventure travel." src="redsea.jpg">
	<img title="secrets of the past" alt="We are family now." src="secretsofthepast.jpg">
	<img title="jagged peaks" alt="We shall never forget that summer." src="jaggedpeaks.jpg">
	<img title="twin gate keepers" alt="Adrenaline galore ..." src="twingatekeepers.jpg">
	<img title="King Tut's Backyard" alt="There was actual danger." src="kingtutsbackyard.jpg">
	<img title="dead volcano" alt="Reality took over." src="deadvolcano.jpg">
	<img title="children of the sea" alt="You know, we were too young, all that." src="childrenofthesea.jpg">
	<img title="glim passage" alt="But we were not conscious of it." src="glimpassage.jpg">
	<img title="sea canyon" alt="An initiatic trip, though." src="seacanyon.jpg">
</div>


<script type="text/javascript"><!--
// ======= start script ======
ims = el("source").getElementsByTagName("img");
N = ims.length;
run();

// ======= load images =======
function images_load(){
	M=0;
	for(var i=0;i<N;i++){
		if(ims[i].complete){
			M++;
			resize();
		}
	}
	if(M<N)setTimeout("images_load()", 64);
}
images_load();

//-->
</script>

</body>
</html>
Me lio con el codigo, lo que quiero, esque no cargue ninguna imagen hasta que pinches en el tumbnail ... esque está muy muy bien pero carga todas las imagenes a la vez ... y lo quería para fotos bastante grandes

No se si sabeis cual es la funcion

Graciass