Generates lightbox on the fly using jQuery

This method requires you to have  2 copies of each image, the original size & thumbnail one. thumbnails MUST BE named as filename_thumb.jpg & stored in /thumbs.  you must have the latest versions of jQuery & jQuery Light Box Plugin.

then add the following javascript code to you <head>:

$(document).ready(function(){
    $("img").each(function() {
        var src_file = $(this).attr("src").split("/");
        var src_file_name = src_file.pop();
        var patt1 = /_thumb.jpg/;
        var original_file_name = "";
        if(src_file_name.search(patt1) != -1) {
            original_file_name = src_file_name.replace(/_thumb/gi, "");
            $(this).wrap("<a href=\"/uploads/"+original_file_name+"\" rel=\"lightbox\"></a>");
        }
    });
    $("a[rel*=lightbox]").lightBox();
});
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • Netvibes
  • StumbleUpon

Tags: , , , ,

Leave a Reply