Galería de imágenes con jQuery

Hoy vamos a ver cómo hacer una galería de imágenes muy vistosa y sencilla de implementar con jQuery, idea de nuestros amigos de Sohtanaka.

Si desean ver cómo queda, pueden ver la DEMO en uno de mis blogs de pruebas.



1.§ Lo primero que haremos será alojar la siguiente imagen, ya sea en Blogger o en Imageshack, Photobucket,etc.



2.§ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código CSS:

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(Aquí-URL-imagen) no-repeat center center;
border: none;
}

Reemplazamos Aquí-URL-imagen por la imagen que subimos en el paso anterior.
3.§ Ahora buscaremos </head> y debajo pegaremos el siguiente script:

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);
} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});
//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
</script>

Damos click a guardar.
4.§ Ahora, cada vez que vayamos a usar esta galería deberemos de colocar los enlaces de esta forma (podemos colocarlos en una entrada):

<ul class="thumb">
<li><a href="#"><img src="URL-IMAGEN" alt="Texto" /></a></li>
<li><a href="#"><img src="URL-IMAGEN" alt="Texto" /></a></li>
<li><a href="#"><img src="URL-IMAGEN" alt="Texto" /></a></li>
<li><a href="#"><img src="URL-IMAGEN" alt="Texto" /></a></li>
</ul>

Reemplazamos lo que está en negrita y listo, ya tenemos nuestra galería de imágenes.