How to marry TYPOlight and jQuery
Sometimes you would like to use a cool jQuery script on your website, but TYPOlight uses the MooTools framework by default. It can be switched to jQuery easily, and, believe or not, without loosing lightbox and accordion effects.
While browsing TYPOlight community forums, I bumped into Vera’s tutorial based on the Ruud’s one. I decided to publish it here, because it is easy and many people look for it.
Required file
You need to download a jQuery lightbox script from http://jquery-lightbox.googlecode.com/files/jquery-lightbox.zip.
File location
The downloaded lightbox files go into: /typolight_root/plugins/jquery/lightbox
Template change
Copy /typolight_root/system/modules/frontend/templates/fe_page.tpl into /typolight_root/templates. Changes you make to this file will be used instead of the original.
Edit the file and look for the mootools scripts which we’ll remove or comment out to be sure. So comment out or remove the following two lines (14,15):
<meta name="description" content="<?php echo $this->description; ?>" /> <meta name="keywords" content="<?php echo $this->keywords; ?>" /> <?php echo $this->robots; ?> <?php echo $this->framework; ?> <?php echo $this->stylesheets; ?> <script type="text/javascript" src="plugins/mootools/mootools-core.js"></script> <script type="text/javascript" src="plugins/mootools/mootools-more.js"></script> <?php echo $this->head; ?> </head>
Directly below these two lines add:
<link rel="stylesheet" href="plugins/jquery/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="plugins/jquery/lightbox/jquery.lightbox.js"></script>
<script type="text/javascript" >
// accordion functionality
accordionOpenFirst = true;
accordionSpeed = 'slow';
$(document).ready(function() {
// hide all
$('.ce_accordion .accordion').hide();
// open first accordion item
if ( accordionOpenFirst ) {
$('.ce_accordion:first').find('.toggler').toggleClass('opened').end()
.find('.toggler ~ .accordion').slideDown();
}
// add onclick event for toggler
$('.ce_accordion .toggler').click(function() {
if ( $(this).parent().find('.toggler ~ .accordion').is(":hidden") ) {
$('.toggler ~ .accordion').slideUp(accordionSpeed);
$(this).parent().find('.toggler').toggleClass('opened').end()
.find('.toggler ~ .accordion').slideDown(accordionSpeed);
} else {
$('.toggler ~ .accordion').slideUp(accordionSpeed);
}
});
});
// lightbox functionality
$(document).ready(function(){
$("a[rel*=lightbox]").lightbox();
});
</script>
You might notice that we haven’t downloaded jQuery file. Instead of that, I prefer linking directly to Google. I recommend reading the article 3 reasons why you should let Google host jQuery for you at Encosia.
note: You can also add this code to the page layout under “Additional <head> tags” rather than changing the main template itself. Though it might not work because of the two MooTools lines that are in the default template.
TL backend changes
The only change in the backend is to check if the page layouts include any mootools templates. If so; uncheck them all.
Things to consider
- This code does not include the tablesort, however; Ruud mentions in the original topic he wrote the code for it. So if you need the tablesort, ask him.
- You can take out the accordion code if you do not plan on using it.
- You can also put the code into a js file and include that in the header.
Have fun using jQuery!
This tutorial is based on Vera’s Use jQuery with typolight howto.
About Author
Pisco March 30th
Hi, thanks for your post, but i didn’t find two line in fe_page.tpl but only one: mooScripts; ?>. Can you help me? Thanks
Kamil Kuzminski March 30th
You are right Pisco, the default page template has changed in Contao. I think you could replace that line < ?php echo $this->mooScripts; ?> with above jQuery script. Let me know if it works.
jonaspas April 24th
by the way: great header pic
Add Yours
YOU