Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Standard view
Full view
of .
Save to My Library
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
Joomla! v 1.5 Squeezebox in your Joomla! Website

Joomla! v 1.5 Squeezebox in your Joomla! Website



|Views: 47,419 |Likes:
Published by AmyStephen
by ddcc
Google Highly Open Participation Contest
by ddcc
Google Highly Open Participation Contest

More info:

Published by: AmyStephen on Mar 18, 2008
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as ODT, PDF, TXT or read online from Scribd
See more
See less





A. What is SqueezeBox? 
SqueezeBox is Joomla's 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 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 throughoutthis guide to emphasize specific facts. A indicates a fact that you'd probablywant 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 towatch out for. In addition, code will be displayed using a separate font,
.Figure A. An sample imagedisplayed using SqueezeBox.
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, you'll need to modify Joomla'sdefault template. Instructions are provided below.1. Login to the Joomla! Administrator Back-end.2. Hover your mouse over “Extensions” (on the drop-down menu rightbelow the Joomla logo), and select “Template Manager” (fig. B).3. Find the template that has a by its name, and click on thetemplate (fig. C).The default username is
is a preset format used as a starting pointso that the format does not have to be recreated eachtime it is used.
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 atext box in the middle should load.
<head><jdoc:include type="head" />
in the text box, and add thefollowing. 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" />.
Fiure D. Select “Edit HTML.”

Activity (86)

You've already reviewed this. Edit your review.
1 thousand reads
1 hundred reads
Malkesh Sondagar added this note
where can i find SqueezeBox documentation
Sallu Salman liked this
Dan liked this

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->