Lightbox 2.0 Web Photo Gallery

Due to popular demand, I have extended the Lightbox Web Photo Gallery tutorial with instructions on adapting it to work with Lightbox 2.0. Since this is a continuation, I highly suggest reading the original tutorial, otherwise you’ll probably be a bit lost.

Quick Guide

Start by duplicating the “Simple” preset folder (or the “Lightbox” folder if you created one already) in your [Presets > Web Photo Gallery] folder. Rename the duplicated folder to “Lightbox 2.0″ and create a folder within that called “images”. Visit the Lightbox JS v2.0 website and download the necessary files. Drag the supporting Lightbox 2.0 images, stylesheets and javascript files (from your download) into the “images” folder.

lightbox1

Open the [Thumbnail.htm] file, located in the “Lightbox 2.0″ folder, in your favorite HTML or text editor. Set the anchor tag to:

  • <a href="%IMAGEPAGE%" title="%CAPTIONTITLE%" rel="lightbox[gallery]">

Open the [lightbox.js] file, now located in the “images” folder. Find line (approximately) 331 where it says

  • imageArray.push(new Array(imageLink.getAttribute(‘href’), imageLink.getAttribute(‘title’)));

And add/change that line to:

  • imageLink.href = imageLink.getAttribute(‘href’);
  • imageLink.href = imageLink.href.replace("/pages/","/images/");
  • imageLink.href = imageLink.href.replace(".html",".jpg");
  • imageLink.href = imageLink.href.replace(".htm",".jpg");
  • imageArray.push(new Array(imageLink.href, imageLink.getAttribute(‘title’)));

Then find line (approximately) 343 where it says:

  • if (anchor.getAttribute(‘href’) && (anchor.getAttribute(‘rel’) == imageLink.getAttribute(‘rel’))){
  •  imageArray.push(new Array(anchor.getAttribute(‘href’), anchor.getAttribute(‘title’)));
  • }

And add/change to:

  • if (anchor.getAttribute(‘href’) && (anchor.getAttribute(‘rel’) == imageLink.getAttribute(‘rel’))){
  •  anchor.href = anchor.getAttribute(‘href’);
  •  anchor.href = anchor.href.replace("/pages/","/images/");
  •   anchor.href = anchor.href.replace(".html",".jpg");
  •  anchor.href = anchor.href.replace(".htm",".jpg");
  •  imageArray.push(new Array(anchor.href, anchor.getAttribute(‘title’)));
  • }

A little below that, you’ll want to find:

  • while(imageArray[imageNum][0] != imageLink.getAttribute(‘href’)) { imageNum++;}

And change it to:

  • while(imageArray[imageNum][0] != imageLink.href) { imageNum++;}

Save your edited [javascript.js] file. Run your new Web Photo Gallery through Photoshop.

Comments Spill 6 Comments »

  1. June 10, 2008 8:18 amLuca

    And what about milkbox? Take a look! ;)

    http://reghellin.com/milkbox

  2. July 23, 2008 2:02 pmportfolio.oarso.net » Blog Archive » jQuery | ThickBox 3.1 | Lightbox 2.0

    [...] Lightbox Links [...]

  3. February 24, 2009 12:36 amMatt

    Has anyone tried this with the new Lightbox 2.04? The .js file is different so I don’t know how to make these mods and I REALLY want to figure this out! This is the perfect solution for my needs.

  4. February 24, 2009 1:19 amMatt

    WOW – I just realized you have the whole preset folder for download! You rock! I have one BIG question though… I’m using .htaccess on the image folder, so I need to move all lightbox content to another folder called “lightbox” so everything behaves before loading the main image. I thought I fixed all pathnames in the lightbox files, but I suspect something else broke. Can you tell me where I need to look to update the new directory names and in what files? Thanks in advance!

  5. July 11, 2009 12:18 pmZane Cole

    Has anyone adapted the lightbox.js of lightbox 2.04 to work with web photo gallery? Verstion 2.04 has a few upgrades and the code is changed such that it doesn’t appear to be a simple modification to get it to work with web photo gallery.
    Any help is appreciated.

  6. January 25, 2010 8:33 amIan

    Here is what I did to get this to work with Lighbox 2.04.

    At line 216 you will find the if statement
    if ((imageLink.rel == ‘lightbox’)){

    insert the following three lines:
    imageLink.href = imageLink.href.replace(“/pages/”,”/images/”);
    imageLink.href = imageLink.href.replace(“.html”,”.jpg”);
    imageLink.href = imageLink.href.replace(“.htm”,”.jpg”);

    just before this line:
    this.imageArray.push([imageLink.href, imageLink.title]);

    A few lines below that insert the following three lines:
    anchor.href = anchor.href.replace(“/pages/”,”/images/”);
    anchor.href = anchor.href.replace(“.html”,”.jpg”);
    anchor.href = anchor.href.replace(“.htm”,”.jpg”);

    before this line:
    this.imageArray =

    The whole if else statement at line 216 should now look like this:
    if ((imageLink.rel == ‘lightbox’)){
    // if image is NOT part of a set, add single image to imageArray
    imageLink.href = imageLink.href.replace(“/pages/”,”/images/”);
    imageLink.href = imageLink.href.replace(“.html”,”.jpg”);
    imageLink.href = imageLink.href.replace(“.htm”,”.jpg”);
    this.imageArray.push([imageLink.href, imageLink.title]);
    } else {
    // if image is part of a set..
    anchor.href = anchor.href.replace(“/pages/”,”/images/”);
    anchor.href = anchor.href.replace(“.html”,”.jpg”);
    anchor.href = anchor.href.replace(“.htm”,”.jpg”);
    this.imageArray =
    $$(imageLink.tagName + ‘[href][rel="' + imageLink.rel + '"]‘).
    collect(function(anchor){ return [anchor.href, anchor.title]; }).
    uniq();

    while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
    }

 
Leave A Comment TrackBack URL