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:

  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:

  • (object) a new multiBox instance.

  1. I’m totally not a programmer and I’d love to get this to work. My test thus far only opens the window with the loading animation. No image loads and closing window only removes transparent background. the window remains. Is there a simple trouble shooting solution? Does the Javascript go into the head or the body?

  2. Hi!

    What i need to do to launch MultiBox from Flash (AS3) using ExternalInterface.call()?

    What the syntax of call() would be?
    What i need to include into html file?

      • Samuel
      • January 24th, 2010

      look at the create function within multibox, this allows you to pass in the info need to create a box.

    • Chris Zippo
    • January 24th, 2010

    Hello!

    Help! Cannot find the error. Offline is all fine but on the server only the black frame with the the buttons pops up. But no picture, no action is being recognized and only refreshing the page can set the page back (the box cannot be closed).

    What did I wrong?

      • Samuel
      • January 29th, 2010

      Please can you post a link.

        • chris zippo
        • January 29th, 2010

        Hi Samuel, problem is solved! Thank you for your reply!

          • kombajn
          • January 30th, 2010

          same problem, how did u solve it?

    • Hatem BELHASSINE
    • January 25th, 2010

    Thank you for this plugin. However it’s not working under IE7/8.
    Below the details of the error :

    User Agent : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0)
    Horodateur : Mon, 25 Jan 2010 16:59:21 UTC

    Message : Argument non valide.
    Ligne : 195
    Caractère : 63
    Code : 0
    URI : http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js

    Message : ‘this.contentEffects’ a la valeur Null ou n’est pas un objet.
    Ligne : 552
    Caractère : 3
    Code : 0
    URI : http://www.phatfusion.net/_common/js/Interface/multibox.js

    Best Regards

  3. I figured out the conflict I was having. “Assets.js” was not Capped in the code provided, and the java is case-sensitive, so I was getting a an empty box and the loading animation until I corrected the code.

      • Samuel
      • January 29th, 2010

      Thanks Ryan, the download has been updated.

    • Hatem BELHASSINE
    • January 26th, 2010

    I’ve corrected the problem under IE7/8. You have to remove the “px” from the line 490 in multibox.js ; like this :

    this.contentContainer = new Element(‘div’).setProperties({id: ‘MultiBoxContentContainer’}).setStyles({opacity: 0, width: this.contentObj.width, height: (Number(this.contentObj.height)+this.contentObj.xH)}).injectInside(this.box);

      • Samuel
      • January 29th, 2010

      Thanks for the fix, this has been added to the download.

    • ed
    • January 26th, 2010

    Hi,
    First of all, congratulations on the great work and very useful scripts!
    One question, is there any way to have the option in MultiBox flv player to open a flash video in full screen?

    Thanks.

    Ed

    • SamR
    • January 26th, 2010

    Before I ask my questions I’d like to thank you for a really impressive plugin.

    Questions 1. When I load content through AJAX, multiBox doesn’t show a vertical scroll bar. Is this a bug or a missing feature?

    Questions 2. Loading content (a page) through AJAX if the url contains an anchor multiBox doesn’t scroll to the correct spot in the content. Is this a bug or a missing feature?

    • Michael
    • January 26th, 2010

    Hi there,
    have problem with version 1.3.1. Works fine in demo but not on my side (picture goes up, but no navigation is shown and no overlay).
    Firefox said: this.contentToLoad.desc.injectInside is not a function in multibox.js line 467

    Please help.

    thanx very much
    w/best regards
    Michael

    • The Schaef
    • January 27th, 2010

    I cannot get version 1.3.2 to work on the website I am developing. At all. This is very disheartening, as I have been using the previous version on another website with great success, and I was very much looking forward to a version that ran with the new mootools.

    I uploaded all the appropriate files and added all the necessary code verbatim. I am completely flummoxed by this problem.

  4. it works while i was developing the site on XAMPP environment but when i uploaded on the server, all the things work except that the photos doesnt load.. the loading gif image is kept displayin instead… kindly help.

      • halarik
      • February 2nd, 2010

      i have the same problem … did you solve it?

  5. Hi,

    I’m getting conflicts with Jquery. Narrowed it down to the Jquery framework itself.

    Already had to dismiss jquery lightbox techniques because of conflicts with another script, and now this :(

    Do you know of any solution? As far as I know there shouldn’t be any conflicts with running 2 different frameworks.

    Thanks.

    • h-a-r-v
    • January 28th, 2010

    @ryan

    Hey,

    All you need to do is to take a look into the page source and see how each example is constructed.

    Generally speaking (no matter what you want to view via MB) multibox links have to be given class=”mb” + an unique id..

    (so, for example, it’s <a href=”image_folder/big_image.jpg” title=”some title” rel=”nofollow”> ..and here goes a thumbnail image or text </a>)

    ..and there needs to be a some description preferably at the end of body (where id matches a particular element id=”" viewed in multibox, like ‘image1′ from the example above) containing each element description (html supported). You HAVE TO make mbdesc divs for each element even if you don’t use descriptions (then leave those divs empty within), otherwise title bar and arrows won’t display.

    The example above regards images only. Other elements may require declaring their type in links rel= attribute or something, so once again – check and analyze this page source for each kind of element.

    Hope you get it.

    BTW. Phatfusion – finally! I’ve been dying to see this one. I’ve had to use some not-so-clean 1.2 port for last 2 years!

    • michael
    • January 28th, 2010

    hey,

    it is possible to set allowtransparency=”true” on the iframe?

    • chris zippo
    • January 29th, 2010

    @Ryan

    @Chris Zippo

    Hi everybody!

    Thank you Ryan. Later after my contribution I read that you had the same problem. And you solved it. This was also my mistake, that I stored “assests.js” without leading capital letter…
    Now it is runnig perfect. For me Multibox is one of the most amazing slideshows and have to thank the programmer very much! But nothing could perfect anough that it could not be improved… I searched very intensiv (also regarding other slideshows) about the possibility to build in an additional image with which downloads of the shown picture can be done – without success so far. Any advise?

    Chris

    • Mickael
    • January 31st, 2010

    Hello everybody!
    I would like to plugon multibox 1.3.2 to mooflow 0.2, but i don’t know why it doesn’t work? it will be cool, if you can help me . I test :
    onClickView: function(obj){var link = new Element(‘a’,{‘id’:obj.id, ‘href’:obj.src,’title’:obj.title, styles:{‘border’:'none’}});
    box.open(link);
    Before i initialize box by :
    var box = new multiBox(‘mb’, {overlay: new overlay()});
    So thanks in advance for your help

    • Mickael
    • January 31st, 2010

    Mickael :
    Your comment is awaiting moderation.
    Hello everybody!
    I would like to plugon multibox 1.3.2 to mooflow 0.2, but i don’t know why it doesn’t work? it will be cool, if you can help me . I test :
    onClickView: function(obj){var link = new Element(‘a’,{‘id’:obj.id, ‘href’:obj.src,’title’:obj.title, styles:{‘border’:’none’}});
    box.open(link);
    Before i initialize box by :
    var box = new multiBox(‘mb’, {overlay: new overlay()});
    So thanks in advance for your help

    Mickael

  6. Is it possible to make a multibox appear on top of a Youtube video (Object) or do I have to hide the objects when the Multibox appears?

    Btw…this is by far the easiest “lightbox” I have seen with most options but a small file size. Great combi!

  7. Hi,

    I was wondering if anyone could help me, I am having trouble getting the multibox to open up at 100% width and height depending on what size the users browser is, but im getting some funny/weird loading box’s showing up (like its re-sizing) three times. Need help. (I dont really want all that tween’s and resizing going on)

    I have done a bit of fiddling with the multibox.js but i don’t think i have been doing it right. lol

    Any help would be much appreciated.

    Cheers.

    • halarik
    • February 2nd, 2010

    it works while i was developing the site on XAMPP environment but when i uploaded on the server, all the things work except that the photos doesnt load.. the loading gif image is kept displayin instead… kindly help.

  8. For me Multibox is one of the most amazing slideshows and have to thank the programmer very much! But nothing could perfect anough that it could not be improved… I searched very intensiv

    • Mac
    • February 2nd, 2010

    Nice Job !

  9. I wanted to be fair and post an update to my previous comment. By removing the line “var overlay = new overlay();” and placing “overlay: new overlay()” in the option box, the script works perfectly. I am using it extensively on two websites so far. Thank you for all your hard work on this.

    • J
    • February 3rd, 2010

    I cant seem to get this working following your directions. Any chance of a better setup guide?

      • J
      • February 3rd, 2010

      Nevermind, I got it working. When I FTP’d the files over to my site, a few of them didnt make it. A re-upload solved the problem.

  10. Hi all.

    I discovered small problem with flash video in MultiBox.
    Flash video will not start playing while it is not fully downloaded to the client machine. So, the progressive video is not working in MultiBox. I’m trying to edit the script so it would allow playing flash videos immediately as they are opened, but without success.
    Anybody? Any ideas how this could be done?
    Any help would be appreciated!

    Thanks!

    sprecho

  11. Hi
    This is a wonderful tool and it works quite well except the MP3 part.
    It shows videos, even txt files, but it won´t load any of my MP3 files.
    I used the example file and put in the a href the location of my MP3 and nothing happens.
    What am I doing wrong?

    Les

    • JW
    • February 4th, 2010

    What are the chances you could implement groups the way that the original lightbox does (ex. )?

    I have a lot of different image groupings on my page and its getting a bit code-heavy to make a different multibox class for each group of images so that they dont all group together.

      • JW
      • February 4th, 2010

      Example – <img src=”x” rel=”lightbox [groupname]“>

    • Claudio
    • February 5th, 2010

    Hello everybody, thanks for all the beautiful work around multibox!

    I have only one question, how can I group images that are in the same page? I was using the rel= attribute but with no success at all.
    For example, I have only one thumbnail that displays a larger image when I click on it, and a subsequent set of images related to that thumbnail.
    The case is that when I open that particular thumbnail, the multibox shows the total quantity of images in the page.

    I really appreciate your help, thanks a lot!

    Claudio from Argentina.

      • Samuel
      • February 7th, 2010

      Best way to do this is to create a new multibox for each group of images.

  1. No trackbacks yet.