You can set the options for your jBoxes right away or as a second argument when you are using a plugin:
var options = { title: 'My title', content: 'My content' }; new jBox(options); new jBox('Tooltip', options);
jBox comes with the default plugins Tooltip, Mouse and Modal.
In addition you can include the plugins Confirm, Notice and Image.
ID |
||
id | string | Choose a unique id, otherwise jBox will set one for you (jBox1, jBox2, ...) |
Dimensions |
||
width height |
auto, integer | The width and height of the content area |
minWidth minHeight |
integer | Minimal width and height of content area |
maxWidth maxHeight |
integer | Maximal width and height of content area |
responsiveWidth responsiveHeight |
boolean | Adjusts width and height to fit the viewport |
responsiveMinWidth responsiveMinHeight |
integer | Don't adjust width or height below this value (in pixel) |
Attaching jBox |
||
attach | jQuery selector | A jQuery selector to elements that will open and close your jBox, e.g. '.tooltip' |
trigger | click, mouseenter, touchclick |
Defines with which event the jBox opens or closes when interacting with the attached element |
preventDefault | boolean | Prevent the default event when opening jBox, e.g. don't follow the href in a link |
Content |
||
content | string, jQuery element |
Sets the content of your jBox. You can use jQuery elements to append elements (set CSS style display to none so the elements won't show up on your page) |
getContent | string | Get the content from an attribute when jBox opens, e.g. 'data-content'. Use 'html' to get the attached elements HTML as content |
title | string | Adds a title to your jBox |
getTitle | string | Get the title from an attribute when jBox opens, e.g. 'data-title' |
footer | string | Adds a footer to your jBox |
isolateScroll | boolean | Isolates scrolling to the content container |
AJAX |
||
ajax: { url: null, data: '' // ... } |
When you set an URL, jBox makes an AJAX request when it opens. You can add any jQuery ajax option, e.g. beforeSend, complete, success, etc. | |
↳ url | string | The URL to send the AJAX request to |
↳ data | string, object | Data to send with your AJAX request, e.g. {id: 82, limit: 10} |
↳ reload | boolean, strict | Resend the AJAX request when jBox opens. Use true to send the AJAX request call only once for every element or 'strict' to resend every time jBox opens |
↳ getURL | string | The attribute in the source element where the AJAX request will look for the URL, e.g. 'data-url' |
↳ getData | string | The attribute in the source element where the AJAX request will look for the data, e.g. 'data-ajax' |
↳ setContent | boolean | Automatically set the response as new content when the AJAX request is finished |
↳ loadingClass | boolean, string | Add a class to the wrapper when jBox is loading. Set to the desired class name or to true to use the default class name 'jBox-loading' |
↳ spinner | boolean, string | Hides the current content and adds a spinner while loading. You can pass HTML content to add your own spinner, e.g. spinner: '<div class="mySpinner"></div>' |
↳ spinnerDelay | integer | Milliseconds to wait until spinner appears |
↳ spinnerReposition | boolean | Repositions jBox when the spinner is added or removed |
cancelAjaxOnClose | boolean | Cancels the ajax call when jBox closes and it hasn't finished loading yet |
Position |
||
target | jQuery selector | The jQuery selector to the target element where jBox will be opened. If no element is found, jBox will use the attached element as target |
position | object | Set an object with the horizontal position x and the vertical position y, e.g. {x: 'right', y: 'center'}. You can also set numbers for an absolute position |
outside | x, y, xy | Moves your jBox outside of the target element |
offset | integer, object | Offset to final position. You can set different values for x and y with an object, e.g. {x: 15, y: -10} |
attributes | object | Defines which 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} |
fixed | boolean | Your jBox will stay on position when scrolling |
adjustPosition | flip, move, boolean |
Adjusts your jBoxes position if there is not enough space. The value 'flip' positions the jBox on the opposite outside position, the value 'move' works only with a pointer. Set to true to use both. This option overrides the reposition options |
adjustTracker | boolean | By default jBox adjusts its position when it opens or when the window size changes, set to true to also adjust when scrolling |
adjustDistance | integer, object | The minimal distance to the viewport edge while adjusting. Use an object to set different values, e.g. {top: 50, right: 5, bottom: 20, left: 5} |
reposition | boolean | Calculates new position when the window-size changes |
repositionOnOpen | boolean | Calculates new position each time jBox opens (rather than only when it opens the first time) |
repositionOnContent | boolean | Calculates new position when the content changes with .setContent() or .setTitle() |
holdPosition | boolean | Keeps current position if space permits. Applies only to 'Modal' type. |
Pointer |
||
pointer | boolean, left, right, top, bottom, center |
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' or 'center:-20' |
pointTo | target, left, right, top, bottom |
Setting something else than 'target' will add a pointer even if there is no target element set or found |
Animations |
||
fade | integer | Fade duration in ms, set 0 or false to disable |
animation | object, boolean, zoomIn, zoomOut, pulse, move, slide, flip, tada |
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'} |
Appearance |
||
theme | string | Set a jBox theme class, e.g. 'TooltipDark' |
addClass | string | Adds classes to the wrapper |
overlay | boolean | Adds an overlay to hide page content when jBox opens (adjust color and opacity with CSS) |
overlayClass | string | Add a class name to the overlay |
zIndex | integer, auto | Use a high z-index, or set to 'auto' to move the jBox to the very top when it opens |
Delays |
||
delayOpen | integer | Delay opening in ms. Note that the delay will be ignored if your jBox didn't finish closing |
delayClose | integer | Delay closing in ms. Nnote 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 | boolean | Close jBox when pressing [esc] key |
closeOnClick | boolean, body, box, overlay |
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 | boolean | Close jBox when the mouse leaves the jBox area or the area of the attached element |
closeButton | boolean, overlay, title, box |
Adds a close button to your jBox. The value true will add the button to the overlay, title or the jBox itself, in that order if any of those elements can be found |
Other options |
||
appendTo | jQuery element | The element your jBox will be appended to. Any other element than $('body') is only useful for fixed positions or when position values are numbers |
createOnInit | boolean | Creates jBox and makes it available in DOM when it's being initialized, otherwise it will be created when it opens for the first time |
blockScroll | boolean | Blocks scrolling when jBox is open |
blockScrollAdjust | boolean, string, array | Adjust page elements to avoid content jumps when scrolling is blocked. See more here: https://github.com/StephanWagner/unscroll |
draggable | boolean, title, jQuery selector |
Makes your jBox draggable. Use title or provide the selector of any child element of jBox to use as the handle. When using true you can not interact with elements like textfields in the content area |
dragOver | boolean | When you have multiple draggable jBoxes, the one you select will always move over the other ones |
autoClose | integer, boolean | Time in ms when jBox will close automatically after it was opened |
Audio |
||
preloadAudio | boolean, array | Preloads the audio files set in option audio. You can also preload other audio files, e.g. ['src_to_file.mp3', 'src_to_file.ogg'] |
audio | string, object | The URL to an audio file to play when jBox opens. Set the URL without file extension, jBox will look for an .mp3 and .ogg file. To play audio when jBox closes, use an object, e.g. {open: 'src_to_audio1', close: 'src_to_audio2'} |
volume | integer, object | The volume of the audio in percent. To have different volumes for opening and closeing, use an object, e.g. {open: 75, close: 100} |
Events |
||
onInit | function | Fired 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(); } |
onAttach | function | Fired when jBox attached itself to elements |
onPosition | function | Fired when jBox is positioned |
onCreated | function | Fired when jBox is created and is availible in DOM |
onOpen | function | Fired when jBox opens |
onOpenComplete | function | Fired when jBox is completely open (when fading finished) |
onClose | function | Fired when jBox closes |
onCloseComplete | function | Fired when jBox is completely closed (when fading finished) |
onDragStart | function | Fired when dragging starts |
onDragEnd | function | Fired when dragging finished |
Additional options for plugin Confirm |
||
confirmButton | string | Text for the submit button |
cancelButton | string | Text for the cancel button |
confirm | function | Function to execute when clicking the submit button. By default jBox will use the onclick or href attribute in that order if found |
cancel | function | Function to execute when clicking the cancel button |
closeOnConfirm | boolean | Close jBox when the user clicks the confirm button |
Additional options for plugin Image |
||
src | string | The attribute to get the image source from, e.g. 'href' for a link: <a href="/path/image.jpg"> |
gallery | string | The attribute to set the galleries, e.g. 'data-jbox-gallery'. When changing this option, make sure you check the option attach, as jBox Image gets attached to [data-jbox-gallery] by default. |
imageLabel | string | The attribute where jBox gets the image label from, e.g. 'title' |
imageFade | integer | The fade duration for images in ms |
imageSize | cover, contain, auto, string |
How to display the images. Use CSS styles of background-position, e.g. 'cover', '50% auto' |
imageCounter | boolean | Set to true to add an image counter, e.g. 4/20 |
imageCounterSeparator | string | HTML to separate the current image number from all image numbers, e.g. '/' or ' of ' |
downloadButton | boolean | Adds a download button |
downloadButtonText | string | Text for the download button |
downloadButtonUrl | string | The attribute at the source element where to find the image to download, e.g. data-download="/path/image.jpg". If none provided, the currently active image will be downloaded |
mobileImageAttr | string | The attribute to look for an mobile version of the image |
mobileImageBreakpoint | integer | The upper breakpoint to load the mobile image |
preloadFirstImage | boolean | Preload the first image when page is loaded |
Additional options for plugin Notice |
||
color | black, red, green, blue, yellow |
Add a color to your notices |
stack | boolean | Set to false to disable notice-stacking |
stackSpacing | integer | Spacing between notices when they stack |
delayOnHover | boolean | When hovering the notice it won't close |
showCountdown | boolean | Adds a progress bar showing the time it will take until the notice closes |