Add Mootool’s Squeezebox functionality to your Joomla template

Joomla uses Mootools as a Javascript framework by default, and also has a light-box effect called Squeezebox built in by default. It’s quite easy to add Squeezebox functionality to your Joomla template.
In the index.php file of your template, find the head tag and insert this code:
<?php JHTML::_('behavior.mootools'); ?>

That will output this code:

<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() {
SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
// -->
</script>

Then make some xhtml such as this:
<p><a class="modal" rel="{handler:'iframe',size:{x:840,y:550}}" href="http://google.com">TEST</a></p>

You should see a popup with the google homepage in it. Checkout the Squeezebox page for more info.

No Comments

rssComments RSS   transmitTrackBack Identifier URI

No comments. Be the first.

addLeave a comment