diff --git a/js/libraries/jbox/README.md b/js/libraries/jbox/README.md new file mode 100755 index 00000000..2de2b62f --- /dev/null +++ b/js/libraries/jbox/README.md @@ -0,0 +1,82 @@ +jBox +==== + +jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips, notices and more. + +Demo: http://stephanwagner.me/jBox + +Docs: http://stephanwagner.me/jBox/documentation + + +Tooltips +-------- + +You can use jQuery selectors to add tooltips to elements: + + $('.tooltip').jBox('Tooltip'); + +Now elements with class="tooltip" will open tooltips: + + Hover me! + Hover me! + + +Modal windows +------------- + +You can set up modal windows the same way as tooltips. +But most of times you'd want more variety, like a title or HTML content: + + new jBox('Modal', { + width: 300, + height: 200, + attach: $('#myModal'), + title: 'My Modal Window', + content: 'Hello there!' + }); + +
Click me to open a modal window!
+ + + +Confirm windows +--------------- + +Confirm windows are modal windows which requires the user to confirm a click action on an element. +Give an element the attribute data-confirm to attach it: + + new jBox('Confirm', { + confirmButton: 'Do it!', + cancelButton: 'Nope' + }); + +
Click me!
+ Click me! + + +Notices +------- + +A notice will open automatically and destroy itself after some time: + + new jBox('Notice', { + content: 'Hurray! A notice!' + }); + + +Images +------ + +To create image modal windows you only need following few lines: + + new jBox('Image'); + + + + +Learn more +---------- + +These few examples are very basic. +The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior. +Learn more in the documentation: http://stephanwagner.me/jBox/documentation diff --git a/js/libraries/jbox/jBox.css b/js/libraries/jbox/jBox.css new file mode 100755 index 00000000..eed1cb3b --- /dev/null +++ b/js/libraries/jbox/jBox.css @@ -0,0 +1,572 @@ + +/* Global */ + +.jBox-wrapper { + text-align: left; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.jBox-title, +.jBox-content, +.jBox-container { + position: relative; + word-break: break-word; +} + +.jBox-container { + background: #fff; + border:1px solid #59aa29; + max-width:180px; + font-size:11px; + line-height:13px; + color:#525352; +} + +.jBox-content { + padding: 4px 5px; + overflow: auto; + -webkit-transition: opacity .15s; + transition: opacity .15s; +} + +/* jBox Tooltip */ + +.jBox-Tooltip .jBox-container, +.jBox-Mouse .jBox-container { + border-radius: 3px; + box-shadow: 0 0 5px rgba(0, 0, 0, .3); +} + +.jBox-Tooltip .jBox-title, +.jBox-Mouse .jBox-title { + padding: 8px 10px 0; + font-weight: bold; +} + +.jBox-hasTitle.jBox-Tooltip .jBox-content, +.jBox-hasTitle.jBox-Mouse .jBox-content { + padding-top: 5px; +} + +/* Pointer */ + +.jBox-pointer { + position: absolute; + overflow: hidden; +} + +.jBox-pointer-top { top: 0; } +.jBox-pointer-bottom { bottom: 0; } +.jBox-pointer-left { left: 0; } +.jBox-pointer-right { right: 0; } + +.jBox-pointer-top, +.jBox-pointer-bottom { + width: 22px; + height: 10px; +} + +.jBox-pointer-left, +.jBox-pointer-right { + width: 10px; + height: 20px; +} + +.jBox-pointer:after { + content: ''; + width: 10px; + height: 9px; + position: absolute; + background: #fff; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + border:1px solid #59aa29; + +} + +.jBox-pointer-top:after { + left: 5px; + top: 6px; + box-shadow: -1px -1px 4px rgba(0, 0, 0, .2); +} + +.jBox-pointer-right:after { + top: 5px; + right: 6px; + box-shadow: 1px -1px 4px rgba(0, 0, 0, .2); +} + +.jBox-pointer-bottom:after { + left: 5px; + bottom: 6px; + box-shadow: 1px 1px 4px rgba(0, 0, 0, .2); +} + +.jBox-pointer-left:after { + top: 5px; + left: 6px; + box-shadow: -1px 1px 4px rgba(0, 0, 0, .2); +} + +/* jBox Modal & jBox Confirm */ + +.jBox-Modal .jBox-container, +.jBox-Confirm .jBox-container { + border-radius: 3px; + box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4); +} + +.jBox-Modal .jBox-title, +.jBox-Confirm .jBox-title { + border-radius: 3px 3px 0 0; + padding: 10px 15px; + background: #f4f5f6; + border-bottom: 1px solid #ddd; + text-shadow: 0 1px 1px #fff; +} + +.jBox-Modal.jBox-closeButton-title .jBox-title, +.jBox-Confirm.jBox-closeButton-title .jBox-title { + padding-right: 55px; +} + +.jBox-Modal.jBox-closeButton-box:before, +.jBox-Confirm.jBox-closeButton-box:before { + box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4); +} + +/* jBox Modal */ + +.jBox-Modal .jBox-content { + padding: 12px 15px; +} + +/* jBox Confirm */ + +.jBox-Confirm .jBox-content { + text-align: center; + padding: 45px 35px; +} + +.jBox-Confirm-footer { + border-top: 1px solid #e2e2e2; + background: #fafafa; + border-radius: 0 0 3px 3px; + text-align: center; + padding: 10px 0; +} + +.jBox-Confirm-button { + display: inline-block; + cursor: pointer; + font-size: 15px; + line-height: 30px; + height: 30px; + border-radius: 3px; + padding: 0 20px; + -webkit-transition: color .2s, background-color .2s; + transition: color .2s, background-color .2s; +} + +.jBox-Confirm-button-cancel { + text-shadow: 0 1px 1px rgba(255, 255, 255, .6); + background: #ddd; + color: #999; + margin-right: 25px; +} + +.jBox-Confirm-button-cancel:hover { + background: #ccc; + color: #666; +} + +.jBox-Confirm-button-submit { + text-shadow: 0 -1px 1px rgba(0, 0, 0, .2); + background: #5fc04c; + color: #fff; +} + +.jBox-Confirm-button-submit:hover { + background: #53a642; +} + +.jBox-Confirm-button-cancel:active, +.jBox-Confirm-button-submit:active { + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .26); +} + +/* jBox Notice */ + +.jBox-Notice { + -webkit-transition: margin .2s; + transition: margin .2s; +} + +.jBox-Notice .jBox-container { + border-radius: 3px; + box-shadow: 0 0 3px rgba(0, 0, 0, .2); + color: #fff; + text-shadow: 0 -1px 1px #000; + background: #333; + background-image: linear-gradient(to bottom, #444, #222); +} + +.jBox-Notice .jBox-content { + border-radius: 3px; + padding: 12px 20px; +} + +.jBox-Notice .jBox-title { + padding: 8px 20px 0; + font-weight: bold; +} + +.jBox-hasTitle.jBox-Notice .jBox-content { + padding-top: 5px; +} + +.jBox-Notice-color .jBox-container { + text-shadow: 0 -1px 1px rgba(0, 0, 0, .3); +} + +.jBox-Notice-gray .jBox-container { + color: #666; + text-shadow: 0 1px 1px #fff; + background: #f4f4f4; + background-image: linear-gradient(to bottom, #fafafa, #f0f0f0); +} + +.jBox-Notice-red .jBox-container { + background: #b02222; + background-image: linear-gradient(to bottom, #ee2222, #b02222); +} + +.jBox-Notice-green .jBox-container { + background: #70a800; + background-image: linear-gradient(to bottom, #95cc2a, #70a800); +} + +.jBox-Notice-blue .jBox-container { + background: #2b91d9; + background-image: linear-gradient(to bottom, #5abaff, #2b91d9); +} + +.jBox-Notice-yellow .jBox-container { + color: #744700; + text-shadow: 0 1px 1px rgba(255, 255, 255, .6); + background: #ffb11f; + background-image: linear-gradient(to bottom, #ffd665, #ffb11f); +} + +/* jBox Image */ + +.jBox-Image { + background: #fff; + padding: 8px 8px 45px; + border-radius: 5px; +} + +.jBox-Image .jBox-content { + padding: 0; + width: 100%; + height: 100%; +} + +.jBox-image-container { + border-radius: 5px; + background: #fff center center no-repeat; + position: absolute; + width: 100%; + height: 100%; + opacity: 0; +} + +.jBox-image-label { + box-sizing: border-box; + position: absolute; + background: #fff; + top: 100%; + left: 0; + width: 100%; + color: #333; + margin-top: -35px; + padding: 0 90px 5px 10px; + border-radius: 0 0 5px 5px; + -webkit-transition: opacity .3s; + transition: opacity .3s; + opacity: 0; +} + +.jBox-image-label.active { + opacity: 1; +} + +.jBox-image-pointer-next, +.jBox-image-pointer-prev { + position: absolute; + bottom: 0px; + width: 22px; + height: 45px; + background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijc0LjcgMjI0IDE4LjcgMzIiPg0KPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTkzLDIyNy40TDgwLjQsMjQwTDkzLDI1Mi42YzAuNCwwLjQsMC40LDEuMSwwLDEuNWwtMS42LDEuNmMtMC40LDAuNC0xLDAuNS0xLjUsMEw3NSwyNDAuN2MtMC40LTAuNC0wLjUtMSwwLTEuNWwxNC45LTE0LjljMC40LTAuNCwxLTAuNCwxLjUsMGwxLjYsMS42QzkzLjUsMjI2LjQsOTMuNCwyMjcsOTMsMjI3LjR6Ii8+DQo8L3N2Zz4=); + background-size: 11px auto; + cursor: pointer; + opacity: .6; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: opacity .2s; + transition: opacity .2s; +} + +.jBox-image-pointer-next:hover, +.jBox-image-pointer-prev:hover { + opacity: 1; +} + +.jBox-image-pointer-next { + right: 8px; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); +} + +.jBox-image-pointer-prev { + right: 30px; +} + +.jBox-image-open #jBox-overlay { + background-color: rgba(0, 0, 0, .86); +} + +.jBox-Image.jBox-loading .jBox-container:before { + left: auto; + top: auto; + bottom: -33px; + right: 55px; + margin-top: -9px; + margin-left: -9px; +} + +/* Close button */ + +.jBox-closeButton { + cursor: pointer; + position: absolute; +} + +.jBox-closeButton svg { + position: absolute; + top: 50%; + right: 50%; +} + +.jBox-closeButton path { + -webkit-transition: fill .2s; + transition: fill .2s; +} + +.jBox-closeButton path { + fill: #aaa; +} + +.jBox-closeButton:hover path { + fill: #888; +} + +.jBox-closeButton:active path { + fill: #666; +} + +/* Close button in overlay */ + +#jBox-overlay .jBox-closeButton { + top: 0; + right: 0; + width: 40px; + height: 40px; +} + +#jBox-overlay .jBox-closeButton svg { + width: 20px; + height: 20px; + margin-top: -10px; + margin-right: -10px; +} + +#jBox-overlay .jBox-closeButton path { + fill: #d2d4d6; +} + +#jBox-overlay .jBox-closeButton:hover path { + fill: #fff; +} + +#jBox-overlay .jBox-closeButton:active path { + fill: #b2b4b6; +} + +/* Close button in title */ + +.jBox-closeButton-title .jBox-closeButton { + top: 0; + right: 0; + bottom: 0; + width: 40px; +} + +.jBox-closeButton-title .jBox-closeButton svg { + width: 12px; + height: 12px; + margin-top: -6px; + margin-right: -6px; +} + +/* Close button in box */ + +.jBox-closeButton-box .jBox-closeButton { + top: -8px; + right: -10px; + width: 24px; + height: 24px; + background: #fff; + border-radius: 50%; +} + +.jBox-closeButton-box .jBox-closeButton svg { + width: 10px; + height: 10px; + margin-top: -5px; + margin-right: -5px; +} + +.jBox-hasTitle.jBox-Modal.jBox-closeButton-box .jBox-closeButton { + background: #f4f5f6; +} + +.jBox-closeButton-box:before { + content: ''; + position: absolute; + top: -8px; + right: -10px; + width: 24px; + height: 24px; + border-radius: 50%; + box-shadow: 0 0 5px rgba(0, 0, 0, .3); +} + +.jBox-pointerPosition-top.jBox-closeButton-box:before { + top: 4px; +} + +.jBox-pointerPosition-right.jBox-closeButton-box:before { + right: 2px; +} + +/* Overlay */ + +#jBox-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #000; + background-color: rgba(0, 0, 0, .6); +} + +/* Block scrolling */ + +body[class^="jBox-blockScroll-"], +body[class*=" jBox-blockScroll-"] { + overflow: hidden; +} + +/* Draggable */ + +.jBox-draggable { + cursor: move; +} + +/* Spinner */ + +@keyframes jBoxLoading { + to {transform: rotate(360deg);} +} + +@-webkit-keyframes jBoxLoading { + to {-webkit-transform: rotate(360deg);} +} + +.jBox-loading .jBox-content { + min-height: 32px; + min-width: 38px; + opacity: 0; +} + +.jBox-spinner { + position: absolute; + top: 50%; + left: 50%; + width: 20px; + height: 20px; + margin-top: -10px; + margin-left: -10px; +} + +.jBox-spinner:before { + content: 'Loading…'; + display: block; + width: 20px; + height: 20px; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.jBox-spinner:not(:required):before { + content: ''; + border-radius: 50%; + border: 2px solid rgba(0, 0, 0, .3); + border-top-color: rgba(0, 0, 0, .6); + animation: jBoxLoading .6s linear infinite; + -webkit-animation: jBoxLoading .6s linear infinite; +} + +/* IE8 fixes */ + +.jBox-IE8.jBox-Tooltip .jBox-container, +.jBox-IE8.jBox-Mouse .jBox-container { + border: 1px solid #aaa; +} + +.jBox-IE8 .jBox-pointer:after { + display: none; +} + +.jBox-IE8 .jBox-pointer { + border: 0; + background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNq01l0OwyAIAGAlvY+n8ZJ6Gk/EqqkNtf7ApCQ+LM34iuCmRUQzihjj6FH+kjWL8N4/Ph9GHpiTnC9SwDbhLGyvspSScc71KkOa/HpuuRhIK+psE2pjONouCQg7kBSEXUgC2tHo52mTTBpnaEATWlaYK6MrhIAaceWpOcsCrYp6FV4H/90zTWjUQ/gSevVQq0ecHqoOxWpYoO7p5O9ku2fnVtp7QAik2rsK3fnpWfjynJWpbw+1BkghurrYDjiCptg/4AxaYhJwBbEwDsiB2NgM5EIirAdKIDFGQSmU1+NaIPjJYt2I25vxT4ABAMhWvtle2YvmAAAAAElFTkSuQmCC); +} + +.jBox-IE8 .jBox-pointer-top { background-position: center top; } +.jBox-IE8 .jBox-pointer-bottom { background-position: center bottom; } +.jBox-IE8 .jBox-pointer-left { background-position: left center; } +.jBox-IE8 .jBox-pointer-right { background-position: right center; } + +.jBox-IE8.jBox-Modal .jBox-container { + border: 3px solid #aaa; +} + +/* No SVG support fixes */ + +.jBox-nosvg .jBox-closeButton:before { + font-family: Verdana, sans-serif; + content: 'x'; + text-align: center; + font-size: 18px; + color: #888; +} diff --git a/js/libraries/jbox/jBox.js b/js/libraries/jbox/jBox.js new file mode 100755 index 00000000..8b3162c5 --- /dev/null +++ b/js/libraries/jbox/jBox.js @@ -0,0 +1,1633 @@ +/* +--- +description: jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips, notices and more. + +authors: Stephan Wagner (http://stephanwagner.me) + +license: MIT (http://opensource.org/licenses/MIT) + +requires: jQuery 1.11.1 (http://code.jquery.com/jquery-1.11.1.min.js) + jQuery 2.1.1 (http://code.jquery.com/jquery-2.1.1.min.js) + +documentation: http://stephanwagner.me/jBox/documentation + +demos: http://stephanwagner.me/jBox/demos +... +*/ + +(function (root, factory) { + + // AMD. Register as an anonymous module + if (typeof define === 'function' && define.amd) { + define(['jQuery'], function (jQuery) { + return (root.jBox = factory(jQuery)); + }); + + // Node. Does not work with strict CommonJS, but only CommonJS-like enviroments that support module.exports, like Node + } else if (typeof exports === 'object') { + module.exports = factory(require('jQuery')); + + // Browser globals + } else { + root.jBox = factory(root.jQuery); + } +}(this, function (jQuery) { + + var jBox = function (type, options) { + + this.options = { + + // jBox ID + id: null, // Choose a unique id, otherwise jBox will set one for you (jBoxID1, jBoxID2, ...) + + // Dimensions + width: 'auto', // Width of content area (e.g. 'auto', 100) + height: 'auto', // Height of content area + minWidth: null, // Minimum width + maxHeight: null, // Minimum height + minWidth: null, // Maximum width + maxHeight: null, // Minimum height + + // Attach + attach: null, // Attach jBox to elements (if no target element is provided, jBox will use the attached element as target) + trigger: 'click', // The event to open or close your jBoxes, use 'click' or 'mouseenter' + preventDefault: false, // Prevent default event when opening jBox (e.g. don't follow the href in a link when clicking on it) + + // Content + title: null, // Adds a title to your jBox + content: null, // You can use a string to set text or HTML as content, or an element selector (e.g. jQuery('#jBox-content')) to append one or several elements (elements appended will get style display: 'block', so hide them with CSS style display: 'none' beforehand) + getTitle: null, // Get the title from an attribute when jBox opens + getContent: null, // Get the content from an attribute when jBox opens + isolateScroll: true, // Isolates scrolling to content container + + // AJAX request + ajax: { // Setting an url will make an AJAX call when jBox opens + url: null, // URL to send the AJAX request to + data: '', // Data to send with your AJAX call (e.g. 'id=82&limit=10') + // Optional you can add any jQuery AJAX option (http://api.jquery.com/jquery.ajax/) + reload: false, // Resend the ajax call every time jBox opens + getData: 'data-ajax', // The attribute in the source element where the AJAX will look for the data to send with, e.g. data-ajax="id=82&limit=10" + setContent: true, // Automatically set the response as new content when the AJAX call is finished + spinner: true // Hides the current content and adds a spinner while loading, you can pass html content to add your own spinner, e.g. spinner: '
' + }, + + // Position + target: null, // The target element where jBox will be opened + position: { + x: 'center', // Horizontal Position (Use a number, 'left', 'right' or 'center') + y: 'center' // Vertical Position (Use a number, 'top', 'bottom' or 'center') + }, + outside: null, // Use 'x', 'y', or 'xy' to move your jBox outside of the target element + offset: 0, // Offset to final position, you can set different values for x and y with an object e.g. {x: 15, y: 0} + + attributes: { // Note that attributes can only be 'left' or 'right' when using numbers for position, e.g. {x: 300, y: 20} + x: 'left', // Horizontal position, use 'left' or 'right' + y: 'top' // Vertical position, use 'top' or 'bottom' + }, + adjustPosition: false, // Adjusts the position when there is not enough space (use true, 'flip' or 'move') + adjustTracker: false, // By default jBox adjusts the position when opening, to adjust when scrolling or resizing, use 'scroll', 'resize' or 'true' (both events) + adjustDistance: 5, // How far from the window edge we start adjusting, use an object to set different values: {bottom: 5, top: 50, left: 5, right: 20} + fixed: false, // Your jBox will stay on position when scrolling + reposition: false, // Calculates new position when the window-size changes + repositionOnOpen: true, // Calculates new position each time jBox opens (rather than only when it opens the first time) + repositionOnContent: true, // Calculates new position when the content changes with .setContent() or .setTitle() + + // Pointer + pointer: false, // Your pointer will always point towards the target element, so the option outside should be 'x' or 'y' + pointTo: 'target', // Setting something else than 'target' will add a pointer even if there is no target element set or found (Use 'top', 'bottom', 'left' or 'right') + + // Animations + fade: 180, // Fade duration in ms, set to 0 or false to disable + animation: null, // Animation when opening or closing (use 'pulse', 'zoomIn', 'zoomOut', 'move', 'slide', 'flip', 'tada') (CSS inspired from Daniel Edens Animate.css: http://daneden.me/animate) + + // Appearance + theme: 'Default', // Set a jBox theme class + addClass: '', // Adds classes to the wrapper + overlay: false, // Adds an overlay when jBox opens (set color and opacity with CSS) + zIndex: 10000, // Use a high zIndex (your overlay will have the lowest zIndex of all your jBoxes (with overlays) minus one) + + // Delays + delayOpen: 0, // Delay opening in ms (Note that the delay will be ignored if your jBox didn't finish closing) + delayClose: 0, // 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 events + closeOnEsc: false, // Close jBox when pressing [esc] key + closeOnClick: false, // Close jBox with mouseclick, use 'true' (click anywhere), 'box' (click on jBox itself), 'overlay' (click on the overlay), 'body' (click anywhere but jBox) + closeOnMouseleave: false, // Close jBox when the mouse leaves the jBox area or the area of the attached element + closeButton: false, // Adds a close button to your jBox, use 'title', 'overlay', 'box' or true (true will add the button to overlay, title or box, in that order if any of those elements can be found) + + // Other options + constructOnInit: false, // Construct jBox when it's being initialized + blockScroll: false, // When jBox is open, block scrolling + appendTo: jQuery('body'), // Provide an element if you want the jBox to be positioned inside a specific element (only useful for fixed positions or when position values are numbers) + draggable: null, // Make your jBox draggable (use 'true', 'title' or provide an element as handle) (inspired from Chris Coyiers CSS-Tricks http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/) + dragOver: true, // When you have multiple draggable jBoxes, the one you select will always move over the other ones + + // Events // Note: You can use 'this' in the event functions, it refers to your jBox object (e.g. onInit: function() { this.open(); }) + onInit: null, // Triggered when jBox is initialized + onBeforeInit: null, // Triggered when jBox starts initializing, useful to add your own internal functions + onAttach: null, // Triggered when jBox attached itself to elements + // TODO onPosition + onCreated: null, // Triggered when jBox is created and is availible in DOM + onOpen: null, // Triggered when jBox opens + onClose: null, // Triggered when jBox closes + onCloseComplete: null, // Triggered when jBox is completely closed (when fading is finished, useful if you want to destroy the jBox when it is closed) + + // Only for type "Confirm" + confirmButton: 'Submit', // Text for the submit button + cancelButton: 'Cancel', // Text for the cancel button + confirm: null, // Function to execute when clicking the submit button. By default jBox will use firstly the onclick and secondly the href attribute + cancel: null, // Function to execute when clicking the cancel button + + // Only for type "Notice" + autoClose: 7000, // Time when jBox should close automatically + color: null, // Makes your notices colorful, use 'black', 'red', 'green', 'blue', 'yellow' + stack: true, // Set to false to disable notice-stacking + audio: false, // Set the url to an audio file without extention, e.g. '/url/filename'. jBox will look for an .mp3 and an .ogg file + volume: 100, // Percent of volume for audio files + + // Only for type "Image" + src: 'href', // The attribute where jBox gets the image source from, e.g. href="/path_to_image/image.jpg" + gallery: 'data-jbox-image', // The attribute where you define the image gallery, e.g. data-jbox-image="gallery1" + imageLabel: 'title', // The attribute where jBox gets the image label from, e.g. title="My label" + imageFade: 600, // The fade duration for images + imageSize: 'contain' // How to display the images: Use CSS background-position values, e.g. 'cover', 'contain', 'auto', 'initial', '50% 50%' + }; + + // Default type options + this.defaultOptions = { + // Default options for tooltips + 'Tooltip': { + getContent: 'title', + trigger: 'mouseenter', + position: {x: 'center', y: 'top'}, + outside: 'y', + pointer: true, + adjustPosition: true, + reposition: true + }, + // Default options for mouse tooltips + 'Mouse': { + target: 'mouse', + position: {x: 'right', y: 'bottom'}, + offset: 15, + trigger: 'mouseenter', + adjustPosition: 'flip' + }, + // Default options for modal windows + 'Modal': { + target: jQuery(window), + fixed: true, + blockScroll: true, + closeOnEsc: true, + closeOnClick: 'overlay', + closeButton: true, + overlay: true, + animation: 'zoomOut' + }, + // Default options for modal confirm windows + 'Confirm': { + target: jQuery(window), + fixed: true, + attach: jQuery('[data-confirm]'), + getContent: 'data-confirm', + content: 'Do you really want to do this?', + minWidth: 320, + maxWidth: 460, + blockScroll: true, + closeOnEsc: true, + closeOnClick: 'overlay', + closeButton: true, + overlay: true, + animation: 'zoomOut', + preventDefault: true, + _onAttach: function(el) { + // Extract the href or the onclick event if no submit event is passed + if (!this.options.confirm) { + var submit = el.attr('onclick') ? el.attr('onclick') : (el.attr('href') ? (el.attr('target') ? 'window.open("' + el.attr('href') + '", "' + el.attr('target') + '");' : 'window.location.href = "' + el.attr('href') + '";') : ''); + el.prop('onclick', null).data('jBox-Confirm-submit', submit); + } + }, + _onCreated: function() { + // Add a footer to the jBox container + this.footer = jQuery('