Use jQuery with typolight howto
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!
Re: Use jQuery with typolight howto
Excellent Vera. Thank you very much. :D
Re: Use jQuery with typolight howto
Thanks for putting this tutorial together, Vera. I think many people will find it helpful, especially since you've consolidated all the info into one place.
Re: Use jQuery with typolight howto
I just wanted to say that jquery 1.4.2 seems to have a bug in the attribute selector. If the selector for attributes contains a dot (ex a[href*=typolight.org]) then this seems to be a problem.
There are two versions of the lightbox script, both claim version nr 0.5 and both claim the same creation date in the comments. If you have the one that around line 412 has a line similar to the one I wrote down below, then you should alter that line...
I changed line 412 in the lightbox js file into the following to make it work as originally designed:
var src = $("script[src*='jquery.lightbox.js']").first().attr('src')
Re: Use jQuery with typolight howto
Im totally new on Typolight, so just to be sure...
I have to inactivate Mootools in order to activate jQuery?
Re: Use jQuery with typolight howto
No - you don't have to get rid of mootools to get jQuery working. I use the 2 libraries at the same time quite often.
Re: Use jQuery with typolight howto
This is great, thanks!
I'm assuming that any jQuery plugin can be used with these same steps. I plan on trying this with a different jQuery plugin (ad-gallery).
Re: Use jQuery with typolight howto
The only thing you have to remember is to load the Mootools library first and then jQuery and shift it into the noConflict-Mode :)
Re: Use jQuery with typolight howto
Vera:
Thanks for taking the time to post this tutorial, it is very helpful.
It looks like the source code for the light box has moved several times recently, the current code is available as of this post date at GitHub:
http://github.com/krewenki/jquery-lightbox/
Thanks!
Re: Use jQuery with typolight howto
Here is a set of files to get you started with jQuery and HTML5 in Contao really fast:
http://github.com/kahlil/Contao-CMS-HTM ... ith-jQuery
Re: Use jQuery with typolight howto
Re: Use jQuery with typolight howto
Thank for share.. i'm a newbiu. I learning contao. I think, you have provide demo or screenshoot.
