lcwalbum

No lo había visto antes... creía que ya estaba todo "inventado" en materia de galerías. Y me alegro de que me mostrases esta, Brainiac, porque tiene de especial la apariencia de carrusel y los efectos translúcidos (opacidad).
Por otra prte, encuentro que funciona un poco como... a trompicones. Y la pega de las posiciones absolutas, que les tengo mucha manía :(

Me ha resultado complicado dar con el HTML, pero aquí está. Podéis ver el resultado en Este Blog de Pruebas. La página original es lightcrawler
Las imágenes se desplazan, bien picando sobre cada una de ellas, bien usando los "next" y "prev" que hay en los laterlaes (tienen opacidad, de manera que pasad el ratón por el cuadro para "descubrirlos")

.- CSS
Podéis, como siempre, hacer un link con él. Pero prefiero, cuando puedo, dejarlo abierto y a la vista para poder acceder y efectuar cambios más fácilmente.

body{
margin : 0;
}

#Album{
position:absolute;
top: 0px;
border:2px solid #B9B9B9;
background:#E5E6E6;
}

#info{
position:absolute;
top: 0px;
left:145px;
width:210px;
height:40px;
z-index:6;
background: url(http://.../info.png);
color:#9E9E9E;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
line-height:25px;
font-weight:normal;
text-indent:17px
}

#next{
position:absolute;
top: 200px;
right:0px;
width:66px;
height:35px;
z-index:6;
background: url(http://.../next7.gif);
}

#prev{
position:absolute;
top: 200px;
left:0px;
width:66px;
height:35px;
z-index:6;
background: url(http://.../prev7.gif);
}

div{
color:#ffffff;
}

.- SCRIPTS:

<script language='Javascript' src='http://.../mootools.js' type='text/javascript'/>

<script language='Javascript' src='http://.../lcwalbum.js' type='text/javascript'/>

.- HTML:
Podéis dstinguir tres "fases": En la primera definís el estilo de las imágenes, la identificación y clase. En la segunda, dais contenido a esas definiciones, colocando la URl de cada imagen y, en su caso, el título y cualquier otro dato que estiméis necesario (como la dirección a la que reenviará la imagen al picar sobre ella). En la tercera, un script hace la llamada desde el álbum que habéis creado:

<div id='Album' style='height: 300px; width: 500px;'><div id='lcwbox0' onclick='myAlbum.moveto(0);' ondblclick='myAlbum.sizeup(0);' style='position: absolute; width: 0px; z-index: 0; left: 0px; top: 15px; height: 0px; visibility: hidden; opacity: 0;'><img src='' width='100%'/></div><div id='lcwbox1' onclick='myAlbum.moveto(1);' ondblclick='myAlbum.sizeup(1);' style='position: absolute; height: 39px; width: 37.5px; z-index: 1; left: 5px; top: 15px; visibility: visible; opacity: 0.15;'><img src='' width='100%'/></div><div id='lcwbox2' onclick='myAlbum.moveto(2);' ondblclick='myAlbum.sizeup(2);' style='position: ; width: 75px; z-index: 2; left: 25px; top: 30px; height: 78px; visibility: visible; opacity: 0.3;'><img src='images/6.jpg' width='100%'/></div><div id='lcwbox3' onclick='myAlbum.moveto(3);' ondblclick='myAlbum.sizeup(3);' style='position: ; width: 150px; z-index: 3; left: 75px; top: 55px; height: 156px; visibility: visible; opacity: 0.6;'><img src='images/5.jpg' width='100%'/></div><div id='lcwbox4' onclick='myAlbum.moveto(4);' ondblclick='myAlbum.sizeup(4);' style='position: ; width: 250px; z-index: 4; left: 125px; top: 60px; height: 260px; visibility: visible; opacity: 0.99;'><img src='images/4.jpg' width='100%'/></div><div id='lcwbox5' onclick='myAlbum.moveto(5);' ondblclick='myAlbum.sizeup(5);' style='position: ; width: 150px; z-index: 3; left: 275px; top: 55px; height: 156px; visibility: visible; opacity: 0.6;'><img src='images/3.jpg' width='100%'/></div><div id='lcwbox6' onclick='myAlbum.moveto(6);' ondblclick='myAlbum.sizeup(6);' style='position: ; width: 75px; z-index: 2; left: 400px; top: 30px; height: 78px; visibility: visible; opacity: 0.3;'><img src='images/2.jpg' width='100%'/></div><div id='lcwbox7' onclick='myAlbum.moveto(7);' ondblclick='myAlbum.sizeup(7);' style='position: ; width: 37.5px; z-index: 1; left: 455px; top: 15px; height: 39px; visibility: visible; opacity: 0.15;'><img src='images/1.jpg' width='100%'/></div><div id='info'>Rote Blume</div><div id='next' onclick='myAlbum.fwd();' style='visibility: visible; opacity: 0.1;'/><div id='prev' onclick='myAlbum.rwd();' style='visibility: visible; opacity: 0.1;'/></div>



<script language='JavaScript' type='text/javascript'>



// create a new album

myAlbum = new lcwAlbum(&#39;myAlbum&#39;,&#39;Album&#39;,500,300);



// cwAlbum(name,container id,width,height)

// name = name of the new instance

// container = id of the div or table to insert the album

// width = album width

// height = album height



//add some image



myAlbum.addImage(&#39;http:/... jpg&#39;,&#39;Airbus&#39;);

myAlbum.addImage(&#39;http://.../Estaciones.jpg&#39;,&#39;Estaciones&#39;);

myAlbum.addImage(&#39;http://.../Globos.jpg&#39;,&#39;Aerostáticos&#39;);

myAlbum.addImage(&#39;http://.../vacation4.jpg&#39;,&#39;Vacaciones&#39;);

myAlbum.addImage(&#39;http://.../food1.jpg&#39;,&#39;Comida&#39;);

myAlbum.addImage(&#39;http://.../tIMG_6608.jpg&#39;,&#39;Raft&#39;);

myAlbum.addImage(&#39;http://...todo.jpg&#39;,&#39;Plastilinas&#39;);

myAlbum.addImage(&#39;http://...Paisajes1.jpg&#39;,&#39;Paisaje&#39;);

myAlbum.addImage(&#39;http://.../Al_agua_patos.jpg&#39;,&#39;Al agua, pato&#39;);

myAlbum.addImage(&#39;http://.../snow7.jpg&#39;,&#39;Snow&#39;);



// addImage(path,description);



// draw the album

myAlbum.lcwBoxShow();



</script>

Y... se acabó...