Un "slider" muy original

La verdad es que me gustó un montón la Demo de css-tricks: si sólo interesa mostrar unas pocos fotos resulta perfecto: fundiona más bien como un zoom, que amplía las imágenes con mucha suavidad, y las vuelve a guardar al pulsar el bótón de cierre. Además, cada caja de imagen puede contener vínculo y descripción.

Lo he probado en la cabecera de este Blog, y me ha gustado tanto el resultado que he decidido sacar tiempo de donde apenas tengo para explicar qué tenéis que hacer:

.- CSS:

a.close {
position: absolute;
right: 10px;
bottom: 10px;
display: block;
width: 20px;
height: 21px;
background: url(http://.../close_button.jpg);
text-indent: -9999px;
}

.photo_slider_img {
width: 100px;
height: 100px;
margin-bottom: 5px;
overflow: hidden;
}

td {
vertical-align: top;
}

.photo_slider {
position: relative;
width: 100px;
height: 130px;
padding: 10px;
border: 1px solid black;
overflow: hidden;
margin: 25px 10px 10px 10px;
background: white;
float: left;
}

.info_area {
display:none;
}

.more_info {
display: block;
width: 89px;
height: 26px;
background: url(http://.../moreinfo.jpg);
text-indent: -9999px;
cursor: pointer;
}

.- SCRIPTS:

<script src='http://.../jquery.js' type='text/javascript'/>

.- HTML y SCRIPT:

<table><tr>



<td><div class='photo_slider'>

<img src='http://.../Avatar_Hiper.png'/>

<div class='info_area'>

<h3>Avatar</h3>



<p><em>Por: <a href='http://cafe-junio.blogspot.com/'>Junio</a></em></p>

</div>

</div></td>



<td><div class='photo_slider'>

<img src='http://.../Neo5.png'/>

<div class='info_area'>

<h3>Neo5</h3>



<p><em>Por: <a href='http://cafe-junio.blogspot.com/'>Junio</a></em></p>

</div>

</div></td>



<td><div class='photo_slider'>

<img src='http://.../Neo4.png'/>

<div class='info_area'>

<h3>Neo4</h3>

<p><em>Por: <a href='http://cafe-junio.blogspot.com/'>Junio</a></em></p>



</div>

</div></td>



<td><div class='photo_slider'>

<img src='http://.../Neo2.png'/>

<div class='info_area'>

<h3>Neo2</h3>

<p><em>Por: <a href='http://cafe-junio.blogspot.com/'>Junio</a></em></p>



</div>

</div></td>



</tr></table>

<script src='http://.../photorevealer.js' type='text/javascript'/>

Y eso es todo... fácil, rápido y muy guapo... Y podéis descargaros el zip en el vínculo de Css-Tricks que os he dado al principio.