iBox v2

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

TopUses

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

• 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>

TopPlugins

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

Creating Plugins

Creating your own plug-ins is simple, and requires very little JavaScript knowledge. The first thing you'll want to do is create a file to hold your plug-ins. 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 plug-ins. This is called when the plug-in is unloaded.

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 {
    padding: 10px 10px 35px 10px;
    line-height: 25px;
    border-color:#fff;
}
#ibox_wrapper, #ibox_footer_wrapper a { background-color:#fff; }
#ibox_content { background-color:#fff; border:0; }
#ibox_footer_wrapper {
    padding: 0 3px;
    bottom: 5px;
    top: auto;
}
#ibox_footer_wrapper a {
    text-indent: -10000px;
    background: url('images/closelabel.gif');
    width: 66px;
    height: 22px;
}
#ibox_progress {
    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&amp;width=275&amp;target=ibox-login.html" title="Login" >Login Form</a>

TopCompression

We highly recommend using a javascript compressor to truly get lighweight performance.

As there are many variables for you to edit, we have opted not to include any compression. Once compressed, the iBox script weighs in at roughly 7 kb. Compare this to similar libraries which also force you to download a framework such a prototype or mootools, where as we do not.

TopResources

• iBox Homepage
• iBox Support Forum
• iBegin Labs

TopLicense

Copyright (c) 2008 iBegin

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.