Publicado el Lunes, 14 de enero del 2008 por MyR

Lightview, como lightbox pero mejorado

Lightview es un script basado en prototype que nos servirá para mostrar imágenes en un dialogo emergente, sombreando la parte inferior de la página al igual que hace lightboxs, solo que mejorado en diferentes aspectos: si tenemos más de una imagen se podrá navegar entre ellas mediante dos flechas, adelante y atrás con la mejora de que siempre se mostrarán fuera de la imagen, incorpora varios parámetros que podemos configurar de una forma sencilla, las imágenes se presentan con un marco redondeado que se ajusta a la imagen y el cual podemos modificar, trabaja en diferentes resoluciones adaptando la imagen y el fondo así como otros elementos a dicha resolución.

Vamos a ver rápidamente como implementarlo (ver demo):

Primero nos descargarmos Lightview, prototype y scriptaculous. Creamos un html y en entre head /head llamamos el css, lightview y las librerías que hemos descargado antes, en este orden:

PLAIN TEXT
HTML:
  1. <link href="css/lightview.css" rel="stylesheet" type="text/css" />
  2. <script type="text/javascript" src="js/prototype.js"></script>
  3. <script type="text/javascript" src="js/scriptaculous/src/scriptaculous.js?load=effects"></script>
  4. <script type="text/javascript" src="js/lightview.js"></script>

Seguido entre body y /body enlazamos nuestras imágenes y les damos el atributo correspondiente para que carguen con lightview:

PLAIN TEXT
HTML:
  1. <a href="flor1.jpg?phpMyAdmin=JTM06PkZm21RcPh-da2-FZy70a7&phpMyAdmin=rp%2CvLPHOvuIWmaU9OYGelfb0h76&phpMyAdmin=28ac97fad0250f46cc99110c932da2c7" rel="lightview">Imagen 1</a>
  2. <a href="flor2.jpg?phpMyAdmin=JTM06PkZm21RcPh-da2-FZy70a7&phpMyAdmin=rp%2CvLPHOvuIWmaU9OYGelfb0h76&phpMyAdmin=28ac97fad0250f46cc99110c932da2c7" rel="lightview">Imagen 2</a>
  3. <a href="flor3.jpg?phpMyAdmin=JTM06PkZm21RcPh-da2-FZy70a7&phpMyAdmin=rp%2CvLPHOvuIWmaU9OYGelfb0h76&phpMyAdmin=28ac97fad0250f46cc99110c932da2c7" rel="lightview">Imagen 3</a>

Y ya lo tenemos. Esta es una explicación muy sencilla, podemos añadir características, efectos, modificar las esquinas redondeadas, etc. Toda la información en la página oficial.

Visto en webappers.com

Comparte este articulo:
  • Bitacoras.com
  • TwitThis
  • Meneame
  • Facebook
  • del.icio.us
  • Tumblr
  • Live
  • MisterWong
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • Wikio
  • E-mail this story to a friend!
  • Print this article!

Posts relacionados

Guardado en: CSS&XHTML, CodesWeb
Tags:

4 Comentarios

David dejó un comentario el 14 enero 2008 a las 8:49 pm

  1. Muy guapo este artículo, lo probaré sin duda.

    Un saludo

Elías dejó un comentario el 14 enero 2008 a las 9:42 pm

  1. Gracias david!.

    Un saludo.

Lightbox x2 - Facebox and Lightview « Xyberneticos dejó un pingback el 16 enero 2008 a las 7:25 am

  1. [...] demo - Descarga Ejemplo - web Lightview - via diariothc Uso Descargamos el script Lightview junto con prototype y scriptaculous. Alojaremos cada uno de [...]

Alan Viñals / Blog » Lightbox x2 - Facebox and Lightview - Imagenes emergentes dejó un pingback el 01 febrero 2008 a las 12:23 pm

  1. [...] sobre cada una de ellas desde el mismo Lightbox.Ver demo - Descarga Ejemplo - web Lightview - via diariothc Uso Descargamos el script Lightview junto con prototype y scriptaculous. Alojaremos cada uno de [...]

Deja un comentario

»
«