Modificar un poco este script
Código:
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<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>
No se si sabeis cual es la funcion
Graciass
