Lightbox and Joomla 1.5

Lightbox is a suite of Javascript code snippets used to overlay images on a web page. It enables a user to click on an image on a web page, and that image will be overlayed usually providing a zoomed version of the same image. The Lightbox product is used on some of my websites and clicking on a screen image will produce rather a nice piece of animation to zoom into the picture.

Now here's the issue. Straight out of the box, Lightbox will not work with Joomla. However, by following the steps identified below, the two systems can be set to coexist.

Lightbox can be downloaded from its official site here. At the time of writing this article Lightbox was on version 2.04. Download it to a temporary area on your website, and then unzip. On a Linux system that would be done from the command line with:

$ unzip lightbox*

This will create three subdirectories, namely css (stylesheet), images and js (Javascript code). Copy the contents of the css directory into your template's css directory, and copy the contents of the js directory into a new directory called js in your template directory. So, those commands will look something like (dependent upon your configuration)
$ cp css/* /srv/www/htdocs/joomla/templates/{templatename}/css/.
$ mkdir /srv/www/htdocs/joomla/templates/{templatename}/js
$ cp js/* /srv/www/htdocs/joomla/templates/{templatename}/js/.

Most of the images need to go into the Joomla image directory, but two belong in the template's image directory. So, it's a little fiddly :
$ cp images/prevlabel.gif /srv/www/htdocs/joomla/templates/{templatename}/images/.
$ cp images/nextlabel.gif /srv/www/htdocs/joomla/templates/{templatename}/images/.
$ cp images/* /srv/www/htdocs/joomla/images/.
$ rm /srv/www/htdocs/joomla/images/prevlabel.gif /srv/www/htdocs/joomla/images/nextlabel.gif

Next, the index.php file in the template directory needs to be edited to include the stylesheet and theJavascript.

Add the following line in the <head> section, after the other stylsheet references.

<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/lightbox.css" type="text/css" media="screen" />

Add the following lines, still in the section, just before the </head>
<script type="text/javascript" src="/templates/<?php echo $this->template ?>/js/prototype.js"></script>
<script type="text/javascript" src="/templates/<?php echo $this->template ?>/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/templates/<?php echo $this->template ?>/js/lightbox.js"></script>

So far, so good, and this will now work on Firefox. Not on Internet Explorer unfortunately due to clash between Lightbox and Mootools. To disable mootools front-end, add the following code after the <head> tag and before <jdoc:include type="head" />
<?php
$user
=& JFactory::getUser();
if (
$user->get('guest') == 1) {
$headerstuff = $this->getHeadData();
$headerstuff['scripts'] = array();
$this->setHeadData($headerstuff); }
?>

Ok, voila! Your Joomla/Lightbox system is now ready to rock and roll! To use Lightbox, simply follow the example mark-up identified here.