Add lightbox effect to image links using jQuery

Lightboxs are very popular to display large images using model dialogs. It is elegant and easy to implement. Here I have a simple example of how you can use jQuery to find all anchors link to an image and hook it up with a lightbox automatically… by using jQuery, of course!

Current version of jQuery is 1.3.2 and I use PrettyPhoto as my choice of jQuery lightbox plugin.

Use jQuery to find all anchors with links ending with .png, .jpg or .gif:

$("a").filter("[href$=.png], [href$=.jpg], [href$=.gif]").click(function(){...})

Next you hook the lightbox method after the click event, and you done!


Now show off your javascript skills in your blog without having to set each image manually!

Tags: , ,

Leave a Reply

Trackbacks

  • Pages

  • Categories

  • Archives

  • Recent Comments

  • Tag Cloud