[jBox] Options

You can set the options for your jBoxes right away or as a second argument when you are using a type:

var options = {
    title: 'My title',
    content: 'My content'
};
new jBox(options);
new jBox('Tooltip', options);

There are following types: Tooltip, Mouse, Modal, Confirm,Notice, Image.

ID
id	Choose a unique id, otherwise jBox will set one for you (jBoxID1, jBoxID2, ...)
Dimensions
width height	Width and height of the content area (not the wrapper)
minWidth minHeight	Minimal width and height of content area
maxWidth maxHeight	Maximal width and height of content area
Attaching jBox
attach	Sets the open and close functions to elements
trigger	Defines with which event the jBox opens or closes when interacting with the attached element
preventDefault	Prevents the default event when clicking on the attached element, e.g. don't follow the href of a link
Content
title	Adds a title to your jBox
content	Sets the content of your jBox. You can use jQuery selectors to append elements (set CSS style display to none so the elements won't show up on your page)
getTitle	The attribute from which jBox should get its title
getContent	The attribute from which jBox should get its content
AJAX
ajax: {     url: null,     data: '',     reload: false,     getData: 'data-ajax',     setContent: true,     spinner: true }		When you set an AJAX url, jBox makes an AJAX request when it opens. You can add any jQuery ajax option, e.g. beforeSend or complete
↳ url	The url to send the AJAX request to
↳ data	Data to send with your AJAX call, e.g. id=1982
↳ reload	Resends the AJAX request every time jBox opens
↳ getData	The attribute in the source element where the AJAX request will look for the data, e.g. data-ajax="id=82&limit=10"
↳ setContent	Automatically set the response as new content when the AJAX call is finished
↳ spinner	Hides the current content and adds a spinner while loading the AJAX request. You can pass your own HTML code of your spinner. The spinner element will be added to the jBox container
Position
target	The target element where jBox will be positioned in or at. If no target element is provided, jBox will use the attached element as target
position	Set an object with the horizontal position x and the vertical positiony, e.g. {x: 'right', y: 'center'}. You can also set numbers for an absolute position
outside	Moves your jBox outside of the target element
offset	Offset to final position. You can set different values for x and y with an object, e.g. {x: 15, y: -10}
attributes	Choose what CSS attributes should be used, e.g. {x: 'right',y: 'bottom'}. Note that right and bottom can only be used when your position values are integer, e.g. {x: 300, y: 20}
adjustPosition	Adjusts the position when there is not enough space to show the whole jBox. The value flip positions the jBox on the opposite outside position, the value move works only with a pointer. Set totrue to use both
adjustTracker	By default jBox adjusts its position when it opens, to also adjust while scrolling or when you resize the browser, use scroll, resizeor true for both events. This option affects performance, use with care
adjustDistance	Distance to the window edge when adjusting should start. Use an object to set different values, e.g. {top: 50, right: 20,bottom: 5, left: 20}
fixed	Sets a fixed position rather than an absolute
reposition	Recalculates the position when the browser size changes
repositionOnOpen	Recalculates the position each time jBox opens (rather than only when it opens the first time)
repositionOnContent	Recalculates the position when dimensions change using the methods .setContent() or .setTitle()
Pointer
pointer	Your pointer will always point towards the target element, so the option outside needs to be x or y. By default the pointer is centered, set a position to move it to any side. You can also add an offset, e.g. left:30, center:-20
pointTo	Setting something else than target will add a pointer even if there is no target element set or found
Animations
fade	Fade duration in ms, set 0 or false to disable
animation	Animation when jBox opens or closes. To use different animations for opening and closing, use an object:{open: 'tada', close: 'flip'}. You can also set the direction of the move and slide animations:{open: 'move:right', close: 'slide:top'}. You'll need a modern browser for animations to work, or IE from version 10
Appearance
theme	Default themes that come with jBox are ModalBorder, NoticeBorder,TooltipBorder, TooltipDark. Remember to load the CSS file of your theme
addClass	Adds classes to the wrapper
overlay	Adds an overlay when jBox opens
zIndex	Use a high zIndex. Your overlay will have the lowest zIndex of all your jBoxes minus one
Delays
delayOpen	Delay opening in ms. Note that the delay will be ignored if your jBox didn't finish closing
delayClose	Delay closing in ms. Note that there is always a closing delay of at least 10ms to ensure jBox won't be closed when opening right away
Closing jBox
closeOnEsc	Close jBox when pressing the [ESC] key
closeOnClick	Close jBox with a mouseclick: true closes when you click anywhere,overlay when clicking on the overlay, box when clicking on the jBox itself and body when you click anywhere but the jBox
closeOnMouseleave	Close jBox when the mouse leaves the jBox element
closeButton	Adds a close button. Note that the close button in the overlay doesn't actually close the jBox, you need to set the optioncloseOnClick to overlay or body
Other options
constructOnInit	Construct jBox when it's being initialized, otherwise it will be constructed when it opens for the first time
blockScroll	Blocks scrolling when jBox is open
appendTo	Provide an element if you want the jBox to be positioned inside a specific element. This option is only useful for fixed positions or when the position values are numbers
draggable	Makes your jBox draggable. Use title or provide any child element of jBox to use as the handle
dragOver	When you have multiple draggable jBoxes, the one you select will always move over the other ones
Events
onInit	Triggered when jBox is initialized. Note that you can use this in the event functions, it refers to your jBox object, e.g. onInit: function() { this.open(); }
onCreated	Triggered when jBox is created and is availible in DOM
onOpen	Triggered when jBox is opening
onClose	Triggered when jBox is closing
onCloseComplete	Triggered when jBox is completely closed (when fading finished)
Additional options for type Confirm
confirmButton	Text for the submit button
cancelButton	Text for the cancel button
confirm	Function to execute when clicking the submit button. By default jBox will use firstly the onclick and secondly the href attribute
cancel	Function to execute when clicking the cancel button
Additional options for type Notice
autoClose	Time in milliseconds when the notice should close automatically, set to 0 or false to disable
color	Makes your notices colorful
stack	Wheather to stack or only show single notices
audio	The url to an audio file to play when the notice opens, e.g./audio/filename. jBox will look for .mp3 and .ogg files
volume	Use a value between 0 and 100 to set the audio volume
Additional options for type Image
src	The attribute to get the image source from, e.g. href for a link: <a href="/path/image.jpg">
gallery	The attribute to set the galleries, e.g. data-jbox-image="gallery1"
imageLabel	The attribute to set the description of the image, e.g.title="My image"
imageFade	The fade duration between images
imageSize	How to display the images. Use CSS styles of background-position, e.g. cover, 800px 600px, 50% auto