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.

11 opinaron:

Gildo Kaldorana

Muchas gracias.
Esta muy interesante esta galeria de imagenes, creo que queda muy limpia.
Saludos

Responder
Jéssica YK

» Gildo Kaldorana:
Me alegra que te haya gustado y sido útil.

Gracias por la visita.

S@lu2

Responder
G

Me encanta como queda, vi la demo que pusiste asi que ahora voy a implementarlo en mi blog :)

Responder
juan carlos

Una galería muy elegante,me gusta cómo se ve

Responder
Yessmi

Lo implementé en mi blog y quedó genial

Responder
Graciela de Palomas

Hola tesoro, espero te encuentres muy bien :D

Con JQuery, es preciosa, lástima tengo Scriptaculous y no deseo se peleen ;)

Buen fin de semana, nos vemos besos!

Responder
.::UdeComercial™::.

El único problema es que no funcionan las enlaces de las imagenes. :(

Responder
Jorge Luis Rojas

me gusta como se ve!!! pero pero como se hace para que funcione teniendo en mi plantillas Scriptaculous

Responder
Jordi

Saludos:

Soy nuevo en esto de blogger y me gusta tu blog pues saco muchas ideas.
Me guta esta galeria y la he implementado tal qual explicas pero me sale al lado de cada foto un punto negro. No se de donde sale ni como sacarlo.
Por cierto se puede variar el tamaño? que hay que modificar?

Gracias

Responder
Jéssica YK

» Jordi:
Como la galeria la has puesto en un post, deberías poner el código todo junto, de esta forma:

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

Con ello, los puntos deberían desaparecer. Si no es así, me avisas para revisar tu plantilla.

Para agrandar las imágenes, no sé si quieres agrandar la miniatura o si quieres agrandar la imagen al momento de pasar el cursor, pero puedes cambiar los valores width y height hasta que consigas el tamaño que quieres.

Si tienes algún problema. me avisas :)

S@lu2

Responder
Jordi

Bon dia!

Gracias por tu pronta y detallada respuesta.

Un abrazo!!

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio