Mootools Gallery ZoomBox Plugin

I needed a simple lightweight Mootools Gallery Lightbox, and after a few googles, I found nothing that suited my needs with out all the extra ‘captions’ and grouping and bloat.

This is a simple zoom from start position type lightbox that uses only the Mootools Core version 1.2.4 at this time but should work with 1.3.x

I have used it on the Glass Effects web page which you can view for a demo.

You will notice on my class, I am adding a CSS class ‘shadow’ to the large image, this is used for basic styling and you can do any CSS you want to it. ( or none at all )

Here is how it is built up;


< div id="photos">
	< ul>
		< li>< a href="" class="zoomBox" title="Glass Effects - Painted toi toi image on glass splashback">< img src="" alt="Glass Effects - Painted toi toi image on glass splashback" />< /a>< /li>
		< li>< a href="" class="zoomBox" title="Glass Effects - Uniformed lines on Effects glass splashback">< img src="" alt="Glass Effects - Uniformed lines on Effects glass splashback" />< /a>< /li>
		< li>< a href="" class="zoomBox" title="Glass Effects - Textured Effect splashback using GlassArt colour #25 Iridium">< img src="" alt="Glass Effects - Textured Effect splashback using GlassArt colour #25 Iridium" />< /a>< li>
		< li>< a href="" class="zoomBox" title="Glass Effects - Stencilled Effect – toi toi. GJ Gardner Show Home, Tauranga">< img src="" alt="Glass Effects - Stencilled Effect – toi toi. GJ Gardner Show Home, Tauranga" />< /a>< /li>
		< li>< a href="" class="zoomBox" title="Glass Effects - Painted glass for bar. GlassArt colour #49 Red Red Red">< img src="" alt="Glass Effects - Painted glass for bar. GlassArt colour #49 Red Red Red" />< /a>< /li>
	< /ul>
< /div>

JS ( In Page ):

