«
»

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("&lt;a href=\"/uploads/"+original_file_name+"\" rel=\"lightbox\"&gt;&lt;/a&gt;");
        }
    });
    $("a[rel*=lightbox]").lightBox();
});
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • Netvibes
  • StumbleUpon

Tags: , , , ,

This entry was posted on Saturday, May 2nd, 2009 at 5:22 PM and is filed under Design, Javascript, Quick Tip / Trick, Uncategorized, jQuery, js. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply