Simple as pie.

Quick Start

Using iBox is very simple. You need to include two lines at the top of your page:

Note: If you are using the Wordpress plug-in it automatically includes the following lines in your header.

<script type="text/javascript" src="ibox/ibox.js"></script>

Make sure the paths for these are correct before continuing.

Now that you have the files needed, you simply can tag rel="ibox" on to an <a> tag that you want iBox to take over. See below for several examples.

Global Options

iBox includes several configuration options you may want to change to suit your needs. The recommended way of changing these is to create a new javascript file, or include the javascript code in your header, after the lines to initialize iBox. See the example:

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

Available Options

Per-iBox Options

There are several arguments available on your iBox controls. These are specified in the rel="ibox" line. Any of the argument values may be wrapped in quotations (single or double, depending your use of the rel tag) to stop the & (&) from evaluating.

iBox also supports some arguments via standard anchor attributes.

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.

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>

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&width=275&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.


© 2005-2017 Enthropia Inc