Morton 17 de febrero de 2011 a las 06.45
   Imprimir artículo
elWebmaster.com

Raphaël: Crea una impactante galería de imágenes con un poco de JavaScript


raphaelwideRaphaël es el nombre de una pequeña librería de archivos JavaScript que simplificará tu trabajo con gráficos de vectores. Utilizando su poder, podremos crear una galería de imágenes bastante moderna. ¡Manos a la obra!

Fuente original del artículo: Mobily Playground
Traducción realizada por
elWebmaster.com

Haz clic en este enlace para ver una demostración de la galería >>

Raphaël actualmente es compatible con Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ y Internet Explorer 6.0+. A la hora de crear tu propía tabla especifica, recorte de imagen o widget que rote, Raphaël es el indicado.

Raphaël usa la VML y además la Recomendación de W3C del SVG como base para crear gráficos. Esto significa que cada objeto gráfico que creas es también un objeto DOM, y puedes añadirle handlers de evento en JavaScript o modificarlos después. El objetivo de Raphaël es proveer un adaptador que haga que el arte de dibujos de vectores sea sencillo y compatible en todos los navegadores.

En esta ocasión, vamos a utilizar Raphaël y un poco de jQuery para crear una galería moderna con un efecto de animación muy bien realizado.

Primero, creamos los tres archivos: index.html, default.css, y init.js y luego descargamos la librería Raphaël.

Haz clic en este enlace para descargar Raphael >>

Luego de eso, incluimos los archivos en la sección del head:

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

Continuamos luego con un simple código HTML:

  1. <div class="gallery">
  2.     <ul class="reset">
  3.         <li><img src="img/img1.jpg" alt="" /></li>
  4.         <li><img src="img/img2.jpg" alt="" /></li>
  5.         <li><img src="img/img3.jpg" alt="" /></li>
  6.         <li><img src="img/img4.jpg" alt="" /></li>
  7.         <li><img src="img/img5.jpg" alt="" /></li>
  8.         <li><img src="img/img6.jpg" alt="" /></li>
  9.         <li><img src="img/img7.jpg" alt="" /></li>
  10.         <li><img src="img/img8.jpg" alt="" /></li>
  11.     </ul>
  12. </div>

Hemos creado la llamada “gallery“, la cual es un listado sin ordenar con imágenes. Esas imágenes tendrán un tamaño de 400px de ancho y de alto.

  1. ul.reset,
  2. ul.reset li {
  3.     display:block;
  4.     list-style:none;
  5.     padding:0;
  6.     margin:0;
  7. }
  8.  
  9.  
  10. .gallery ul li {
  11.     width:200px; /* a half of image width */
  12.     height:200px; /* a half of image height */
  13.     margin:0 10px 10px 0;
  14.     float:left;
  15.     position:relative;
  16. }
  17.  
  18. .holder {
  19.     position:absolute;
  20.     top:0;
  21.     left:0;
  22.     margin:-100px 0 0 -100px; /* margin-left: a half of 'li' width and margin-top: a half of 'li' height */
  23. }

Y finalmente…

  1. $(function(){
  2.      
  3.     var li = $('.gallery').find('li'); // find all 'li' elements
  4.          
  5.     li.each(function(i){
  6.         var t = $(this),
  7.             img = t.find('img'), // find image in 'li' element
  8.             src = img.attr('src'), // get path to your image
  9.             width = li.width(), // get 'li' width
  10.             height = li.height(); // get 'li' height
  11.              
  12.         img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder')); // hide all images and create containers for Raphael objects
  13.  
  14.         var r = Raphael('holder'+i, width*2, height*2), // create Raphael objects
  15.             rimg = r.image(src, width/2, height/2, width, height); // create new images using previous variables
  16.          
  17.         rimg.hover(function() {
  18.             this.animate({
  19.                 scale: 2, // enlarge your images to the normal size
  20.                 rotation : 360
  21.             }, 1200, 'elastic');
  22.         }, function() {
  23.             this.animate({
  24.                 scale: 1, // decrease size of images
  25.                 rotation : 0
  26.             }, 1200, 'elastic');
  27.         });
  28.          
  29.     });
  30.      
  31.     li.hover(function(){
  32.         li.css({ 'z-index': 1 }); // set z-index to all 'li' elements
  33.         $(this).css({ 'z-index': 2 }); // set z-index to the hovering element
  34.     });
  35.              
  36. });

Y eso es todo. ¡Hasta la próxima!

Haz clic en este enlace para visitar el sitio oficial de Raphael >>

Haz clic en este enlace para ver una demostración de la galería >>

Fuente original del artículo: Mobily Playground
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. veronica dice:

    Bueno yo queria saber en que parte ubico los TEXTOS PLANOS?
    Tengo que crear un DIV que se llame Gallery y dentro de él insertar cada una de las imagenes, ubicadas como aparecen en el demo? Gracias

  2. Katherine Avendaño dice:

    Hola, estoy interesada en proponerle a la entidad donde laboro algo muy interesante, moderno, interactivo, me gustaría tener un concepto de ustedes del sitio que me dieron para administrar.

    Soy la webmaster de la Universidad de Córdoba, anteriormente laboré en otra dependencia muy administrativa, ha sido un reto para mi este nuevo cargo, mi perfil es Lic. en informática y medios audiovisuales, entonces pienso que no me será difícil el proceso de comprensión de los términos técnicos.
    gracias

    katherine

  3. links for 2011-02-22 | Tombola! dice:

    […] Raphael: Crea una impactante galería de imágenes con un poco … (tags: lightbox raphael) […]

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder