A. What is SqueezeBox?SqueezeBox is Joomla's implementation of Lightbox, a Javascript application designed to display content using transparent boxes (fig. A) in an elegant and simple manner. SqueezeBox can display a wide variety of content, from images to webpages. However, SqueezeBox does have some limitations, such as the fact that multiple content dialogs cannot be displayed at the same time and that tooltips break when SqueezeBox is being used. Also, SqueezeBox currently cannot display an image gallery. Although setup may seem slightly complicated at first, this guide will provide you with everything you will need to setup SqueezeBox. In order to get the desired results, you need to know basic HTML and use Joomla 1.5RC4 or later. The content in this guide is based off of the Joomla Default Sample Data. This guide is designed to be simple and easy to comprehend; as a result, you will find screenshots, lightbulbs, fingers, and exclamation marks throughout this guide to emphasize specific facts. A indicates a fact that you'd probably want to be aware of, a points to the web address of the page (remember that these are default URL's, and that you need to substitute yoursiteaddress.com with the actual address), and an indicates something to watch out for. In addition, code will be displayed using a separate font, Courier New.

Figure A. An sample image displayed using SqueezeBox.

B. Getting Up & Running1. Setup The easiest method to setup SqueezeBox is to have it load on every webpage, in case you might need it. To do so, you'll need to modify Joomla's default template. Instructions are provided below. A template is a preset format used as a starting point so that the format does not have to be recreated each time it is used. thefreedictionary.com 1. Login to the Joomla! Administrator Back-end. http://www.yoursiteaddress.com/administrator The default username is admin. 2. Hover your mouse over Extensions (on the drop-down menu right below the Joomla logo), and select Template Manager (fig. B).

Figure B. Select the Template Manager. 3. Find the template that has a template (fig. C). by its name, and click on the

Figure C. Select the default template.

4. In the top right-hand corner, click Edit HTML. (fig. D). A page with a text box in the middle should load.

Figure D. Select Edit HTML. 5. Find in the text box, and add the following. When done, click Save (fig. E):