SummArg | Cursos y recursos para webmasters

05/03/2011

Galerías de imagenes animadas con Raphael

Raphael es una librería JavaScript para el trabajo con vectores en la web. Utilizando dicha librería, jQuery y un poco de ingenio, la gente de playground.mobily nos ofrece simples pasos para generar una galería web totalmente animada.

Descarga | Demo

La librería Raphael desde descargarse desde su site oficial, así como jQuery.

En el documento en donde deseamos mostrar la galería, linkeamos los siguientes archivos entre etiquetas <head>:

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/raphael.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

Debajo de la etiqueta <body> en nuestro HTML, colocamos las imagenes en una lista desordenada:

<div class="gallery">
<ul class="reset">
<li><img src="img/img1.jpg" alt="" /></li>
<li><img src="img/img2.jpg" alt="" /></li>
<li><img src="img/img3.jpg" alt="" /></li>
<li><img src="img/img4.jpg" alt="" /></li>
<li><img src="img/img5.jpg" alt="" /></li>
<li><img src="img/img6.jpg" alt="" /></li>
<li><img src="img/img7.jpg" alt="" /></li>
<li><img src="img/img8.jpg" alt="" /></li>
</ul>
</div>

Las imágenes deben medir 400px x 400px. En el CSS definimos las propiedades de gallery, del listado de imagenes con clase reset y de holder, que será la nueva ventana en donde se abre la imagen ampliada.

ul.reset,
ul.reset li {display:block;
list-style:none;
padding:0;
margin:0;
}
.gallery ul li {
width:200px; /* a half of image width */
height:200px; /* a half of image height */
margin:0 10px 10px 0;
float:left;
position:relative;
}
.holder {
position:absolute;
top:0;
left:0;
margin:-100px 0 0 -100px; /* margin-left: a half of 'li' width and margin-top: a half of 'li' height */
}

Y finalmente dentro de init.js colocamos:

$(function(){
var li = $('.gallery').find('li'); // find all 'li' elements
li.each(function(i){
var t = $(this),
img = t.find('img'), // find image in 'li' element
src = img.attr('src'), // get path to your image
width = li.width(), // get 'li' width
height = li.height(); // get 'li' height
img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder')); // hide all images and create containers for Raphael objects
var r = Raphael('holder'+i, width*2, height*2), // create Raphael objects
rimg = r.image(src, width/2, height/2, width, height); // create new images using previous variables
rimg.hover(function() {
this.animate({
scale: 2, // enlarge your images to the normal size
rotation : 360
}, 1200, 'elastic');
}, function() {
this.animate({
scale: 1, // decrease size of images
rotation : 0
}, 1200, 'elastic');
});
});
li.hover(function(){
li.css({ 'z-index': 1 }); // set z-index to all 'li' elements
$(this).css({ 'z-index': 2 }); // set z-index to the hovering element
});
});

Dejar un comentario