Examples

Content Type. Ajax

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.

Content Type. IFrame

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

Content Type. Video HTML5

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

Effects. Open / Close

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

Select an Open/Close effect:  obCorner obDoor obAnimOCO obHuge obCntPush

Effects. Navigation

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

Select a Navigation effect:  obPressAway obSlide obSoftScale obLetIn obFortuneWheel

General. Infinite Navigation

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

General. Deeplinking

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

General. Positioning the Control bar on the left

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

General. Disabling the Info Bar

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