See how you can use it

Single element

Group of elements

To group elements just add to each item of the group the data attribute data-ob-group = "your_group_name".

Ajax Content

The ajax content was let to be positioned as the user desires. In example 1 the content was placed in the middle of the container. Also, if an error will be encountered during the process of getting the ajax content then a holder, with customizable text will be shown, see example 2.

IFrame Content

OverBox can show several types of content. To display an iframe content add to the item the data attribute: data-ob-type = "iframe". To change the width and/or height of the content, just add to the element the following data attributes: data-ob-width = "your_value" and/or data-ob-height = "your_value".

HTML5 Video Content

To display Video HTML5 content add to the item the data attribute: data-ob-type = "video". If you want to specify multiple source files(multiple formats) use the data attribute: data-ob-formats = ["../../images/m1.webm"].

Flash Content

To display Flash content add to the item the data attribute: data-ob-type = "flash".

Infinite Navigation

To enable infinite navigation, just add to the call the option isInfiniteGroup: true.


To enable deeplinking, add to the call the option isDeepLinkingEnabled: true. The link will have the following format: http://www.your-site.com/page#overbox3/object1. It is made of 2 prefixes: group prefix(by default it's overbox) and object prefix(by default it's object). Through options you can change both values: dlGroupPrefix: 'new_group_name' and dlObjectPrefix: 'new_object_name'.

Positioning the Control bar on the left

You can change the position of the control bar using the option posControlBar: 'left'.

Disabling the Information Bar

You can disable the information bar by using the option isInfoEnabled: false.

Open / Close effects

Changing the opening and closing type of the overbox can be done through the option obOpenCloseType: 'obAnimOCO'.

Choose an effect

Navigation effects

You can change the navigation type by using the option obNavType: 'obSlide'.

Choose an effect

Image Attribution

Danielle Pereira / flickr / CC BY 2.0

Video HTML5 Attribution