iBox 2.18

<script type="text/javascript" src="ibox/ibox.js"></script>
<script type="text/javascript">iBox.setPath('ibox/');</script>

<script type="text/javascript" src="ibox/ibox.js"></script>
<script type="text/javascript">
iBox.setPath('ibox/');
iBox.padding = 50;
iBox.inherit_frames = false;
</script>

TopUses

iBox by default supports several document types, but is extensible via plugins that will allow you to match content based on the URL. Below are the default plugins.

• Images
• Documents
• Inline Containers
• YouTube Videos (New)
• Force iBox to Load

iBox also lets you manually open boxes. This can be done with iBox.showURL('my_url'); or iBox.show('html'); as well as iBox.show(htmlNode);.

TopImages

iBox easily supports the standard overlay of images, in many sizes, and will automatically scale down the window if the browser's viewpane is too small.

Example

Source

<ul>
<li><a href="images/large/image_1b.jpg"  rel="ibox" title="Good Barbeque at 1024x450!"><img src="images/small/image_1.jpg" alt=""/></a></li>
<li><a href="images/large/image_2.jpg" rel="ibox" title="500x426!" ><img src="images/small/image_2.jpg" alt=""/></a></li>
<li><a href="images/large/image_3.jpg" rel="ibox" title="Auto Detect Image Size" ><img src="images/small/image_3.jpg" alt=""/></a></li>
</ul>

TopDocuments

iBox supports overlaying documents as well as the standard images. This is achieved in the same fashion as an image, but instead of showing the image, it shows the document you are linking to.

Example

ibox-ajax-test.html

Source

<a href="ibox-ajax-test.html" rel="ibox" title="Loading External HTML File using AJAX" >ibox-ajax-test.html</a>

TopInline Containers

Support is also given for embedded containers so you don't need to perform a page request for a document.

Example

#inner_content

Source

<div id="inner_content" style="display:none;">
    <div style="background:#000000;color:#ffffff;border:1px dashed #FFFFFF;padding:15px;margin:15px;">	
    	<h3>It is a hidden div!</h3>
    	<p>If you were to view source, you would find a div called 'inner_content'. This is that div. We have used CSS to set its display property to none, but using <a href="/blog/p_ibox.html">iBox</a>, you can clearly see it as an overlay. Hurrah!</p>
    	<p>It is even styled. Oh so pretty it is</p>
    </div>
    </div>
    <p>
    <a href="#inner_content" rel="ibox" title="Loading Internal HTML Content" >#inner_content</a>
    </p>

TopExtensions

iBox is built on it's plug-in handling. All document types that it handles by default are actually built as plugins. The default plug-in if nothing matches is the Document handler.

Creating Plugins

Creating your own plugins is simple, and requires very little JavaScript knowledge. The first thing you'll want to do is create a file to hold your plugins. This file must be loaded after ibox.js is loaded. After you've got a workspace available, let's go ahead and create the plug-in.

You will need to decide on a name, that doesn't conflict with any existing plug-in names. Default Plugin's are stored in a special namespace so you won't have to worry about that.

var iBoxPlugin_YouTube = function() {}

Now, you need to write your plug-in's match function, which is where we check the URL against something else in order to verify if this plug-in should be used. This function is called match and one argument, the url.

var _private = {
youtube_url: /(?:http:\/\/)?(?:www\d*\.)?youtube\.com\/(?:v\/|(?:watch(?:\.php)?)?\?(?:.+&)?v=)([^&]+).*/
}
var _public = {
match: function(url)
{
  return url.match(_private.youtube_url);
},
}

Once our matching works, we need to add the rendering code. This functions is called render and has two arguments: url, and params.

render: function(url, params)
{
  id = url.match(_private.youtube_url)[1];
  params.width = 425;
  var html = '<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/' + id + '"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/' + id + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>';
  iBox.html(html, params);
}

Now that you've got your rendering and matching, all that's left is to register, via iBox.plugins.register(function). Below is the full example including the registration code.

var iBoxPlugin_YouTube = function()
{
  var _private = {
    youtube_url: /(?:http:\/\/)?(?:www\d*\.)?youtube\.com\/(?:v\/|(?:watch(?:\.php)?)?\?(?:.+&)?v=)([^&]+).*/
  }
  var _public = {
    match: function(url)
    {
      return url.match(_private.youtube_url);
    },

    render: function(url, params)
    {
      id = url.match(_private.youtube_url)[1];
      params.width = 425;
      var html = '<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/' + id + '"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/' + id + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>';
      iBox.html(html, params);
    }
  }
  return _public;
}();
iBox.plugins.register(iBoxPlugin_YouTube);

New in iBox 2.11

There is now an unload function available on plugins. This is called when the plug-in is unloaded.

Plugin Parameters

One of the common variables you'll see passed around is our params object. This contains all of the currently active options and parameters. These are set initially, but may be overwritten inside of your plug-in. Below are some common parameters.

• title

  Default

  ''

• can_resize

  Default

  true

• use_fade

  This option can be completely disabled by having the iBox.fade_in_speed option set to 0.

  Default

  true

• width

  Default

  iBox.default_width

• height

  Default

  null

Events (New in 2.17)

iBox allows you to bind to certain events, just as you would to normal events in your document, using the iBox.addEvent(object, event_name, callback) method. This method can also be used to bind to general events in your document. iBox currently consists of a few events on the object itself:

• show

  Fired when the iBox becomes visible.

• hide

  Fired when the iBox is closed.

• load (New in 2.20)

  Fired when the iBox has completely loaded. This is useful if you want to show an iBox immediately after the document has loaded.

TopYouTube Videos

Similar to the code in the example above, we have added support for YouTube links as a default plug-in.

Example

My YouTube Video

Source

<a href="http://www.youtube.com/watch?v=Sr2JneittqQ" rel="ibox" >My YouTube Video</a>

TopSkinning iBox

Customizing the display for iBox has become extremely easy. To show you how easy it is, we've included a lightbox skin. To use it you simply need to include ibox.js, and then include lightbox.css. You will notice that the skin you see in the readme is not the default. This is another example, called darkbox, created specifically for this readme file.

Note, that on a live site, we'd recommend you merge all of your CSS into one file for performance reasons.

Example

<link rel="stylesheet" href="ibox/skins/lightbox/lightbox.css" type="text/css" media="screen"/>

Source

#ibox_wrapper {
    line-height:25px;
    border-color:#fff;
}
#ibox_wrapper, #ibox_footer_wrapper a { background-color:#fff; }
#ibox_content { background-color:#fff; border:0; margin: 10px 10px 40px 10px; }
#ibox_footer_wrapper {
    line-height: 25px;
    bottom: 5px;
    top: auto;
}
#ibox_footer_wrapper a {
    text-indent: -100000px;
    background: url('images/closelabel.gif') center center no-repeat;
    width: 66px;
    height: 25px;
    line-height: 25px;
}
#ibox_loading {
    text-indent: -100000px;
    width: 200px;
    height: 200px;
    background: #fff url('images/loading.gif') center center no-repeat;
}

TopForce iBox to Load

iBox also lets you manually open boxes. This can be done with iBox.showURL('my_url'); or iBox.show('html'); as well as iBox.show(htmlNode);.

TopSupport for JavaScript-disabled Browsers

We have not forgotten about users who disable JavaScript. iBox supports a target option in it's links which specify's the target document or image you wish to load, and doesn't have to be the same as the href attribute.

Example

Login Form

Source

<a href="login.html" rel="ibox&width=275&target=ibox-login.html" title="Login" >Login Form</a>

TopResources

• iBox Homepage
• iBox Support Forum
• iBegin Labs
• iBegin