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
- Lightbox Web Photo Gallery original tutorial
- Lightbox 2.0 Web Photo Gallery example
- Photoshop Lightbox 2.0 Web Photo Gallery Preset
- Lightbox 2.0 Javascript website
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.

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.
2 Comments »
Post Details
- Posted at July 13th, 2006 05:41pm
- Posted by Tommy Maloney
- Filed under Actions and Automation, Tutorials, Web
- 2 Comments have been made
Possibly Related
- Lightbox Web Photo Gallery

- Website Design Mockup Tips

- Web 2.0 Design Kit, Part 2

- Web 2.0 Design Kit

- Lightroom 2.0 Beta Announced by Adobe
Popular
- Web 2.0 Design Kit | Effects, Tutorials, Web

- Photoshop Tool Basics | Beginners, Tools, Tutorials

- Peeling Sticker Effect | Effects, Tutorials

- Ripped and Torn Edges and Stuff | Brushes, Effects, Tutorials

- Lightbox 2.0 Web Photo Gallery | Actions and Automation, Tutorials, Web

Sponsors
- ms access training
- Color Post Card Printing
- Photoshop Training Courses
- Samsung LCD Monitors
Yours HereFavorites
-


And what about milkbox? Take a look!
http://reghellin.com/milkbox
[...] Lightbox Links [...]