Búsqueda personalizada
Noviembre 28, 2008

JQuery: jqGalScroll 2.0 (Galería de fotos)

jQuery jsGalScroll es un Plugin que nos permitirá agrupar imágenes y convertirlas en una especie de galería de fotos con paginación.

Ver Demo – Descarga Ejemplo

En nuestro encabezado

PLAIN TEXT
JavaScript:

  1. <script type=“text/javascript” src=“jquery-latest.pack.js”></script>
  2. <script type=“text/javascript” src=“jquery.easing.1.2.js”></script>
  3. <script type=“text/javascript” src=“jqGalScroll.js”></script>
  4. <style type=“text/css” media=“screen”>
  5. @import url(jqGalScroll.css);
  6. </style>
  7. <script type=“text/javascript”>
  8. $(document).ready(function(){
  9. $(“ul.jqGalScroll”).jqGalScroll({height:268,width:400,ease:‘easeInOutCubic’,speed:1000});
  10. });
  11. </script>

Nota: En height (alto)y width (ancho) podremos configurar el tamaño que tendrán las imágenes.

En “speed” la velocidad de transición entre las imágenes.

Ya en nuestro contenido, agregamos nuestras imágenes y una pequeña descripción de cada una de ellas.

PLAIN TEXT
HTML:

  1. <ul class=“jqGalScroll”>
  2. <li><img src=“common/img/alamos_en_otonio.jpg” alt=“Alamos en Otoño” /></li>
  3. <li><img src=“common/img/chapelco_verano.jpg” alt=“Chapelco – San Martin de los Andes – Verano” /></li>
  4. <li><img src=“common/img/gch_chapelco12.jpg” alt=“Chapelco bajo Nieve” /></li>
  5. <li><img src=“common/img/ch_rafting01.jpg” alt=“El rafting en la zona” /></li>
  6. <li><img src=“common/img/foto.jpg” alt=“Naturaleza en Neuquen – Argentina” /></li>
  8. </ul>

Publicado en Galerías, Javascript, scripts | Responder
Noviembre 28, 2008

FrogJS – Galería en Javascript

FrogJS es una simple librería Javascript que nos permitirá crear una simple galería de imágenes. Su simpleza quizás nos puede engañar, ya que detrás de ella se esconden bonitos efectos de transición que la hacen muy agradable. FrogJS no es un sustituto de otras galerías en las cuales podremos mostrar miniaturas en imágenes como Lightbox JS, sino una manera distinta de crear presentación de imágenes a través de galerías.

Instalacion:

  1. Descargar FrogJS v1.1, descomprimir y subir los archivos a tu servidor web.

  2. En nuestro header hacemos la llamada a los archivos que necesitaremos para la galería.

PLAIN TEXT
JavaScript:

  1. <script src=“scripts/prototype.js” type=“text/javascript”> </script>
  2. <script src=“scripts/scriptaculous.js?load=effects” type=“text/javascript”> </script>
  3. <script src=“scripts/frog.js” type=“text/javascript”> </script>

Ahora solo basta insertar nuestro código html para crear la galería en miniatura. Podremos utilizar tantas imágenes como lo deseemos.

PLAIN TEXT
HTML:

  1. <div id=“FrogJS”>
  2. <a href=“images/1.jpg” title=“mi web” rel=“http://www.borchani.com”>
  3. <img src=“images/1_thumb.jpg” alt=“Caption” />
  4. </a>
  5. <a href=“images/2.jpg” title=“Credit”>
  6. <img src=“images/2_thumb.jpg” alt=“logos” />
  7. </a>
  8. </div>
Publicado en Galerías, Javascript, scripts | Responder
Noviembre 28, 2008

Videobox, muestra videos en dialogo externo

Seguro que casi todos conocéis el script Lightbox (del que también hay plugin para wordpress) con el cual se pueden mostrar imágenes en un dialogo externo a la página, muy útil por lo “limpio” de los resultados en vez de tener que hacerlo con un tosco pop-up. Videobox hace exactamente lo mismo pero para videos, es tan parecido a Lightbox que está basado en él y está hecho con la misma librería, mootools, añadiendo el uso de swfobject para gestionar los vídeos. La instalación es simple, descargar los archivos necesarios, llamarlos desde el header y usar añadiendo en el enlace a las imágenes la etiqueta rel=”vidbox”. En la página viene explicado, si no sabes ingles con el traductor de google será suficiente para entender lo que dicen. Se puede usar con vídeos de YouTube, Metacafe, Google Video e iFilm.

Enlace: Videobox: Lightbox for videos,
Youtube, Metacafe, Google Video, iFilm

Publicado en Recursos Web, scripts | Responder
« Tema anterior

Archivos

Posicionando