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;
HTML:
< div id="photos">
< ul>
< li>< a href="http://www.glasseffects.co.nz/assets/volume1/2_large.jpg" class="zoomBox" title="Glass Effects - Painted toi toi image on glass splashback">< img src="http://www.glasseffects.co.nz/assets/volume1/2_small.jpg" alt="Glass Effects - Painted toi toi image on glass splashback" />< /a>< /li>
< li>< a href="http://www.glasseffects.co.nz/assets/volume1/3_large.jpg" class="zoomBox" title="Glass Effects - Uniformed lines on Effects glass splashback">< img src="http://www.glasseffects.co.nz/assets/volume1/3_small.jpg" alt="Glass Effects - Uniformed lines on Effects glass splashback" />< /a>< /li>
< li>< a href="http://www.glasseffects.co.nz/assets/volume1/5_large.jpg" class="zoomBox" title="Glass Effects - Textured Effect splashback using GlassArt colour #25 Iridium">< img src="http://www.glasseffects.co.nz/assets/volume1/5_small.jpg" alt="Glass Effects - Textured Effect splashback using GlassArt colour #25 Iridium" />< /a>< li>
< li>< a href="http://www.glasseffects.co.nz/assets/volume1/6_large.jpg" class="zoomBox" title="Glass Effects - Stencilled Effect – toi toi. GJ Gardner Show Home, Tauranga">< img src="http://www.glasseffects.co.nz/assets/volume1/6_small.jpg" alt="Glass Effects - Stencilled Effect – toi toi. GJ Gardner Show Home, Tauranga" />< /a>< /li>
< li>< a href="http://www.glasseffects.co.nz/assets/volume1/7_large.jpg" class="zoomBox" title="Glass Effects - Painted glass for bar. GlassArt colour #49 Red Red Red">< img src="http://www.glasseffects.co.nz/assets/volume1/7_small.jpg" 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.setOptions(options);
this.setWindowSize();
this.currentIndex;
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(!document.id(self.options.zb_element) || !document.id(self.options.zb_element).get('src').match(zb.get('href'))) {
// add out loading gif to the image about to be opened.
self.zb_loading.setStyles({
'display' : '',
'top' : self.positions[index].zb_top,
'left' : self.positions[index].zb_left
});
// if we have one open, let it be gone
if(document.id(self.options.zb_element)) {
self.close(self.currentIndex);
}
// 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();
self.close(index);
})
// 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
self.images[index].setStyles({
'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.
self.images[index].fireEvent('load');
}
// bind the 'escape' key to close the current image.
window.addEvent('keyup', function(key) {
if(key.code == 27) {
self.close(index);
}
});
});
},
close: function(index) {
var self = this;
var zb_fx = new Fx.Morph(self.images[index], {
onComplete: function() {
document.id(self.options.zb_element)
.fade(0)
.dispose();
}
}).start({
'top' : self.positions[index].zb_top,
'left' : self.positions[index].zb_left,
'width' : 100,
'height' : 100,
'opacity' : 0
});
window.removeEvents('keyup');
},
setWindowSize: function() {
this.options.win_width = window.getWidth();
this.options.win_height = window.getHeight();
}
});
Download the Full Script:
[download id="11"]