Joomla! V 1.5 Squeezebox in Your Joomla! Website

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 & 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. 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 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">
// 
</script>
<script type="text/javascript">
// 
</script>
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.

Joomla! V 1.5 Squeezebox in Your Joomla! Website

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Joomla! V 1.5 Squeezebox in Your Joomla! Website

Uploaded by

Copyright:

Available Formats

A. What is SqueezeBox?

SqueezeBox is Joomla's implementation of Lightbox, a Javascript

This guide is designed to be simple and easy to comprehend; as a result,

Figure A. An sample image

The easiest method to setup SqueezeBox is to have it load on every

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

The default username is admin.

Figure B. Select the Template Manager.

Figure C. Select the default template.

Figure D. Select “Edit HTML.”

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

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

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

Figure I. A popup window appears.

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

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

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

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

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

You might also like