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".
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".
data-ob-type = "iframe"
data-ob-width = "your_value"
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"].
data-ob-type = "video"
data-ob-formats = ["/images/m1.webm"]
Changing the opening and closing type of the overbox can be done through the option obOpenCloseType. e.g.: 'obOpenCloseType': 'obAnimOCO'.
obOpenCloseType
'obOpenCloseType': 'obAnimOCO'
Select an Open/Close effect: obCorner obDoor obAnimOCO obHuge obCntPush
You can change the navigation type by using the option obNavType. e.g.: 'obNavType': 'obSlide'.
obNavType
'obNavType': 'obSlide'
Select a Navigation effect: obPressAway obSlide obSoftScale obLetIn obFortuneWheel
To enable infinite navigation, just add to the call the option isInfiniteGroup: true.
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'.
isDeepLinkingEnabled: true
http://www.your-site.com/page#overbox3/object1
dlGroupPrefix: 'new_group_name'
dlObjectPrefix: 'new_object_name'
You can change the position of the control bar using the option posControlBar: 'left'.
posControlBar: 'left'
You can disable the info bar by using the option isInfoEnabled: false.
isInfoEnabled: false