First of; I'm talking about replacing mootools in the FE. The backend integrated mootools very heavily and I'm not feeling like replacing it even though I am certain jQuery needs a fraction of the coding that mootools did (just a guess though)

I just replaced the mootools slimbox by a jquery equivalent on one of my new projects (I had 4 to choose from, just choose one of them). It was pretty easy and it involves little js code. This is how I did it:

I added the following code to the head section (and commented out all mootools js to be sure):

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" >
	$(document).ready(function(){
		$("a[rel*=lightbox]").lightbox();
	});
</script>

That's it.

You need to download some files to make it work as well. Download them to the location you use in the html code.
jQuery from http://www.jQuery.com
the lightbox from http://warren.mesozen.com/jquery-lightbox/

I think I found three reasons for mootools to exist on the frontend; slimbox, tablesort and accordion. perhaps there are more, I have no idea what tablesort does. But it was easy to replace the first by jQuery. I've seen accordion plugins for jQuery, so that should be do-able as well.

Tablesort remaining... What is that?

Is anyone interested in (me) doing some more replacement work? Of course it is easiest to just stick with mootools if you are not going to use any other functionality of jQuery. But otherwise at least it seems switching is an option.

I ammended the original jquery.lightbox.js file so it can be used without broken images in the folder I suggested. at line 411 add:

Code:

	
var src = $('script[src*=jquery.lightbox.js]:first').attr('src');
var baseurl = src.substring(0, src.indexOf('jquery.lightbox.js'));

The script will then find it's own url inside the html file and use that to find the missing images.

Hi ruud,

I didn´t test it yet, but your HowTo could be a welcome contribution for the tutorials-section!

regards,
w3scout

I don't want to put it htere without knowing if anybody is actually interested But if people think this is usefull (besides myself) the I'll put it in there...

Hi Ruud

Having used Thickbox which is based on Jquery for a site I would be happy to see JQuery integration.

Cheers,

Fred

I'll try to see if the other two can be replaced as well. Probably so as the typolight output will be valid xhtml which has to be affected by mootools, so why couldn't jQuery But it will take a week or so at least (very little time)

can someone tell me what tablesort is/does?

Hi Ruud, it simply makes each column of a table sortable, ie assuming a you have a column with dates, you could organise the table by date either ascending or descending in order.

Mark

Hi ruud,

I think you know tablesort from the TL backend -> sitelayout editor. Tablesort enables you there to add, sort or remove modules to/from specific template positions.

regards,
w3scout

mark and w3scout, thanks I used jQuery before to create draggable table rows. so I'm sure this'll be posible then as well. But it depends on implementation if it is easy to do.

I'll post again when I've done something...

Here is an update, I added accordion functionality as well. The code got a bit more lengthy then I am used to with jQuery, but I had to use a lot selectors and I did add some extra optionality, it is actually a bit more flexible as it allows to combine any of the three templates you get with typolights mootools templates.

You'll need all the files specified in my first post, but no new ones; this is done with core jQuery functionality.

Here is the code for a jQuery equivalent of a lightbox and the accordion:

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>

The code could probably be shorter, certainly if you'd like to drop some functionality. But it'll work just fine like this, it is not that bad.

You can specify if the first element should open from the start,
You can set different styles for the toggler depending on whether it is opened or not using css

Code:

.opened { color: red !important; }

 

That's all!!

Extra functionality example:
You could make the first accordion element opened right from the start without animation (which is not in the typolight original). I can imagine having an element animated every time a page loads could be unwanted, however having one opened from the start could be a pre.

This code adds the configurable option:

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;
	accordionAnimatedOpenFirst = true;
	accordionSpeed = 'slow';
	$(document).ready(function() {
		// hide all
		$('.ce_accordion .accordion').hide();

		// open first accordion item
		if ( accordionOpenFirst && accordionAnimatedOpenFirst ) {
			$('.ce_accordion:first').find('.toggler').toggleClass('opened').end()
						.find('.toggler ~ .accordion').slideDown(accordionSpeed);
		} else if ( accordionOpenFirst ) {
			$('.ce_accordion:first').find('.toggler').toggleClass('opened').end()
						.find('.toggler ~ .accordion').show();
		} 

		// 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>

If you'd set accordionAnimatedOpenFirst = false, then the first item will be opened right away, without animation. For the rest this code functions exactly the same as the above.

I perhaps should also mention that I am aware of the existing jQuery UI accordion extention. But I didn't use it because I thought just doing the code like this would be shorter if I was only doing a typolight mootools replacement. If you'd like advanced options as well as more smooth transitions (it uses the easing extention) you could implement this extention, it should be fairly easy. (load two more javascript files and initialize.) Probably only two lines of code in total. You can get it of the jQuery website. More details: http://docs.jquery.com/UI/Accordion

I also got tablesort working with jQuery, including the cookie part. It requires 3 extra files. But it isn't completely done yet. I still have to sort out the header images which the sort plugin does have in the demo but it isn't quite showing yet in my version. I'll post it here and then look at making that wiki entry.

Just out of curiosity: Is someone planning on using the code??
(because I'm not using tablesort or accordion myself at the moment)

Leo,

Is there a way to get typolight to provide a choice for either mootools or jQuery in the frontend? My code can be improved upon, I'm just demonstrating how it could be done, but it is very usable. Or don't you see any advantage in offering both (like there is a choice pdf). I read that you concider jQuery for tl3, so at least eventually I might get it in standard

HI

I would very much like to have the jquery-virtual-tour in Typolight as well and therefor hope you can get jQuery to work. Please set up a tutorial as soon as possible.

seaneble

If you do not use sorttables (sorting tables by clicking on their headers) then the above is a tutorial on how to do it already. It later on gets an addition with the sorting tables added. But I suppose you could wait for that because I have that working as well, including the initial sort column setting and the same cookie system so it'll not break anything might you want to switch. The only things left to do is some grahic work with the icons, and then it is done.

Then that's a complete set of code to replace mootools for as far as I know. Or did I forget something?

HI

yes I know, thank you for replacing, but my question was whether it's possible to have that virtual toor in Typolight, too, may it be a module or in a different way.

seaneble