phatfusion

multiBox

version 1.3.2

lightbox that supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe

features

supports a range of multimedia formats.
auto detects format or you can specify the format.
supports html descriptions.

basic example

advanced example

This is an HTML description
photos by Aaron Birch

flv example
mov example
wmv example
real example
mp3 example
iframe example
ajax example
HTML element example

This is a snipet of html.

list item 1
list item 2

usage

add these javascript files to your page


	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
	<script type="text/javascript" src="/js/overlay.js"></script>
	<script type="text/javascript" src="/js/assets.js"></script>
	<script type="text/javascript" src="/js/multibox.js"></script>

create your links like this


	<a href="/myBigImage.jpg" class="mb" title="example title a"><img src="/mySmallImage.jpg" border="0"></a>

initialize the script like this


	window.addEvent('domready', function(){
	    var overlay = new overlay();
		var box = new multiBox('mb', {
			overlay: overlay
		});
	});

requirements:

mootools v1.2 core
mootools v1.2 more - assets
phatfusion - overlay

API

syntax:

var box = new multiBox(className [, options]);

arguments:

className - (string)
options - (object, optional)

options:

initialWidth: (number) the width of the box when it first opens while loading the item. Default: 250
initialHeight: (number) the width of the box when it first opens while loading the item. Default: 250
container: (element) the element that the box will take it coordinates from. Default: document.body
contentColor: (string) the color of the content area inside the box. Default: #FFF
showNumbers: (boolean) show the number of the item e.g. 2/10. Default: true
showControls: (boolean) show the navigation controls. Default: true
descClassName: (string) the classname of the divs that contain the description for the item. Default: false
descMinWidth: (number) the min width of the description text, useful when the item is small. Default: 400
descMaxWidth: (number) the max width of the description text, so it can wrap to multiple lines instead of being on a long single line. Useful when the item is large. Default: 600
movieWidth: (number) the default width of the box that contains content of a movie type. Default: 400
movieHeight: (number) the default height of the box that contains content of a movie type. Default: 300
offset: (object) containing x & y coords that adjust the positioning of the box. Default: {x:0, y:0}
fixedTop: (number) gives the box a fixed top position relative to the container. Default: false
path: (string) location of the resources files, e.g. flv player, etc. Default: 'files/'
openFromLink: (boolean) opens the box relative to the link location. Default: true

events:

onOpen: function to call when the box opens.
onClose: function to call when the box closes.

methods:

create

arguments:

path - (string) location of the media item
options - (object, optional)

options:

title: (string)
description: (string)
width: (number) the width of the box. (not used for images)
height: (number) the height of the box. (not used for images)
type: (number) force the media type, e.g. image or html
ajax: load the html content in via ajax.

returns:

(object) a new multiBox instance.