Galería con jQuery Fancy Thumbnail

Añadir una vistosa galería no es complicado siempre y cuando no mezclemos librerías que ocasionen conflictos entre sí. La que vamos a ver está creada con jQuery y es una idea de SOHTANAKA

Aunque resulta muy atractiva también es cierto que necesita bastante espacio  así que opte por prescindir  de la imagen que se muestra a mayor tamaño, de esa forma la podemos añadir en cualquier parte del blog   dependiendo claro está del tamaño disponible. Para el ejemplo añadí nueve imágenes pero podemos aumentar la cantidad si así lo deseamos.

Los estilos y los scripts los añadimos justo después de ]]></b:skin>

<style type='text/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(url-imagen) no-repeat center center;
border: none;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(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>

Donde deseamos mostrar la galería añadimos las imágenes que a su vez pueden ser un enlace de la siguiente forma.

<ul class="thumb">
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
</ul>

En url-imagen añadimos la url de cada imagen, para añadir más imágenes añadiremos la siguiente línea por cada imagen:

<li><a href="#"><img src="url-imagen" alt="" /></a></li>

Por último descargamos la siguiente imagen:

La subimos a nuestro álbum de Picasa y pegamos la url en los estilos donde dice:

ul.thumb li img.hover {

background:url(url-imagen) no-repeat center center;