Ir al contenido principal

LightBox con JQuery

Para crear el efecto de lightbox, con JQuery puedes valerte del siguiente plugin:

http://github.com/krewenki/jquery-lightbox/

Para que funcione tenes que depositar en tu sitio Web; el javascript jquery.lightbox.js, el css lightbox.css y las imagenes de la carpeta images.

Seguidamente, tienes que incluir tanto el javascript como el css en tu pagina.

Adicionalmente, tienes que modificar el archivo js (regularmente al final) y el css, para asegurarse que las direcciones de las imagenes en el css y el js, apunten al lugar correcto.

Por ultimo, dos pasos:

Incluir este pequeño código de Javascript:

$(document).ready(function(){
$(".lightbox").lightbox();
});

Si desea mostrar el lightbox solo sobre una imagen, coloque la misma como valor del href y agregue el class lightbox, al atributo class del link:

href="/images/jquerylightbox/image-0.jpg" class="lightbox" title="Titulo inferior del lighbox"

Tome en cuenta que el valor del atributo title, saldra en ell dialogo del lighbox, en la parte inferior.

Ahora si desea que varias imagenes, formen una especie de galeria en el lightbox, simplemente agregue a cada imagen, el atributo rel, con un valor que funcionara como id, por ejemplo:

a href="images/image-1.jpg" class="lightbox" rel="roadtrip"
a href="images/image-2.jpg" class="lightbox" rel="roadtrip"
a href="images/image-3.jpg" class="lightbox" rel="roadtrip"

Las tres imagenes se encuentra asociada bajo el id, roadtrip, por lo tanto cuando le pulsen el mouse sobre alguna de ellas, apareceran las fechas de desplazamiento izquierda y derecha, al mejor estilo de una galeria.

Un saludo,
J

Comentarios

Franck dijo…
Hola soy administrador de una red de blogs estuve visitando tu página http://jsanca.ticoblogger.com/ y me pareció muy interesante. Me encantaría que
pudiéramos intercambiar links y de esta forma ambos nos ayudamos a difundir nuestros páginas.
Si lo deseas no dudes en escribirme.
Exitos con tu página.

saludos



Franck
contacto: rogernad08@gmail.com

Entradas más populares de este blog

Impensando acerca de las referencias en Java

Fue hace ya algún tiempo que pase un rato discutiendo con algunos compañeros acerca de si existe o no el paso por referencia; el discurso fue mucho hacia que en Java el comportamiento, en el supuestamente pasamos por referencia un objeto y por valor los objetos primitivos creo mucha polémica. Para ubicarnos en contexto veamos el siguiente ejemplo. public static void main(String[] args) { int value = 10; changeValue(value); System.out.println("value = " + value); User user = new User(); Name name = new Name(); user.setName(name); name.setName("jsanca"); name.setLastName("XXX"); user.setPassword("123queso"); System.out.println("user: " + user.getName().getName() + ", " + user.getName().getLastName() + ", " + user.getPassword()); changeValue1(user); System.out.println("user: " + user.getName().getName() + ", " + user.getName().getLastName() + ", " + user.ge...

Links acerca de usabilidad

Bueno esta haciendo un research acerca de usabilidad y decidi compartir algunos de los links mas interesantes: Este esta muy cool y dice por que son buenos, gmail #1: http://www.1stwebdesigner.com/design/well-designed-usable-sites/ Los mejores menus: http://www.kronikmedia.co.uk/blog/website-navigation-menu-design/3580/ Otro top ten: http://www.topsite.com/best/usability los CMS con mas usabilidad http://net.tutsplus.com/articles/web-roundups/top-10-most-usable-content-management-systems/ Las grandes companias que incorporan usabilidad en sus sistemas: http://www.siteiq.net/7806/the-2013-usability-top-10-ibm-leads-sap-soars-and-apple-screws-up-the-rankings-2 + Algo interesante: top ten de sitios de Universidades http://blog.thebrickfactory.com/2010/03/top-11-best-designed-university-websites/ Y estos son 10 videitos acerca de usabilidad: http://www.usefulusability.com/10-must-see-usability-videos/ Enjoy!

Wikipedia data base schema

Algo interesante como caso de estudio, especialmente para los que estén cursando bases de datos, el esquema de la Wikipedia esta disponible para hechar un ojo. A simple vista, me gusta mucho la simplicidad y lo bien documentada que se encuentra, vale la pena dedicarle un tiempo. http://www.wikipedia.org/