More often people ask if jQuery can be used with TYPOlight (instead of Mootools). Because this is possible and even easy to do I wrote this short tutorial based on this original topic
Required files
You need to download some files:
jQuery from http://www.jQuery.com
the lightbox from http://warren.mesozen.com/jquery-lightbox/
I attached the files I used in this tutorial, you'll be sure to have the same files I did when writing this.
If you download the latest jquery release you need to change filenames in the code later on in this tutorial.
File location
The downloaded jquery file needs to be placed in the directory: /typolight_root/plugins/jquery
The lightbox files go into: /typolight_root/plugins/jquery/lightbox
(also see attached file)
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:
Code:
<script type="text/javascript" src="plugins/mootools/mootools-core.js"></script>
<script type="text/javascript" src="plugins/mootools/mootools-more.js"></script>
Directly below these two lines add:
Code:
<link rel="stylesheet" href="plugins/jquery/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="plugins/jquery/jquery-1.2.6.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>
note: You can also add this code to the page layout under "Additional <head> tags" rather the changing the main template itself. Though I haven't tested if this works with 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...[/*:m:k7si90m3]
- You can take out the accordion code if you do not plan on using it.[/*:m:k7si90m3]
- You can also put the code into a js file and include that in the header.[/*:m:k7si90m3]
- TL might change, I tested this with TL 2.8[/*:m:k7si90m3]
Have fun using jQuery!
Use jQuery with typolight howto
Reply With Quote
Bookmarks