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: Select all
<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: Select all
<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>
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.
- TL might change, I tested this with TL 2.8
Have fun using jQuery!
