My MediaWiki extension, FancyBoxThumbs, has been completely rewritten from the ground up and has been released. This extension makes use of, and provides functionality for using the fancyBox JQuery lightbox plugin. The default behavior of MediaWiki is to take you to a dedicated image page when a thumbnail is clicked, which is less than ideal for user friendliness in most situations.
Resource Loader
This new version takes full advantage of MediaWiki’s Resource Loader which makes the loading of CSS and JS much more optimized. I did end up using a line of addInlineScript which appears to be depreciated but I haven’t been able to determine the best way around it. Resource Loader—as far as I can tell—doesn’t provide a way to write to JavaScript using PHP variables, which is what I needed to accomplish in order to allow custom fancyBox options.
Better URL rewrite
In order for fancyBox to work with MediaWiki, the URL of the thumbnail link needs to be rewritten to link to the full-size image rather than the File page. There doesn’t appear to be an easy way to accomplish this using the MediaWiki API, especially with the use of hashed image URLs being the default setting. The easiest way to accomplish this rewrite is to use JQuery to parse the existing URL and determine what the new one should be.
Previous versions of this extension did a whole lot of string parsing to deconstruct and reassemble the URL. This time I decided to split the URL into an array and manipulate each part individually. This made for much cleaner code and much more reliable parsing. The final result works great….until MediaWiki changes their URL structure 😉
fancyBox version Upgrade
Until now, the extension was using fancyBox version 1.3, but now takes full advantage of their version 2.0. The only problem with this is that fancyBox v2.0 has a different license which requires you to pay if using for commercial purposes. I have used fancyBox on many projects and find it to be a great product. If you do use this extension for commercial purposes, please consider dropping a few bucks.
fancyBox Options
Previously, I provided a few hard coded options to the fancyBox object. As mentioned above, version 2.0 allows you to set your own options in the LocalSettings.php file. To do this, simply specify your options as a JSON string in a $fbtFancyBoxOptions variable after enabling the plugin.
require_once("$IP/extensions/FancyBoxThumbs/FancyBoxThumbs.php");
$fbtFancyBoxOptions = '{"openEffect":"elastic","closeEffect":"elastic","helpers":{"title":{"type":"inside"}}}';
Repo
This extension is an open source project found at github.com/gilluminate/FancyBoxThumbs. I welcome and encourage comments and pull requests if you find things aren’t working for you or you would like to contribute in any way.