14th August 2006

Pixelpost 1.5 with Lightbox JS v2.0

Well, I have been using pixelpost now for quite some time and liked it a lot. A few day ago i came across Lightbox JS v2.0 and wondered why I haven’t seen it before on any websites. So I wanted to combine both for the “Browse View” of my pixelpost.

 pixelpost with lightbox in firefox screenshot

Before i continue with the install instructions you should have a look at it. Example Ok now what to do: At first I am assuming that you have Pixelpost 1.5 already installed. Now get Lightbox JS v2.0 and copy the folders “css” and “js” just aside your “index.php” from pixelpost and copy the stuff from the “image” folder into the existing “image” folder from pixelpost.

 pixelpost directory structure with lightbox included

 Should look like this in the end. Open pixelpost’s “index.php” and go to the line with the “$thumb_output” (line 723 for me) and replace it with:

$thumb_output .= "<a href='images/$name' rel='lightbox[views]' title='$title'><img src='$thumbnail' alt='$title' title='$title' class='thumbnails' /></a>";

Next go to your “browse_template.html” of the recent pixelpost template and insert:

<link rel="stylesheet" xhref="css/lightbox.css" type="text/css" media="screen" /> <script xsrc="js/prototype.js" type="text/javascript"></script> <script xsrc="js/scriptaculous.js?load=effects" type="text/javascript"></script> <script xsrc="js/lightbox.js" type="text/javascript"></script>

Just put it under the existing “<link rel=”alternate stylesheet” …”.Sometimes you have to modify “lightbox.css” because of font colors of your pixelpost theme. Like in my case i had to edit this:

#imageDataContainer{ color: #666; …

In order to get a little link to the picture beside the caption i did the following edit in the “lightbox.js” . Look for the line with

Element.show('caption');

and replace the next line with

Element.setInnerHTML( 'caption', imageArray[activeImage][1] + " <a target=_blank xhref=" + imageArray[activeImage][0] + ">[ link ]</a> ");

It worked for me.

posted in reviews | 37 Comments