Once you've downloaded the component, you'll get a zip file containing 3 folders:

overbox/
├── documentation/          -> the offline version of the plugin documentation
├── overbox_development/    -> the un-minified version of css and js files
└── overbox_production/     -> the minified version of css and js files

General structure:

overbox/
├── css/          -> contains the css file
├── fonts/        -> contains the fonts*(Linea Iconset), that are used for creating the icons for the component
└── js/           -> contains the js file(s)

*Linea Iconset is released for free under the license CC BY 4.0 LICENSE

1. Add the files to your project. To use OverBox on a web page include the following files:

<!-- OverBox stylesheet -->                                        
<link rel="Stylesheet" type="text/css" href="../css/overbox.min.css"/>
<!-- Modernizr a JavaScript library that detects HTML5 and CSS3 features in the user’s browser -->
<script src="../js/modernizr.custom.js" type="text/javascript"></script>
<!-- OverBox plugin requires jQuery 1.8+ -->
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- OverBox plugin's JS script file -->
<script src="../js/jquery.overbox.min.js" type="text/javascript"></script>

Drop the script tags of Modernizr in the <head> of your HTML. For a better performance, you should have them follow after your stylesheet references.

2. Once you've included the necessary files, you can add 1 or more OverBoxes to your page. The necessary HTML setup for the Overbox consists only of an anchor tag.

<a href="images/img1.jpg" class="ob-content">Image1</a>

Grouping elements in an instance of an OverBox is done using the attribute data-ob-group="group_name"

<a href="images/img1.jpg" class="ob-content" data-ob-group="group1">Image1</a>
<a href="images/img2.jpg" class="ob-content" data-ob-group="group1">Image2</a>

3. After the HTML setup, you can call the plugin.

<!-- Calling the OverBox plugin -->
<script type="text/javascript">
    
    $(document).ready( function () {
        //The selector '.ob-content' selects the elements on which you want to apply the plugin
        $('.ob-content').overbox();
    });
    
</script>

That's it!

The Demos you can see here.

The OverBox plugin can be customized through options or/and data attributes data-ob-*. The plugin has a default configuration which is catered to the most basic and common use case. But if you want the plugin to behave different from its default configuration, you can override each of its default settings using the options.
If you want a customization at element level use the data attributes, which will override the corresponding plugin customization.

Options

Name Type Default Description
obOpenCloseType string obCorner The type of the effect used for opening and closing the OverBox.
Possible values: obCorner, obDoor, obAnimOCO, obHuge, obCntPush.
obNavType string obPressAway The type of the effect used for navigation through the OverBox elements.
Possible values: obPressAway, obSlide, obSoftScale, obLetIn, obFortuneWheel.
posControlBar string right The position of the control bar.
Possible values: right, left.
isPagEnabled boolean true Enables or disables the pagination.
Possible values: true, false.
pagSeparator string / The character which separates the two values of pagination: current_element and total_elements.
isInfoEnabled boolean true Enables of disables the the information bar.
Possible values: true, false.
isKeypressEnabled boolean true Enables or disables the keyboard navigation.
Possible values: true, false.
closeKeys array of numbers [27] The key codes, which will trigger the close event for the OverBox.
prevKeys array of numbers [37] The key codes, which will trigger the 'previous' navigation for the OverBox.
nextKeys array of numbers [39] The key codes, which will trigger the 'next' navigation for the OverBox.
infoKeys array of numbers [73] The key codes, which will toggle the information bar.
isDeepLinkingEnabled boolean false Enables or disables deeplinking for the OverBox.
dlGroupPrefix string overbox The name of the group prefix.
dlObjectPrefix string object The name of the element prefix.
iframeWidth number 640 The iframe width. Value is in px.
iframeHeight number 390 The iframe height. Value is in px.
videoWidth number 640 The HTML5 video width. Value is in px.
videoHeight number 390 The HTML5 video height. Value is in px.
flashWidth number 640 The flash width. Value is in px.
flashHeight number 390 The flash height. Value is in px.
flashErrorTxt string Flash is not supported by your browser The text that is used in case that flash did not load or is not supported by your browser.
imageErrorLoadTxt string NO IMAGE The text that is used by the holder, in case that the image did not load.
ajaxErrorTxt string NO AJAX The text that is used by the holder, in case that the request fails.

Data attributes

Name Default Description
data-ob-type image The type of the element.
Possible values: image, iframe, ajax, video, flash.
data-ob-group - The name of the group in which are grouped the elements that have the same group name.
data-ob-info The information text of each element.
data-ob-width Defines the width of the container. Overrides the value defined in the plugin's options. This data attribute affects the following type of elements: iframe, video, flash.
data-ob-height Defines the height of the container. Overrides the value defined in the plugin's options. This data attribute affects the following type of elements: iframe, video, flash.
data-ob-formats This attribute is used only by the video element type. It is used for specifying multiple source files(multiple formats) as a fallback in case the user's browser doesn't support one of them. The type of this attribute is an array of strings.
e.g.: data-ob-formats=["../../images/m1.webm"]
data-ob-poster This attribute is used only by the video element type. Provides an image to show before the video loads.