window.addEvent('domready', function() {

	/* Any other JS needed for your page */
	var myZoomBox = new zoomBox();

	/* to set options */
	var myZoomBox = new zoomBox({
		zb_class:     '.mootools-ftw',
		zb_element:   'big_image',
		zb_loader:    './loading.gif'


ZoomBox Class:

// Create the Mootools ZoomBox Class
var zoomBox = new Class({
	Implements : Options,
	// Editable Settings
    options: {
		zb_class:     '.zoomBox',                    // class of anchors/images to find on page.
		zb_element:   'zb_image',                    // id of zppmBox pop-up div
		zb_loader:    '/assets/images/loading.gif',  // path to loading image
		scale_image:  true,                          // scale large image if it is bigger than our screen size, bool true/false
		win_width:    1024,                          // basic window width, ignore
		win_height:   768                            // basic window height, ignore

	initialize: function(options){
		// set options and internal settings
		this.images = new Array();
		this.positions = new Array();
		// create our loading image
		this.zb_loading = new Element('img', { 
			'id'    : 'zb_loading', 
			'src'   : this.options.zb_loader,
			'styles': { 
				'position': 'absolute',
				'display' : 'none',
				'left'    : 0,
				'top'     : 0
		}).inject(document.body, 'bottom');

		// scan page for our class.
		this.thumbs = $$(this.options.zb_class);
		var self = this;
		// attach each image.
		this.thumbs.each(function(zb, index) {
			self.attach(zb, index);
		// add event listener if the user resizes their window to scale max size of images.
		window.addEvent('resize', self.setWindowSize.bindWithEvent(this));
	// attach out image and add event listeners.
	attach: function(zb, index) {
		var self     = this;
		// is we manually attach a new element this is needed.
		if(index == undefined) {
			index = (self.length + 1);
		// set our basic width/heights.
		var zb_fx;
		var zb_src   = zb.get('href');
		var zb_org   = zb.getElements('img')[0];
		self.positions[index] = {};
		self.positions[index].zb_left = zb_org.getPosition().x;
		self.positions[index].zb_top  = zb_org.getPosition().y;
		// add out click event.
		zb.addEvent('click', function(clk) {
			new Event(clk).stop();
			// no point opening it, if its already open !
			if(! || !'src').match(zb.get('href'))) {
				// add out loading gif to the image about to be opened.
					'display' : '',
					'top'     : self.positions[index].zb_top,
					'left'    : self.positions[index].zb_left
				// if we have one open, let it be gone
				if( {
				// set current index.
				self.currentIndex = index;
				// create and place on top of the thumbnail. but keep it hidden.
				self.images[index] = new Element('img', { 
					'id'    : self.options.zb_element, 
					'src'   : zb_src,
					'styles': { 
						'position': 'absolute',
						'opacity' : 0,
						'left'    : self.positions[index].zb_left,
						'top'     : self.positions[index].zb_top
				.addClass('shadow') // we don't need this. but its basic styling for large image.
				.inject(document.body, 'bottom') // inject at teh bottom of our page.
				.addEvent('click', function(clk) {
					// bind out close even on clicking the new large image
					new Event(clk).stop();
				// bind a load event so once the large image has loaded, we open it.
				.addEvent('load', function() {
					// get our large image size
					var zb_width  = self.images[index].getWidth();
					var zb_height = self.images[index].getHeight();
					// see if we need to scale it, so the image fits on screen.
					if(self.options.scale_image) {
						if(self.options.win_width < zb_width) {
							zb_width  = (self.options.win_width - 50);
							zb_height = (zb_width / zb_height) * zb_width;
						if(self.options.win_height < zb_height) {
							zb_height = Math.floor(self.options.win_height - 50);
							zb_width  = Math.floor((zb_height / zb_width) * zb_height);
					// set the imahe the size of the thumbnail
						'width'   : zb_org.getWidth(),
						'height'  : zb_org.getHeight(),
						'cursor'  : 'pointer'
					// hide teh loading gif/indicator 
					self.zb_loading.setStyle('display', 'none');
					// animate it BIG ! and center it on the screen
					var zb_fx = new Fx.Morph(self.images[index]).start({
						'top'     : ((self.options.win_height / 2) - (zb_height / 2)) + window.getScroll().y,
						'left'    : ((self.options.win_width / 2) - (zb_width / 2)),
						'width'   : zb_width,
						'height'  : zb_height,
						'opacity' : 1
			} else {
				// we have used it before, lets load it up.
			// bind the 'escape' key to close the current image.
			window.addEvent('keyup', function(key) {
				if(key.code == 27) {
	close: function(index) {
		var self = this;
		var zb_fx = new Fx.Morph(self.images[index], { 
			onComplete: function() {
			'top'     : self.positions[index].zb_top,
			'left'    : self.positions[index].zb_left,
			'width'   : 100,
			'height'  : 100,
			'opacity' : 0
	setWindowSize: function() {
		this.options.win_width = window.getWidth();
		this.options.win_height = window.getHeight();

Download the Full Script:
[download id="11"]

Using Mootools Request.HTML response Javascript using $exec

Javascript frameworks are great, no matter which one you use their all built to do more, quickly.

I use Mootools for most of my JS needs, and something is I often use is the AJAX request functionality.

Today I needed to send not only HTML back, but Javascript.

Here are the steps I needed to follow to not only return my Javascript, but to attach it to my response with the Mootools function ‘$exec’



My Mootoold Javascript


Our Request Handler PHP script

< ?php


	$response = mysql_get_data_function($_GET);



Final Response

After running this ‘update’ script, we will have displayed information based on our GET data in the div ‘container’, removed our update link, shown a success message, and styled everything with out response javascript, all thanks to our nifty Mootools $exec function.

Non-Ascii charactors in my AJAX responses !?

A while ago, I co-wrote a large site with Ryan while I was working at Zipline Interactive, this site uses Mootools 0.98 as we found to be getting a lot of �������� all through the JAX requested response code.

For the life of US, we couldn’t figure out why? it’s not in the output if we called the data via a normal http request, so I looked for a fix.

  1. Upgrade the Mootools to version 1.2.2
  2. Add an enc type to the AJAX functions
    	new Request.HTML({
    		method: 'get',
    		url: '/examples/ajax.php',
    		data: { 'example': 'ajax-ascii' },
    		encoding: 'iso-8859-1',
    		onRequest: function() {
    			$('calendarMainEvent').set('html', 'Loading');
    		onComplete: function(responseTree, responseElements, responseHTML, responseJavaScript) {
    			$('calendarMainEvent').empty().set('html', responseHTML);
    		onFailure: function() {
  3. Specifying the charset in the PHP that is outputting the AJAX response!

    < ?php
    if($_GET['ajax_request']) {
    header('Content-Type: text/html; charset=iso-8859-1');

    Success'); /* More output code */ }

Matching the Character set

It didn’t occur to me right away that I need to specify the charset more than just in the <head> section of the page, but that was all it took.

Of course you want to match your PHP header, Javascript encoding and xHTML charsets all to the same with it is iso-xxx or utf-xx

JT Photography & Minishowcase Gallery

On friday afternoon I was online chatting with a friend who I have recently converted in to getting a mac, now she has one she is busy letting other people now the benefits of a mac. We often talk, and we were talking about some pretty neat photos she had taken lately and said that she wanted a website for them, but didn’t know how and asked for my help.

5 minutes later, she decided on a domain name and it was brought at Go Daddy, 5 minutes after that I set up space on my server and we now have

The photos currently on there are a couple of quick temporary photos until we decided what she wanted, and built up a system.

I started planning out building a system, and after some searching found a prebuilt system called “minishowcase : the super-easy gallery by Jess Thompson Photography soon it will be using the new gallery system and I will release the Administration plugin for free usage once it has been tested more.

Jess Thompson Photography
Jess Thompson Photography