Loading...
Getting JQuery running on MediaWiki
As a knowledge management and distribution tool, MediaWiki is pretty cool. It allows the creation of rich libraries of knowledge on any topic, fed directly by contributors and users alike. For developers, it is a godsend as it's simply a matter of implemententing the framework and then opening the doors to the writers to fill in the content with very little specialist knowledge required. It's all very, very good.
You know there's a "but" coming don't you? Yes, you do...
BUT...
It's not exactly beautiful is it. I mean, let's face it, MonoBook is bu-hut ugly! In addition, funtionality-wise, it's pretty flat. That's fine, as far as it goes, but it would be awesome to be able to bring an online knowledge library into the same design framework of the site that it's relating to and give it the same kind of functionality, wouldn't it? You've spent a lot of time on that nifty jquery navigation system and it really should be represented over on the wiki site too, shouldn't it? There's an upcoming article on hacking and slashing a theme into mediawiki for the developer in a rush, but today, I thought we'd have a little look at how to get that jquery goodness running on the mediawiki system.
First a big shout out to hoggwild over at mwusers.com for his post here, that got me off the ground. Shot, dude.
Loading jquery
So the most important thing to understand is that, in MediaWiki, is that everything seems to have it's place. It's not enough to just upload the script, reference it and off you go. There's a file structure that needs to be adhered to. The two directories we're going to be concerned with here are the extensions (wiki.yoursite.com/extensions) and skins (wiki.yoursite.com/skins).
Your extensions directory will contain everything necessary to extend (well, duh!) your MediaWiki implementation. It is in here that you should create a folder called jquery (so you have wiki.yoursite.com/extensions/jquery) to save all your js files into. Now MediaWiki will know what to do with your code. hoggwild suggested copying the jquery library and your implementation files here, but I've found that you just need you implementation files and link to the engine seperately (see below). Once you've uploaded your file into the jquery directory, it's time to update the template file.
Open up the skins folder. You'll see a list of php files, each one conveniently named with the skin names. If you know the name of the skin you're using, just track down the php file that corresponds to that name and open it. For eg, if you're running MonoBook, you'll open MonoBook.php. If you're unsure of the skin you're using have a look at the BODY tag in the source code, it should have a class name included of "skin-<yourskinname>" For eg:
<body class="mediawiki ltr ns-0 ns-subject page-Main_Page skin-monobook">
Once you have the template file open, DON'T FREAK OUT! It's full of interesting php stuff that can be pretty daunting, but the HTML elements we need are still there: they're just a bit hidden. Scan down all the code until you find the closing body tag </body> (Personally I use the find and replace function for this - much quicker). Just before the closing BODY tag then, write in your links to the jquery scripts, making sure you reference them from the root of the site:
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>|
<script language="javascript" type="text/javascript" src="/extensions/jquery/jQ.js"></script>
As you'll see, I'm not using a local copy of jquery, but the one stored over at Google script repository. This just makes life a little easier as you don't have to worry about keeping up with any new versions. Visit http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery to pick up the most recent link. Handy. But if you don't want to do this, simply make sure you copy the jquery engine into the same extensions/jquery folder and reference it accordingly.
<script language="javascript" type="text/javascript" src="/extensions/jquery/jquery-1.3.min.js"></script>
<script language="javascript" type="text/javascript" src="/extensions/jquery/jQ.js"></script>
There's a school of thought that recommends putting the jquery references in the <head> section of the HTML, but I think it's better to have it load last, as the DOM is fully loaded by the time the jquery is called into play and therefore it's performance is a bit better.
And that's it. Done and dusted. All your nifty jquery scripts should run perfectly now.
Implementing plugins
The beauty of jquery is that it has all these nifty plugins already written by clever people out there on the internet who are a lot brainier than I am. So how do we go about getting those to work in MediaWiki. I'll use the fantastic plugin Lightbox to give you an example of how to do this.
It all works out of that jquery folder we made earlier. Download the source files from the lightbox site (http://leandrovieira.com/projects/jquery/lightbox/) and extract them to a folder on your local server. Now, make a folder inside your /extensions/jquery/ folder called lightbox and copy into there the css, images and js folders from the extracted folder.
Now you need to reference the js script at the bottom of your php file as you did with your previous jquery files
<script language="javascript" type="text/javascript" src="/extensions/jquery/jquery-1.3.min.js"></script>|
<script language="javascript" type="text/javascript" src="/extensions/jquery/lightbox/js/jquery.lightbox-0.5.min.js"></script>
<script language="javascript" type="text/javascript" src="/extensions/jquery/jQ.js"></script>
Note that (a) the path is reflective of where the file lives relative to the site root and (b) that is loaded before the custom jquery script. This is important, as you will be putting calls into this script file to make the lightbox work and you will need all of the functions and objects loaded first.
Now you will need to reference the CSS for the plugin. Make a simple link as you would normally do in the <head> section of your php template file
<link rel="stylesheet" type="text/css" href="/extensions/jquery/lightbox/css/jquery.lightbox-0.5.css" media="screen" />
As before, simply type</head> into your find/replace utility to find the end of the head section in amoungst all that php, and drop in the link. Also make sure that it's referenced to the correct place in the file structure.
The penultimate step is to open up that jquery file jQ.js and write in the jquery code that's going to make all this work. Taken from the Lightbox site, the following code describes how to link to the images in the DOM that you want to display:
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
> // ... The possibility are many. Use your creative or choose one in the examples above
});
Select the method above that most suits you and upload the file to the extensions/jquery directory.
There's just one final thing to do. You have to dig into the actual js code of the plugin to adjust the paths to the images used by the plugin; a pity as you will need to do this again should you ever upgrade this plugin. Unfortunately it's unavoidable as you need to tell the javascript that it needs to start looking from the site root to find the images it requires. Go through the code and find all 'images/' references and append '/extensions/jquery/lightbox/'. So, for eg:
imageLoading: 'images/lightbox-ico-loading.gif'
becomes
imageLoading:'/extensions/jquery/lightbox/images/lightbox-ico-loading.gif'
Now upload that file into the js folder, overwriting the original. And that's it! head over to your wiki site and bask in the jquery goodness flowing from your browser!
So it's quite easy to get your MediaWiki site to emulate the rest of your site in the functionality of custom built navigation menus or proprietary/third party plugins. All you have to remember is (a) where to put the files, (b) where to modify the template and (c) to make sure that all links are relative to the site root. Do that, and you should be laughing!
I hope you enjoyed this article and that it will help you in developing your own projects. Debate and free speech is the foundation of the internet, so if you have something to add (or if you think I'm speaking so much balloon juice) leave us a comment below.
PS If you want a working example of the technique above, head over to our wiki for the Vulani site: http://wiki.vulani.net
Help
What is the jQ.js file? I can't seem to locate it, i made a jQ.js file and posted in the code
$('#gallery a').lightBox(); // Select all links in object with gallery ID
it still doesn't worjk.
re: Help
The file I was referring to there (and re-reading the article, I didn’t make it that clear) is one you create yourself to hook the jquery code onto the image or link elements that need to display the lightbox when clicked.
So once you have all the plugin code in place, open a text editor (or some such) and create a new external javascript file (.js) – you can call it anything you want – jQ is just my naming convention.
Into that then, you place the code:
$(function () {
$(‘’).lightBox();
});
If, like me, all the images on your page have an anchor link with class .thumb, then your selector code would look like:
$(‘a.thumb’).lightBox();
Then just make sure that your newly created file lives in your /extensions/jquery/ folder and is referenced correctly and you should be set.
Hope this helps dude!
Post new comment