Pictures and Code

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.

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.

 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.