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:

API

syntax:

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

arguments:

  1. className - (string)
  2. 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:

  1. path - (string) location of the media item
  2. 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: