elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Aporte] Lightbox y JQuery
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Aporte] Lightbox y JQuery  (Leído 2,836 veces)
AFelipeTrujillo

Desconectado Desconectado

Mensajes: 160



Ver Perfil WWW
[Aporte] Lightbox y JQuery
« en: 22 Junio 2010, 23:41 pm »

Lightbox y JQuery

Bueno estuve desarrollando una pagina y uno de los requerimientos era un galería de imagines dinámica, entonces me puse en la búsqueda y encontré este plugin para el framework JQuery.

La forma de implementación es demasiada sencilla el único requerimiento es tener un versión thumb de las diferentes imágenes a mostrar y cuidar que todas la imágenes tengan la misma resolución.

Para empezar les dejo el plug para descargar www.4shared.com/file/209865982/12409a11/jquery-lightbox-05.htmll

Ejemplo:

Para sintetizar bien el ejercicio vamos hace un galería con nuestro amigo tux.

Para llamar la librería lo hacemos dentro de las etiquetas <script></script> y llamamos un estilo dentro de las etiquetas <link></link>

Código
  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
  3. <link rel="stylesheet" href="css/jquery.lightbox-0.5.css" media="screen" />

Y a continuación hacemos las validaciones con JQuery

Código
  1. $(function() {
  2.        $('a[@rel*=lightbox]').lightBox();
  3.        $('#gallery a').lightBox();
  4.        $('a.lightbox').lightBox();
  5.        $('a').lightBox();
  6.    });

Y creamos la etiqueta que va a llamar las dos imágenes de la siguiente forma

Código
  1. <a href="original1.jpg" title = "TITULO 2">
  2. <img title = "TITULO 1" src="mini1.jpg" width="72" height="72" alt="" />
  3. </a>

VER EJEMPLO

VER FUENTE




En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
jQuery lib. 1.4.4 incompatible con lightBox
Desarrollo Web
gerwin86 4 4,680 Último mensaje 12 Diciembre 2010, 04:45 am
por Nakp
[Aporte] JQuery
Desarrollo Web
AFelipeTrujillo 4 4,153 Último mensaje 4 Enero 2011, 14:43 pm
por AFelipeTrujillo
[Aporte] JQuery (Selectores)
Desarrollo Web
AFelipeTrujillo 0 2,960 Último mensaje 4 Enero 2011, 18:08 pm
por AFelipeTrujillo
[Aporte]jShowOff: Un Plugin para jQuery para Rotar Contenido
Desarrollo Web
AFelipeTrujillo 0 3,419 Último mensaje 16 Febrero 2011, 18:54 pm
por AFelipeTrujillo
Poner hiperlink en title (lightbox jquery)
PHP
70N1 6 4,470 Último mensaje 17 Mayo 2011, 21:53 pm
por RedZer
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines