Examples

See how you can use it
To group elements just add to each item of the group the data attribute data-ob-group = "your_group_name".

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.

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".

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"].

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'.

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

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

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

Select an Effect: 

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

Select an Effect: 


Image Attribution

Danielle Pereira / flickr / CC BY 2.0

Video HTML5 Attribution

http://www.videezy.com/