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.

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

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

<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.

• 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.