Generates lightbox on the fly using jQuery

Mahmoud M. Abdel-Fattah — Sat, 02 May 2009 15:22:03 +0000

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 :

$(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();
});

Hdeya team blog » lightbox

Generates lightbox on the fly using jQuery