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

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

Post on 27-May-2015

1.212 views

Category:

Education

0 download

Embed Size (px)

TRANSCRIPT

  • 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. Aindicates a fact that youd probablywant to be aware of, apoints to the web address of the page (rememberthat these are default URLs, and that you need to substituteyoursiteaddress.com 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 imagedisplayed using SqueezeBox.

2. B. Getting Up & Running1. 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. thefreedictionary.com1. 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 rightbelow the Joomla logo), and select Template Manager (fig. B). Figure B. Select the Template Manager.3. Find the template that has aby its name, and click on thetemplate (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 in the text box, and add the following. When done, click Save (fig. E):Figure E. Add the script right below . 4. If an error appears, saying Could not make the template file writableorCould not make the template file unwritable, please make sure thatfilepermissions are correct. 2. Using SqueezeBox1. For the purposes of this guide, we will make content load usingSqueezebox on the front page of the sample install. Theinstructions below reflect this.2. To modify the front page of the sample install, hover your mouseover Content (on the drop-down menu), and select Front PageManager (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 popupwindow 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. 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.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). 6. Figure J. Image view usingSqueezeBox.Figure K. Page view using SqueezeBox.