Divbox
DivBox is simple, easy style format, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. DivBox is a plugin for jQuery. It was inspired in Multibox by http://phatfusion.net/multibox/.
Lastest code update:
svn checkout http://divbox.googlecode.com/svn/trunk/
Your comment
Features 
- supports a range of multimedia formats and youtube video
- auto detects formats or or you can specify the format, useful if your passing a querystring!
- define languages display
- support basic APIs
- html descriptions
- easy to re-format template
- support draggable (if jquery.ui.draggable.js has been included)
How to use
- Step 1 - Setup
- Include just these two javascript files in your header.
- Include the CSS file responsible to style the DivBox:<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/divbox.js"></script><link rel="stylesheet" type="text/css" href="css/divbox.css" media="screen" /> - Step 2 - Activate
- The only necessity is to have a HTML markup likes it:
- After it, select the links and call the DivBox. See some examples:<a href="image1.jpg" class="divbox" ><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
* Note: To enable drag-drop feauture, you need include<script type="text/javascript">
var opt = {
caption: true,
caption_control: true //Note: don't put comma (,) after the last property
}
$('a.divbox).divbox(opt);
</script>
View full options
Also, if you have problem with close,previous,next button on IE 6, please change the image buttons to absolute path in divbox.css on lines below:<script type="text/javascript" src="js/jquery.ui.draggable.js"></script>*html #divbox_frame .closed{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://domain.com/absolute_path/images/close.png);
}
*html #divbox_frame .prev{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://domain.com/absolute_path/images/left.png);
}
*html #divbox_frame .prevDisabled{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://domain.com/absolute_path/images/leftDisabled.png);
}
*html #divbox_frame .next{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://domain.com/absolute_path/images/right.png);
}
*html #divbox_frame .nextDisabled{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://domain.com/absolute_path/images/rightDisabled.png);
}
Options
| Option | Default | Description |
|---|---|---|
| width | null | The width of the box if it's not null, else the width will be auto. |
| height | null | The height of the box if it's not null, else the height will be auto. |
| speed | 500 | The speed of each the animation as string in jQuery terms ("slow" or "fast") or milliseconds as integer |
| left | null | The value from the left that the box should open to. If left is null, the left will be auto. |
| top | null | The value from the top that the box should open to. If top is null, the top will be auto. |
| type | null | The specify the format that you want assign to. If type is null, the format will be auto. Divbox support formats:
|
| src | href | The specify attribute that the value is a source to show on the box. |
| scrollbar | auto | Set value of atrribute scrolling in iframe
|
| btn_closed | #divbox_frame .closed | The jquery selector of element that is close button |
| btn_prev | #divbox_frame .prev | The jquery selector of element that is previous button |
| btn_next | #divbox_frame .next | The jquery selector of element that is next button |
| btn_number | #divbox_frame .number | The jquery selector of element that show the current items per total items |
| path | players/ | The folder that includes players. |
| resize_large_image | true | Allow resize image auto if the demension size is so large and else. |
| click_full_image | true | Allow click on image to view full image if the image has been auto resize. |
| overlay | true | Allow use a semi-transparent background. |
| caption | true | Allow show the caption: - false: hide the caption - true: the title of the element will show on caption if caption is a function, the value return will show on caption, this is useful to show caption with HTML description. Example:
|
| caption_control | true | Allow show the caption control ( includes next and previous buttons) |
| caption_number | true | Allow show the current item per total items |
| event | click | The mouse event on the HTML element to show box. |
| container | document.body | The containing element for the overlay if used. |
| download_able | The extentions file that will go direct to link ( don't show box). Default defined:
|
|
| languages | Defines text string show on box. Default defined:
|
|
| api | Callback functions
|