Embed Size (px)
Citation preview
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.
1. Login to the Joomla! Administrator Back-end.
2. Hover your mouse over “Extensions” (on the drop-down menu right below the Joomla logo), and select “Template Manager” (fig. B).
3. Find the template that has a by its name, and click on the template (fig. C).
The default username is admin.
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
Figure B. Select the Template Manager.
Figure C. Select the default template.
http://www.yoursiteaddress.com/administrator
4. In the top right-hand corner, click “Edit HTML.” (fig. D). A page with a text box in the middle should load.
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><script type="text/javascript">
// <!-- window.addEvent('domready', function() { SqueezeBox.initialize({}); $$('a.modal').each(function(el) { el.addEvent('click', function(e) { new Event(e).stop(); SqueezeBox.fromElement(el); }); }); });
// --></script>
Figure E. Add the script right below <head><jdoc:include type="head" />.
Figure D. Select “Edit HTML.”
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).
3. Click on the article “Welcome to Joomla” (fig. G).
4. Click on the icon “HTML” to edit the HTML source (fig. H). A popup window should appear (fig. I).
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.
Figure F. Select the “Front Page Manager.”
Figure G. Click on the article “Welcome to Joomla.”
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.
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.
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 I. A popup window appears.
Figure H. Click on “HTML.”
<a rel="{handler: 'iframe', size: {x: width, y: height}}" href="address" class="modal">link name</a>
<a rel="SqueezeBox" href="location" title="caption" class="modal"><img src="location" alt="description" title="caption" /></a>
Figure J. Image view using SqueezeBox. Figure K. Page view using SqueezeBox.
