December 8th, 2009 › Javascript, Joomla, Mootools, Notes, Squeezebox, Templates › admin ›
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'); ?>
<?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>
<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>
<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
Comments RSS TrackBack Identifier URI
No comments. Be the first.
Leave a comment
Name (required)
Mail (will not be published) (required)
Website
Your comment