Sie sind auf Seite 1von 6

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 with the actual address), and an indicates something to
watch out for. In addition, code will be displayed using a separate font, Courier

Figure A. An sample image

displayed using SqueezeBox.
B. Getting Up & Running

1. 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.

1. Login to the Joomla! Administrator Back-end.

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 by its name, and click on the
template (fig. C).

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 <head><jdoc:include type="head" /> in the text box, and add the
following. When done, click Save (fig. E):

<script type="text/javascript" src="<?php echo $this->baseurl ?

>/media/system/js/modal.js"> </script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?
>/media/system/css/modal.css" type="text/css" />
<script type="text/javascript">
// <!--
window.addEvent('domready', function(){ var JTooltips = new
Tips($$('.hasTip'), { maxTitleChars: 50, fixed: 'false'}); });
// -->
<script type="text/javascript">
// <!--
window.addEvent('domready', function() {
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
// -->

Figure E. Add the script right below <head><jdoc:include type="head" />.

If an error appears, saying “Could not make the template file writable”
or “Could not make the template file unwritable,” please make sure that
file permissions are correct.

2. Using SqueezeBox

1. For the purposes of this guide, we will make content load using
Squeezebox on the front page of the sample install. The
instructions below reflect this.

2. To modify the front page of the sample install, hover your mouse
over “Content” (on the drop-down menu), and select “Front Page
Manager” (fig. F).

Figure F. Select the “Front Page Manager.”

3. Click on the article “Welcome to Joomla” (fig. G).

Figure G. Click on the article “Welcome to Joomla.”

4. Click on the icon “HTML” to edit the HTML source (fig. H). A popup
window should appear (fig. I).
Figure H. Click on “HTML.”

Figure I. A popup window appears.

5. Following the corresponding instructions for the type of content you

would like to add; 5.1 and 5.2 correspond to adding an image, adding a
webpage, and adding a photo gallery.

5.1) If you would like to add an image, insert it in the following

format, filling in the fields location, caption, and description.
<a rel="SqueezeBox" href="location" title="caption" class="modal">
<img src="location" alt="description" title="caption" /></a>

5.2) If you would like to add a webpage, insert it in the following

format, filling in the fields width (ex. 800), height (ex. 600), address,
and link name.

<a rel="{handler: 'iframe', size: {x: width, y: height}}" href="address"

class="modal">link name</a>

6. When done, click “Update” on the popup box, then click “Save” on
the webpage in the upper right hand corner.

7. Navigate back to the Joomla! index page, and click on the

images/links to view the results (fig. J, fig. K).
Figure J. Image view using
SqueezeBox. Figure K. Page view using SqueezeBox.