Lightbox JavaScript con TopUp y jQuery

TopUp es un plugin JavaScript para realizar Lightbox, esta desarrollado con jQuery y la librería jQuery UI los cuales nos brindan la posibilidad de tenerlos en nuestra Web.

Actualmente TopUp soporta distintos tipos de lightbox, aparte de realizar la función para imágenes, podemos poner Flash, Videos Youtube, Windows Media, RealPlayer, Quicktime, iframes y html.

Implementándolo en nuestra Pagina Web.

Paso 1: Incluir dentro del la librería TopUp.

Si poseemos un hosting propio, podemos descargarlo y subirlo a una carpeta para llamarlo, sino podemos llamarlo desde la misma Web que lo brinda.


Paso 2: Configurar los enlaces que abrirán el lightbox.

En este simple paso tan solo agregaremos la clase “top_up” a los enlaces que deseemos abran un lightbox.

Youtube

Así de simple logramos implementar un Lightbox con TopUp, una muy buena alternativa dentro de su categoría.

Ver Demo Descargar

zp8497586rq
zp8497586rq
jfdghjhthit45

También te puede interesar

4 Comments

  1. andres
    jul 18, 2010 @ 03:50:11

    amigo no entiendo bien lo de “top_up podrias dejarme un ejemplo ya logre que me abriera el video pero lo que deceo es integrar una imagen y ala hora de darle click en la imagen abra el video espero tu pronta respuesta

    • craftyman
      jul 19, 2010 @ 14:20:34

      Andres,

      La clase top_up es para detectar el link convertirlo en un lightbox, si tiene el atributo toptions este ya no es necesario, para realizarlo con una imagen seria de la siguiente forma.

      <a href=”photos/2.jpg” toptions=”shaded = 1″>
      <img src=”thumbnails/2.jpg”/>
      </a>

  2. andres
    jul 21, 2010 @ 15:17:33

    amigo ya muy bien entendido lo ocupe para ver elis online pero sugin veo me toca modificar el script ya que en la imagen del video me sale muy gracias mira te dejo el link de la pagina web y me dices que puedo hacer en mi ksa de antemano de gradesco toda la ayuda que me puedas brindar gracias

  3. andres
    jul 21, 2010 @ 15:19:10

    perdon mira el link http://pelisonlinehd.blogspot.com