Your SlideShare is downloading. ×
Joomla v-15-squeezebox-in-your-joomla-website
Joomla v-15-squeezebox-in-your-joomla-website
Joomla v-15-squeezebox-in-your-joomla-website
Joomla v-15-squeezebox-in-your-joomla-website
Joomla v-15-squeezebox-in-your-joomla-website
Joomla v-15-squeezebox-in-your-joomla-website
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Joomla v-15-squeezebox-in-your-joomla-website


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. A. What is SqueezeBox? SqueezeBox is Joomlas implementation of Lightbox, a Javascriptapplication designed to display content using transparent boxes (fig. A) in anelegant 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 sametime and that tooltips break when SqueezeBox is being used. Also, SqueezeBoxcurrently cannot display an image gallery. Although setup may seem slightlycomplicated at first, this guide will provide you with everything you will need tosetup SqueezeBox. In order to get the desired results, you need to know basicHTML and use Joomla 1.5RC4 or later. The content in this guide is based off ofthe 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 throughoutthis guide to emphasize specific facts. A indicates a fact that youd probablywant to be aware of, a points to the web address of the page (rememberthat these are default URLs, and that you need to with the actual address), and an indicates something towatch out for. In addition, code will be displayed using a separate font, CourierNew. Figure A. An sample image displayed using SqueezeBox.
  • 2. B. Getting Up & Running 1. Setup The easiest method to setup SqueezeBox is to have it load on everywebpage, in case you might need it. To do so, youll need to modify Joomlasdefault 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.
  • 3. 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 = newTips($$(.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" />.
  • 4. 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).
  • 5. 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).
  • 6. Figure J. Image view usingSqueezeBox. Figure K. Page view using SqueezeBox.