esqueleto basico

This commit is contained in:
Sergio 2017-09-25 14:03:53 +02:00
parent 8eb441e5f5
commit 0dc723713d
350 changed files with 90726 additions and 0 deletions

View file

@ -0,0 +1,5 @@
blop.mp3 sound file recorded by Mark DiAngelo
Downloaded from http://soundbible.com/2067-Blop.html
All other files created by rjsken (http://www.fiverr.com/rjsken)
All files are royalty free (http://en.wikipedia.org/wiki/Royalty-free)

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
bower_components/jbox/Source/audio/blop.mp3 vendored Executable file

Binary file not shown.

BIN
bower_components/jbox/Source/audio/blop.ogg vendored Executable file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

463
bower_components/jbox/Source/jBox.css vendored Normal file
View file

@ -0,0 +1,463 @@
/* Global */
.jBox-wrapper {
text-align: left;
box-sizing: border-box;
}
.jBox-title,
.jBox-content,
.jBox-container {
position: relative;
word-break: break-word;
box-sizing: border-box;
}
.jBox-container {
background: #fff;
}
.jBox-content {
padding: 8px 10px;
overflow-x: hidden;
overflow-y: auto;
transition: opacity .2s;
}
/* jBox Tooltip */
.jBox-Tooltip .jBox-container,
.jBox-Mouse .jBox-container {
border-radius: 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, .25);
}
.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;
}
.jBox-Mouse {
pointer-events: none;
}
/* 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: 30px;
height: 12px;
}
.jBox-pointer-left,
.jBox-pointer-right {
width: 12px;
height: 30px;
}
.jBox-pointer:after {
content: '';
width: 20px;
height: 20px;
position: absolute;
background: #fff;
transform: rotate(45deg);
}
.jBox-pointer-top:after {
left: 5px;
top: 6px;
box-shadow: -1px -1px 2px rgba(0, 0, 0, .15);
}
.jBox-pointer-right:after {
top: 5px;
right: 6px;
box-shadow: 1px -1px 2px rgba(0, 0, 0, .15);
}
.jBox-pointer-bottom:after {
left: 5px;
bottom: 6px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}
.jBox-pointer-left:after {
top: 5px;
left: 6px;
box-shadow: -1px 1px 2px rgba(0, 0, 0, .15);
}
/* jBox Modal */
.jBox-Modal .jBox-container {
border-radius: 4px;
}
.jBox-Modal .jBox-content {
padding: 15px 20px;
}
.jBox-Modal .jBox-title {
border-radius: 4px 4px 0 0;
padding: 15px 20px;
background: #fafafa;
border-bottom: 1px solid #eee;
}
.jBox-Modal .jBox-footer {
border-radius: 0 0 4px 4px;
}
.jBox-Modal.jBox-closeButton-title .jBox-title {
padding-right: 55px;
}
.jBox-Modal .jBox-container,
.jBox-Modal.jBox-closeButton-box:before {
box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4);
}
/* Close button */
.jBox-closeButton {
cursor: pointer;
position: absolute;
}
.jBox-closeButton svg {
position: absolute;
top: 50%;
right: 50%;
}
.jBox-closeButton path {
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,
.jBox-overlay .jBox-closeButton:active path {
fill: #ddd;
}
.jBox-overlay .jBox-closeButton:hover path {
fill: #fff;
}
/* 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: #fafafa;
}
.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: 5px;
}
.jBox-pointerPosition-right.jBox-closeButton-box:before {
right: 2px;
}
/* Overlay */
.jBox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .82);
}
/* Footer */
.jBox-footer {
background: #fafafa;
border-top: 1px solid #eee;
padding: 8px 10px;
border-radius: 0 0 3px 3px;
}
/* Block scrolling */
body[class^="jBox-blockScroll-"],
body[class*=" jBox-blockScroll-"] {
overflow: hidden;
}
/* Draggable */
.jBox-draggable {
cursor: move;
}
/* Spinner */
@keyframes jBoxLoading {
to { transform: rotate(360deg); }
}
.jBox-loading .jBox-content {
opacity: .2;
}
.jBox-loading-spinner .jBox-content {
min-height: 38px !important;
min-width: 38px !important;
opacity: 0;
}
.jBox-spinner {
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
.jBox-spinner:before {
display: block;
box-sizing: border-box;
content: '';
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, .2);
border-top-color: rgba(0, 0, 0, .8);
animation: jBoxLoading .6s linear infinite;
}
/* Animations */
[class^="jBox-animated-"],
[class*=" jBox-animated-"] {
animation-fill-mode: both;
}
@keyframes jBox-tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.8) rotate(-4deg);}
30%, 50%, 70%, 90% {transform: scale(1.2) rotate(4deg);}
40%, 60%, 80% {transform: scale(1.2) rotate(-4deg);}
100% {transform: scale(1) rotate(0);}
}
.jBox-animated-tada {
animation: jBox-tada 1s;
}
@keyframes jBox-tadaSmall {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-2deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(2deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-2deg);}
100% {transform: scale(1) rotate(0);}
}
.jBox-animated-tadaSmall {
animation: jBox-tadaSmall 1s;
}
@keyframes jBox-flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
.jBox-animated-flash {
animation: jBox-flash .5s;
}
@keyframes jBox-shake {
0%, 100% {transform: translateX(0);}
20%, 60% {transform: translateX(-6px);}
40%, 80% {transform: translateX(6px);}
}
.jBox-animated-shake {
animation: jBox-shake .4s;
}
@keyframes jBox-pulseUp {
0% {transform: scale(1);}
50% {transform: scale(1.15);}
100% {transform: scale(1);}
}
.jBox-animated-pulseUp {
animation: jBox-pulseUp .25s;
}
@keyframes jBox-pulseDown {
0% {transform: scale(1);}
50% {transform: scale(0.85);}
100% {transform: scale(1);}
}
.jBox-animated-pulseDown {
animation: jBox-pulseDown .25s;
}
@keyframes jBox-popIn {
0% {transform: scale(0);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.jBox-animated-popIn {
animation: jBox-popIn .25s;
}
@keyframes jBox-popOut {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(0);}
}
.jBox-animated-popOut {
animation: jBox-popOut .25s;
}
@keyframes jBox-fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.jBox-animated-fadeIn {
animation: jBox-fadeIn .2s;
}
@keyframes jBox-fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.jBox-animated-fadeOut {
animation: jBox-fadeOut .2s;
}
@keyframes jBox-slideUp {
0% {transform: translateY(0);}
100% {transform: translateY(-300px); opacity: 0;}
}
.jBox-animated-slideUp {
animation: jBox-slideUp .4s;
}
@keyframes jBox-slideRight {
0% {transform: translateX(0);}
100% {transform: translateX(300px); opacity: 0;}
}
.jBox-animated-slideRight {
animation: jBox-slideRight .4s;
}
@keyframes jBox-slideDown {
0% {transform: translateY(0);}
100% {transform: translateY(300px); opacity: 0;}
}
.jBox-animated-slideDown {
animation: jBox-slideDown .4s;
}
@keyframes jBox-slideLeft {
0% {transform: translateX(0);}
100% {transform: translateX(-300px); opacity: 0;}
}
.jBox-animated-slideLeft {
animation: jBox-slideLeft .4s;
}

1833
bower_components/jbox/Source/jBox.js vendored Normal file

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,58 @@
.jBox-Confirm .jBox-content {
text-align: center;
padding: 46px 35px;
}
.jBox-Confirm-footer {
height: 46px;
}
.jBox-Confirm-button {
display: block;
float: left;
cursor: pointer;
text-align: center;
width: 50%;
line-height: 46px;
height: 46px;
overflow: hidden;
padding: 0 10px;
transition: color .2s, background-color .2s;
box-sizing: border-box;
}
.jBox-Confirm-button-cancel {
border-bottom-left-radius: 4px;
background: #ddd;
color: #666;
}
.jBox-Confirm-button-cancel:hover,
.jBox-Confirm-button-cancel:active {
background: #ccc;
}
.jBox-Confirm-button-submit {
border-bottom-right-radius: 4px;
background: #7d0;
color: #fff;
}
.jBox-Confirm-button-submit:hover,
.jBox-Confirm-button-submit:active {
background: #6c0;
}
.jBox-Confirm-button-cancel:active,
.jBox-Confirm-button-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
@media (max-width: 500px) {
.jBox-Confirm .jBox-content {
padding: 32px 20px;
}
}

View file

@ -0,0 +1,74 @@
/**
* jBox Confirm plugin: Add a confirm dialog to links, buttons, etc.
*
* Author: Stephan Wagner (https://stephanwagner.me)
*
* License: MIT (https://opensource.org/licenses/MIT)
*
* Requires: jBox (https://code.jboxcdn.com/jBox.min.js)
*/
jQuery(document).ready(function () {
new jBox.plugin('Confirm', {
// Options (https://stephanwagner.me/jBox/options#options-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 the onclick or href attribute in that order if found
cancel: null, // Function to execute when clicking the cancel button
closeOnConfirm: true, // Close jBox when the user clicks the confirm button
target: window,
addClass: 'jBox-Modal',
fixed: true,
attach: '[data-confirm]',
getContent: 'data-confirm',
content: 'Do you really want to do this?',
minWidth: 360,
maxWidth: 500,
blockScroll: true,
closeOnEsc: true,
closeOnClick: false,
closeButton: false,
overlay: true,
animation: 'zoomIn',
preventDefault: true,
// Triggered when jBox is attached to the element
_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);
}
},
// Triggered when jBox was created
_onCreated: function ()
{
// Add a footer to the jBox container
this.footer = jQuery('<div class="jBox-Confirm-footer"/>');
jQuery('<div class="jBox-Confirm-button jBox-Confirm-button-cancel"/>').html(this.options.cancelButton).click(function () { this.options.cancel && this.options.cancel(); this.close(); }.bind(this)).appendTo(this.footer);
this.submitButton = jQuery('<div class="jBox-Confirm-button jBox-Confirm-button-submit"/>').html(this.options.confirmButton).appendTo(this.footer);
this.footer.appendTo(this.container);
},
// Triggered when jBox is opened
_onOpen: function ()
{
// Set the new action for the submit button
this.submitButton.off('click.jBox-Confirm' + this.id).on('click.jBox-Confirm' + this.id, function () { this.options.confirm ? this.options.confirm() : eval(this.source.data('jBox-Confirm-submit')); this.options.closeOnConfirm && this.close(); }.bind(this));
}
});
});

View file

@ -0,0 +1 @@
jQuery(document).ready(function(){new jBox.plugin("Confirm",{confirmButton:"Submit",cancelButton:"Cancel",confirm:null,cancel:null,closeOnConfirm:!0,target:window,addClass:"jBox-Modal",fixed:!0,attach:"[data-confirm]",getContent:"data-confirm",content:"Do you really want to do this?",minWidth:360,maxWidth:500,blockScroll:!0,closeOnEsc:!0,closeOnClick:!1,closeButton:!1,overlay:!0,animation:"zoomIn",preventDefault:!0,_onAttach:function(t){if(!this.options.confirm){var o=t.attr("onclick")?t.attr("onclick"):t.attr("href")?t.attr("target")?'window.open("'+t.attr("href")+'", "'+t.attr("target")+'");':'window.location.href = "'+t.attr("href")+'";':"";t.prop("onclick",null).data("jBox-Confirm-submit",o)}},_onCreated:function(){this.footer=jQuery('<div class="jBox-Confirm-footer"/>'),jQuery('<div class="jBox-Confirm-button jBox-Confirm-button-cancel"/>').html(this.options.cancelButton).click(function(){this.options.cancel&&this.options.cancel(),this.close()}.bind(this)).appendTo(this.footer),this.submitButton=jQuery('<div class="jBox-Confirm-button jBox-Confirm-button-submit"/>').html(this.options.confirmButton).appendTo(this.footer),this.footer.appendTo(this.container)},_onOpen:function(){this.submitButton.off("click.jBox-Confirm"+this.id).on("click.jBox-Confirm"+this.id,function(){this.options.confirm?this.options.confirm():eval(this.source.data("jBox-Confirm-submit")),this.options.closeOnConfirm&&this.close()}.bind(this))}})});

View file

@ -0,0 +1,168 @@
.jBox-Image .jBox-container {
background-color: transparent;
}
.jBox-Image .jBox-content {
padding: 0;
width: 100%;
height: 100%;
}
.jBox-image-container {
background: center center no-repeat;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
.jBox-image-label-container {
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 40px;
z-index: 100;
}
.jBox-image-label {
box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
left: 0;
color: #fff;
padding: 8px 40px;
line-height: 24px;
transition: opacity .36s;
opacity: 0;
z-index: 0;
pointer-events: none;
}
.jBox-image-label.expanded {
background: #000;
}
.jBox-image-label:not(.expanded) {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.jBox-image-label.active {
opacity: 1;
pointer-events: all;
}
.jBox-image-pointer-next,
.jBox-image-pointer-prev {
position: absolute;
bottom: 0;
width: 40px;
height: 40px;
cursor: pointer;
opacity: .8;
transition: opacity .2s;
background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijc0LjcgMjI0IDE4LjcgMzIiPg0KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTkzLDIyNy40TDgwLjQsMjQwTDkzLDI1Mi42YzAuNCwwLjQsMC40LDEuMSwwLDEuNWwtMS42LDEuNmMtMC40LDAuNC0xLDAuNS0xLjUsMEw3NSwyNDAuN2MtMC40LTAuNC0wLjUtMSwwLTEuNWwxNC45LTE0LjljMC40LTAuNCwxLTAuNCwxLjUsMGwxLjYsMS42QzkzLjUsMjI2LjQsOTMuNCwyMjcsOTMsMjI3LjR6Ii8+DQo8L3N2Zz4=);
background-size: 11px auto;
user-select: none;
z-index: 1;
}
.jBox-image-pointer-next:hover,
.jBox-image-pointer-prev:hover {
opacity: 1;
}
.jBox-image-pointer-next {
right: 0;
transform: scaleX(-1);
}
.jBox-image-pointer-prev {
left: 0;
}
.jBox-image-counter-container {
position: absolute;
right: 40px;
height: 40px;
line-height: 40px;
font-size: 13px;
color: #fff;
text-align: right;
display: none;
}
.jBox-image-has-counter .jBox-image-counter-container {
display: block;
}
.jBox-image-has-counter .jBox-image-label:not(.expanded) {
padding-right: 80px;
text-indent: 40px;
}
.jBox-overlay.jBox-overlay-Image {
background: #000;
}
.jBox-image-not-found {
background: #000;
}
.jBox-image-not-found:before {
content: '';
box-sizing: border-box;
display: block;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
left: 50%;
border: 5px solid #222;
border-radius: 50%;
}
.jBox-image-not-found:after {
content: '';
display: block;
box-sizing: content-box;
z-index: auto;
width: 6px;
height: 74px;
margin-top: -37px;
margin-left: -3px;
position: absolute;
top: 50%;
left: 50%;
background: #222;
transform: rotateZ(45deg);
transform-origin: 50% 50% 0;
}
/* Image spinner */
@keyframes jBoxImageLoading {
to { transform: rotate(360deg); }
}
.jBox-image-loading .jBox-container:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin-top: -16px;
margin-left: -16px;
border: 4px solid #333;
border-bottom-color: #666;
animation: jBoxImageLoading 1.2s linear infinite;
border-radius: 50%;
}

View file

@ -0,0 +1,249 @@
/**
* jBox Image plugin: Adds a lightbox to your images
*
* Author: Stephan Wagner (https://stephanwagner.me)
*
* License: MIT (https://opensource.org/licenses/MIT)
*
* Requires: jBox (https://code.jboxcdn.com/jBox.min.js)
*/
jQuery(document).ready(function () {
new jBox.plugin('Image', {
// Options (https://stephanwagner.me/jBox/options#options-confirm)
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 to set the galleries, e.g. data-jbox-image="gallery1"
imageLabel: 'title', // The attribute where jBox gets the image label from, e.g. title="My label"
imageFade: 360, // The fade duration for images in ms
imageSize: 'contain', // How to display the images. Use CSS background-position values, e.g. 'cover', 'contain', 'auto', 'initial', '50% 50%'
imageCounter: false, // Set to true to add an image counter, e.g. 4/20
imageCounterSeparator: '/', // HTML to separate the current image number from all image numbers, e.g. '/' or ' of '
target: window,
attach: '[data-jbox-image]',
fixed: true,
blockScroll: true,
closeOnEsc: true,
closeOnClick: 'button',
closeButton: true,
overlay: true,
animation: 'zoomIn',
preventDefault: true,
width: '100%',
height: '100%',
adjustDistance: {
top: 40,
right: 5,
bottom: 40,
left: 5
},
// Triggered when jBox is initialized
_onInit: function ()
{
// Initial images and z-index
this.images = this.currentImage = {};
this.imageZIndex = 1;
// Loop through images, sort and save in global variable
this.attachedElements && jQuery.each(this.attachedElements, function (index, item)
{
item = jQuery(item);
// Abort if the item was added to a gallery already
if (item.data('jBox-image-gallery')) return;
// Add item to a gallery
var gallery = item.attr(this.options.gallery) || 'default';
!this.images[gallery] && (this.images[gallery] = []);
this.images[gallery].push({src: item.attr(this.options.src), label: (item.attr(this.options.imageLabel) || '')});
// Remove the title attribute so it won't show the browsers tooltip
this.options.imageLabel == 'title' && item.removeAttr('title');
// Store data in source element for easy access
item.data('jBox-image-gallery', gallery);
item.data('jBox-image-id', (this.images[gallery].length - 1));
}.bind(this));
// Helper to inject the image into content area
var appendImage = function (gallery, id, preload, open, error)
{
// Abort if image was appended already
if (jQuery('#jBox-image-' + gallery + '-' + id).length) return;
// Create image container
var image = jQuery('<div/>', {
id: 'jBox-image-' + gallery + '-' + id,
'class': 'jBox-image-container' + (error ? ' jBox-image-not-found' : '') + (!open && !preload ? ' jBox-image-' + gallery + '-current' : '')
}).css({
backgroundImage: error ? '' : 'url("' + this.images[gallery][id].src + '")',
backgroundSize: this.options.imageSize,
opacity: (open ? 1 : 0),
zIndex: (preload ? 0 : this.imageZIndex++)
}).appendTo(this.content);
// Create labels
jQuery('<div/>', {
id: 'jBox-image-label-' + gallery + '-' + id,
'class': 'jBox-image-label' + (open ? ' active' : '')
}).html(this.images[gallery][id].label).click(function () { $(this).toggleClass('expanded'); }).appendTo(this.imageLabel);
// Show image
!open && !preload && image.animate({opacity: 1}, this.options.imageFade);
}.bind(this);
// Helper to show new image label
var showLabel = function (gallery, id)
{
jQuery('.jBox-image-label.active').removeClass('active expanded');
jQuery('#jBox-image-label-' + gallery + '-' + id).addClass('active');
};
// Show images when they are loaded or load them if not
this.showImage = function (img)
{
// Get the gallery and the image id from the next or the previous image
if (img != 'open') {
var gallery = this.currentImage.gallery;
var id = this.currentImage.id + (1 * (img == 'prev') ? -1 : 1);
id = id > (this.images[gallery].length - 1) ? 0 : (id < 0 ? (this.images[gallery].length - 1) : id);
// Or get image data from source element
} else {
var gallery = this.source.data('jBox-image-gallery');
var id = this.source.data('jBox-image-id');
// Remove or show the next and prev buttons
jQuery('.jBox-image-pointer-prev, .jBox-image-pointer-next').css({display: (this.images[gallery].length > 1 ? 'block' : 'none')});
}
// If there is a current image already shown, hide it
if (jQuery('.jBox-image-' + gallery + '-current').length) {
jQuery('.jBox-image-' + gallery + '-current').removeClass('jBox-image-' + gallery + '-current').animate({opacity: 0}, (img == 'open') ? 0 : this.options.imageFade);
}
// Set new current image
this.currentImage = {gallery: gallery, id: id};
// Show image if it already exists
if (jQuery('#jBox-image-' + gallery + '-' + id).length) {
jQuery('#jBox-image-' + gallery + '-' + id).addClass('jBox-image-' + gallery + '-current').css({zIndex: this.imageZIndex++, opacity: 0}).animate({opacity: 1}, (img == 'open') ? 0 : this.options.imageFade);
showLabel(gallery, id);
// Load image
} else {
this.wrapper.addClass('jBox-image-loading');
jQuery('<img src="' + this.images[gallery][id].src + '"/>').each(function ()
{
var tmpImg = new Image();
tmpImg.onload = function ()
{
appendImage(gallery, id, false);
showLabel(gallery, id);
this.wrapper.removeClass('jBox-image-loading');
}.bind(this);
tmpImg.onerror = function () {
appendImage(gallery, id, false, null, true);
showLabel(gallery, id);
this.wrapper.removeClass('jBox-image-loading');
}.bind(this);
tmpImg.src = this.images[gallery][id].src;
}.bind(this));
}
// Update the image counter numbers
if (this.imageCounter) {
if (this.images[gallery].length > 1) {
this.wrapper.addClass('jBox-image-has-counter');
this.imageCounter.find('.jBox-image-counter-all').html(this.images[gallery].length);
this.imageCounter.find('.jBox-image-counter-current').html(id + 1);
} else {
this.wrapper.removeClass('jBox-image-has-counter');
}
}
// Preload next image
var next_id = id + 1;
next_id = next_id > (this.images[gallery].length - 1) ? 0 : (next_id < 0 ? (this.images[gallery].length - 1) : next_id);
(!jQuery('#jBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + this.images[gallery][next_id].src + '"/>').each(function ()
{
var tmpImg = new Image();
tmpImg.onload = function ()
{
appendImage(gallery, next_id, true);
}.bind(this);
tmpImg.onerror = function ()
{
appendImage(gallery, next_id, true, null, true);
}.bind(this);
tmpImg.src = this.images[gallery][next_id].src;
}.bind(this));
};
},
// Triggered when jBox was created
_onCreated: function ()
{
// Append image label containers
this.imageLabel = jQuery('<div/>', {'class': 'jBox-image-label-container'}).appendTo(this.wrapper);
this.imageLabel.append(jQuery('<div/>', {'class': 'jBox-image-pointer-prev', click: function () { this.showImage('prev'); }.bind(this)})).append(jQuery('<div/>', {'class': 'jBox-image-pointer-next', click: function () { this.showImage('next'); }.bind(this)}));
// Creating the image counter containers
if (this.options.imageCounter) {
this.imageCounter = jQuery('<div/>', {'class': 'jBox-image-counter-container'}).appendTo(this.wrapper);
this.imageCounter.append(jQuery('<span/>', {'class': 'jBox-image-counter-current'})).append(jQuery('<span/>').html(this.options.imageCounterSeparator)).append(jQuery('<span/>', {'class': 'jBox-image-counter-all'}));
}
},
// Triggered when jBox opens
_onOpen: function ()
{
// Add key events
jQuery(document).on('keyup.jBox-Image-' + this.id, function (ev) {
(ev.keyCode == 37) && this.showImage('prev');
(ev.keyCode == 39) && this.showImage('next');
}.bind(this));
// Load the image from the attached element
this.showImage('open');
},
// Triggered when jBox closes
_onClose: function ()
{
// Remove key events
jQuery(document).off('keyup.jBox-Image-' + this.id);
},
// Triggered when jBox finished closing
_onCloseComplete: function ()
{
// Hide all image containers
this.wrapper.find('.jBox-image-container').css('opacity', 0);
}
});
});

View file

@ -0,0 +1 @@
jQuery(document).ready(function(){new jBox.plugin("Image",{src:"href",gallery:"data-jbox-image",imageLabel:"title",imageFade:360,imageSize:"contain",imageCounter:!1,imageCounterSeparator:"/",target:window,attach:"[data-jbox-image]",fixed:!0,blockScroll:!0,closeOnEsc:!0,closeOnClick:"button",closeButton:!0,overlay:!0,animation:"zoomIn",preventDefault:!0,width:"100%",height:"100%",adjustDistance:{top:40,right:5,bottom:40,left:5},_onInit:function(){this.images=this.currentImage={},this.imageZIndex=1,this.attachedElements&&jQuery.each(this.attachedElements,function(e,i){if(i=jQuery(i),!i.data("jBox-image-gallery")){var a=i.attr(this.options.gallery)||"default";!this.images[a]&&(this.images[a]=[]),this.images[a].push({src:i.attr(this.options.src),label:i.attr(this.options.imageLabel)||""}),"title"==this.options.imageLabel&&i.removeAttr("title"),i.data("jBox-image-gallery",a),i.data("jBox-image-id",this.images[a].length-1)}}.bind(this));var e=function(e,i,a,t,n){if(!jQuery("#jBox-image-"+e+"-"+i).length){var o=jQuery("<div/>",{id:"jBox-image-"+e+"-"+i,class:"jBox-image-container"+(n?" jBox-image-not-found":"")+(t||a?"":" jBox-image-"+e+"-current")}).css({backgroundImage:n?"":'url("'+this.images[e][i].src+'")',backgroundSize:this.options.imageSize,opacity:t?1:0,zIndex:a?0:this.imageZIndex++}).appendTo(this.content);jQuery("<div/>",{id:"jBox-image-label-"+e+"-"+i,class:"jBox-image-label"+(t?" active":"")}).html(this.images[e][i].label).click(function(){$(this).toggleClass("expanded")}).appendTo(this.imageLabel),!t&&!a&&o.animate({opacity:1},this.options.imageFade)}}.bind(this),i=function(e,i){jQuery(".jBox-image-label.active").removeClass("active expanded"),jQuery("#jBox-image-label-"+e+"-"+i).addClass("active")};this.showImage=function(a){if("open"!=a){var t=this.currentImage.gallery,n=this.currentImage.id+(1*("prev"==a)?-1:1);n=n>this.images[t].length-1?0:n<0?this.images[t].length-1:n}else{var t=this.source.data("jBox-image-gallery"),n=this.source.data("jBox-image-id");jQuery(".jBox-image-pointer-prev, .jBox-image-pointer-next").css({display:this.images[t].length>1?"block":"none"})}jQuery(".jBox-image-"+t+"-current").length&&jQuery(".jBox-image-"+t+"-current").removeClass("jBox-image-"+t+"-current").animate({opacity:0},"open"==a?0:this.options.imageFade),this.currentImage={gallery:t,id:n},jQuery("#jBox-image-"+t+"-"+n).length?(jQuery("#jBox-image-"+t+"-"+n).addClass("jBox-image-"+t+"-current").css({zIndex:this.imageZIndex++,opacity:0}).animate({opacity:1},"open"==a?0:this.options.imageFade),i(t,n)):(this.wrapper.addClass("jBox-image-loading"),jQuery('<img src="'+this.images[t][n].src+'"/>').each(function(){var a=new Image;a.onload=function(){e(t,n,!1),i(t,n),this.wrapper.removeClass("jBox-image-loading")}.bind(this),a.onerror=function(){e(t,n,!1,null,!0),i(t,n),this.wrapper.removeClass("jBox-image-loading")}.bind(this),a.src=this.images[t][n].src}.bind(this))),this.imageCounter&&(this.images[t].length>1?(this.wrapper.addClass("jBox-image-has-counter"),this.imageCounter.find(".jBox-image-counter-all").html(this.images[t].length),this.imageCounter.find(".jBox-image-counter-current").html(n+1)):this.wrapper.removeClass("jBox-image-has-counter"));var o=n+1;o=o>this.images[t].length-1?0:o<0?this.images[t].length-1:o,!jQuery("#jBox-image-"+t+"-"+o).length&&jQuery('<img src="'+this.images[t][o].src+'"/>').each(function(){var i=new Image;i.onload=function(){e(t,o,!0)}.bind(this),i.onerror=function(){e(t,o,!0,null,!0)}.bind(this),i.src=this.images[t][o].src}.bind(this))}},_onCreated:function(){this.imageLabel=jQuery("<div/>",{class:"jBox-image-label-container"}).appendTo(this.wrapper),this.imageLabel.append(jQuery("<div/>",{class:"jBox-image-pointer-prev",click:function(){this.showImage("prev")}.bind(this)})).append(jQuery("<div/>",{class:"jBox-image-pointer-next",click:function(){this.showImage("next")}.bind(this)})),this.options.imageCounter&&(this.imageCounter=jQuery("<div/>",{class:"jBox-image-counter-container"}).appendTo(this.wrapper),this.imageCounter.append(jQuery("<span/>",{class:"jBox-image-counter-current"})).append(jQuery("<span/>").html(this.options.imageCounterSeparator)).append(jQuery("<span/>",{class:"jBox-image-counter-all"})))},_onOpen:function(){jQuery(document).on("keyup.jBox-Image-"+this.id,function(e){37==e.keyCode&&this.showImage("prev"),39==e.keyCode&&this.showImage("next")}.bind(this)),this.showImage("open")},_onClose:function(){jQuery(document).off("keyup.jBox-Image-"+this.id)},_onCloseComplete:function(){this.wrapper.find(".jBox-image-container").css("opacity",0)}})});

View file

@ -0,0 +1,80 @@
.jBox-Notice {
transition: margin .2s;
}
.jBox-Notice .jBox-container {
border-radius: 3px;
box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, .25), inset -1px -1px 0 0 rgba(0, 0, 0, .1);
}
.jBox-Notice .jBox-content {
border-radius: 3px;
padding: 12px 20px;
}
.jBox-Notice .jBox-title {
padding: 12px 20px 0;
font-weight: bold;
}
.jBox-hasTitle.jBox-Notice .jBox-content {
padding-top: 5px;
}
.jBox-Notice-black .jBox-container {
color: #fff;
background: #000;
}
.jBox-Notice-gray .jBox-container {
color: #333;
background: #f6f6f6;
}
.jBox-Notice-red .jBox-container {
color: #fff;
background: #d00;
}
.jBox-Notice-green .jBox-container {
color: #fff;
background: #5d0;
}
.jBox-Notice-blue .jBox-container {
color: #fff;
background: #07d;
}
.jBox-Notice-yellow .jBox-container {
color: #000;
background: #fd0;
}
@media (max-width: 768px) {
.jBox-Notice .jBox-content {
padding: 10px 15px;
}
.jBox-Notice .jBox-title {
padding: 10px 15px 0;
}
}
@media (max-width: 500px) {
.jBox-Notice .jBox-content {
padding: 8px 10px;
}
.jBox-Notice .jBox-title {
padding: 8px 10px 0;
}
.jBox-hasTitle.jBox-Notice .jBox-content {
padding-top: 0;
}
}

View file

@ -0,0 +1,143 @@
/**
* jBox Notice plugin: Opens a popup notice
*
* Author: Stephan Wagner (https://stephanwagner.me)
*
* License: MIT (https://opensource.org/licenses/MIT)
*
* Requires: jBox (https://code.jboxcdn.com/jBox.min.js)
*/
jQuery(document).ready(function () {
new jBox.plugin('Notice', {
// Options (https://stephanwagner.me/jBox/options#options-notice)
color: null, // Add a color to your notices, use 'gray' (default), 'black', 'red', 'green', 'blue' or 'yellow'
stack: true, // Set to false to disable notice-stacking
stackSpacing: 10, // Spacing between notices when they stack
autoClose: 6000, // Time in ms after which the notice will disappear
attributes: { // Defines where the notice will pop up
x: 'right', // 'left' or 'right'
y: 'top' // 'top' or 'bottom'
},
position: { // Defines the distance to the viewport boundary
x: 15,
y: 15
},
responsivePositions: { // Responsive positions
500: { // The key defines the maximum width of the viewport, the values will replace the default position options
x: 5, // Start with the lowest viewport
y: 5
},
768: {
x: 10,
y: 10
}
},
target: window,
fixed: true,
animation: 'zoomIn',
closeOnClick: 'box',
zIndex: 12000,
// Triggered when notice is initialized
_onInit: function ()
{
// Cache position values
this.defaultNoticePosition = jQuery.extend({}, this.options.position);
// Type Notice has its own adjust position function
this._adjustNoticePositon = function () {
var win = jQuery(window);
var windowDimensions = {
x: win.width(),
y: win.height()
};
// Reset default position
this.options.position = jQuery.extend({}, this.defaultNoticePosition);
// Adjust depending on viewport
jQuery.each(this.options.responsivePositions, function (viewport, position) {
if (windowDimensions.x <= viewport) {
this.options.position = position;
return false;
}
}.bind(this));
// Set new padding options
this.options.adjustDistance = {
top: this.options.position.y,
right: this.options.position.x,
bottom: this.options.position.y,
left: this.options.position.x
};
};
// If jBox grabs an element as content, crab a clone instead
this.options.content instanceof jQuery && (this.options.content = this.options.content.clone().attr('id', ''));
// Adjust paddings when window resizes
jQuery(window).on('resize.responsivejBoxNotice-' + this.id, function (ev) { if (this.isOpen) { this._adjustNoticePositon(); } }.bind(this));
this.open();
},
// Triggered when notice was created
_onCreated: function ()
{
// Add color class
this.wrapper.addClass('jBox-Notice-color jBox-Notice-' + (this.options.color || 'gray'));
// Store position in jBox wrapper
this.wrapper.data('jBox-Notice-position', this.options.attributes.x + '-' + this.options.attributes.y);
},
// Triggered when notice opens
_onOpen: function ()
{
// Adjust position when opening
this._adjustNoticePositon();
// Loop through notices at same window corner and either move or destroy them
jQuery.each(jQuery('.jBox-Notice'), function (index, el)
{
el = jQuery(el);
// Abort if the element is this notice or when it's not at the same position
if (el.attr('id') == this.id || el.data('jBox-Notice-position') != this.options.attributes.x + '-' + this.options.attributes.y) return;
// Remove notice when we don't wont to stack them
if (!this.options.stack) {
el.data('jBox').close({ignoreDelay: true});
return;
}
// Get the new margin and add to notices
var margin = (el.data('jBoxNoticeMargin') ? parseInt(el.data('jBoxNoticeMargin')) : parseInt(el.css('margin-' + this.options.attributes.y))) + this.wrapper.outerHeight() + this.options.stackSpacing;
el.data('jBoxNoticeMargin', margin);
el.css('margin-' + this.options.attributes.y, margin);
}.bind(this));
},
// Remove notice from DOM when closing finishes
_onCloseComplete: function ()
{
this.destroy();
}
});
});

View file

@ -0,0 +1 @@
jQuery(document).ready(function(){new jBox.plugin("Notice",{color:null,stack:!0,stackSpacing:10,autoClose:6e3,attributes:{x:"right",y:"top"},position:{x:15,y:15},responsivePositions:{500:{x:5,y:5},768:{x:10,y:10}},target:window,fixed:!0,animation:"zoomIn",closeOnClick:"box",zIndex:12e3,_onInit:function(){this.defaultNoticePosition=jQuery.extend({},this.options.position),this._adjustNoticePositon=function(){var t=jQuery(window),i={x:t.width(),y:t.height()};this.options.position=jQuery.extend({},this.defaultNoticePosition),jQuery.each(this.options.responsivePositions,function(t,o){if(i.x<=t)return this.options.position=o,!1}.bind(this)),this.options.adjustDistance={top:this.options.position.y,right:this.options.position.x,bottom:this.options.position.y,left:this.options.position.x}},this.options.content instanceof jQuery&&(this.options.content=this.options.content.clone().attr("id","")),jQuery(window).on("resize.responsivejBoxNotice-"+this.id,function(t){this.isOpen&&this._adjustNoticePositon()}.bind(this)),this.open()},_onCreated:function(){this.wrapper.addClass("jBox-Notice-color jBox-Notice-"+(this.options.color||"gray")),this.wrapper.data("jBox-Notice-position",this.options.attributes.x+"-"+this.options.attributes.y)},_onOpen:function(){this._adjustNoticePositon(),jQuery.each(jQuery(".jBox-Notice"),function(t,i){if(i=jQuery(i),i.attr("id")!=this.id&&i.data("jBox-Notice-position")==this.options.attributes.x+"-"+this.options.attributes.y){if(!this.options.stack)return void i.data("jBox").close({ignoreDelay:!0});var o=(i.data("jBoxNoticeMargin")?parseInt(i.data("jBoxNoticeMargin")):parseInt(i.css("margin-"+this.options.attributes.y)))+this.wrapper.outerHeight()+this.options.stackSpacing;i.data("jBoxNoticeMargin",o),i.css("margin-"+this.options.attributes.y,o)}}.bind(this))},_onCloseComplete:function(){this.destroy()}})});

View file

@ -0,0 +1,52 @@
/* jBox theme: NoticeFancy */
.jBox-NoticeFancy .jBox-container {
border-radius: 5px;
}
.jBox-NoticeFancy .jBox-content,
.jBox-NoticeFancy .jBox-title {
padding-left: 25px;
}
.jBox-NoticeFancy.jBox-Notice-color .jBox-container {
color: #fff;
background: #222;
text-shadow: 0 -1px 0 #000;
}
/* Colored borders */
.jBox-NoticeFancy.jBox-Notice-color .jBox-container:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 8px;
border-radius: 4px 0 0 4px;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
background-size: 14px 14px;
}
.jBox-NoticeFancy.jBox-Notice-black .jBox-container:after,
.jBox-NoticeFancy.jBox-Notice-gray .jBox-container:after {
background-color: #888;
}
.jBox-NoticeFancy.jBox-Notice-red .jBox-container:after {
background-color: #e00;
}
.jBox-NoticeFancy.jBox-Notice-green .jBox-container:after {
background-color: #6c0;
}
.jBox-NoticeFancy.jBox-Notice-blue .jBox-container:after {
background-color: #07d;
}
.jBox-NoticeFancy.jBox-Notice-yellow .jBox-container:after {
background-color: #fb0;
}

View file

@ -0,0 +1,33 @@
/* jBox theme: TooltipBorder */
.jBox-TooltipBorder .jBox-container {
border-radius: 5px;
border: 2px solid #49d;
}
/* Pointer */
.jBox-TooltipBorder .jBox-pointer:after {
border: 2px solid #49d;
}
.jBox-TooltipBorder .jBox-pointer-top,
.jBox-TooltipBorder .jBox-pointer-bottom {
width: 34px;
height: 13px;
}
.jBox-TooltipBorder .jBox-pointer-left,
.jBox-TooltipBorder .jBox-pointer-right {
width: 13px;
height: 34px;
}
/* Close button */
.jBox-TooltipBorder.jBox-closeButton-box:before {
width: 28px;
height: 28px;
background: #49d;
}

View file

@ -0,0 +1,35 @@
/* jBox theme: TooltipBorderThick */
.jBox-TooltipBorderThick .jBox-container {
box-shadow: none;
border-radius: 8px;
border: 4px solid #ccc;
}
/* Pointer */
.jBox-TooltipBorderThick .jBox-pointer:after {
box-shadow: none;
border: 4px solid #ccc;
}
.jBox-TooltipBorderThick .jBox-pointer-top,
.jBox-TooltipBorderThick .jBox-pointer-bottom {
width: 38px;
height: 13px;
}
.jBox-TooltipBorderThick .jBox-pointer-left,
.jBox-TooltipBorderThick .jBox-pointer-right {
width: 13px;
height: 38px;
}
/* Close button */
.jBox-TooltipBorderThick.jBox-closeButton-box:before {
width: 32px;
height: 32px;
background: #ccc;
}

View file

@ -0,0 +1,37 @@
/* jBox theme: TooltipDark */
.jBox-TooltipDark .jBox-container {
border-radius: 3px;
background: #000;
color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, .4);
}
/* Pointer */
.jBox-TooltipDark .jBox-pointer:after {
background: #000;
}
/* Close button */
.jBox-TooltipDark .jBox-closeButton {
background: #000;
}
.jBox-TooltipDark.jBox-closeButton-box:before {
box-shadow: 0 0 6px rgba(0, 0, 0, .4);
}
.jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton path {
fill: #ddd;
}
.jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton:hover path {
fill: #fff;
}
.jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton:active path {
fill: #bbb;
}

View file

@ -0,0 +1,57 @@
/* jBox theme: TooltipError */
.jBox-TooltipError {
pointer-events: none;
}
.jBox-TooltipError .jBox-content {
padding: 0 10px;
line-height: 28px;
}
.jBox-TooltipError .jBox-container {
border-radius: 2px;
background: #d00;
color: #fff;
font-weight: bold;
font-size: 13px;
}
.jBox-TooltipError .jBox-pointer-top,
.jBox-TooltipError .jBox-pointer-bottom {
width: 22px;
height: 8px;
}
.jBox-TooltipError .jBox-pointer-right,
.jBox-TooltipError .jBox-pointer-left {
width: 8px;
height: 22px;
}
.jBox-TooltipError .jBox-pointer:after {
background: #d00;
width: 20px;
height: 20px;
}
.jBox-TooltipError .jBox-pointer-top:after {
left: 1px;
top: 6px;
}
.jBox-TooltipError .jBox-pointer-bottom:after {
left: 1px;
bottom: 6px;
}
.jBox-TooltipError .jBox-pointer-right:after {
top: 1px;
right: 6px;
}
.jBox-TooltipError .jBox-pointer-left:after {
top: 1px;
left: 6px;
}

View file

@ -0,0 +1,52 @@
/* jBox theme: TooltipSmall */
.jBox-TooltipSmall {
pointer-events: none;
}
.jBox-TooltipSmall .jBox-content {
padding: 0 10px;
line-height: 28px;
}
.jBox-TooltipSmall .jBox-container {
border-radius: 2px;
}
.jBox-TooltipSmall .jBox-pointer-top,
.jBox-TooltipSmall .jBox-pointer-bottom {
width: 22px;
height: 8px;
}
.jBox-TooltipSmall .jBox-pointer-right,
.jBox-TooltipSmall .jBox-pointer-left {
width: 8px;
height: 22px;
}
.jBox-TooltipSmall .jBox-pointer:after {
width: 20px;
height: 20px;
}
.jBox-TooltipSmall .jBox-pointer-top:after {
left: 1px;
top: 6px;
}
.jBox-TooltipSmall .jBox-pointer-bottom:after {
left: 1px;
bottom: 6px;
}
.jBox-TooltipSmall .jBox-pointer-right:after {
top: 1px;
right: 6px;
}
.jBox-TooltipSmall .jBox-pointer-left:after {
top: 1px;
left: 6px;
}

View file

@ -0,0 +1,56 @@
/* jBox theme: TooltipSmall */
.jBox-TooltipSmallGray {
pointer-events: none;
}
.jBox-TooltipSmallGray .jBox-content {
padding: 0 10px;
}
.jBox-TooltipSmallGray .jBox-container {
font-size: 13px;
line-height: 24px;
border-radius: 12px;
background-image: linear-gradient(to bottom, #fafafa, #f2f2f2);
}
.jBox-TooltipSmallGray .jBox-pointer-top,
.jBox-TooltipSmallGray .jBox-pointer-bottom {
width: 22px;
height: 8px;
}
.jBox-TooltipSmallGray .jBox-pointer-right,
.jBox-TooltipSmallGray .jBox-pointer-left {
width: 8px;
height: 22px;
}
.jBox-TooltipSmallGray .jBox-pointer:after {
width: 20px;
height: 20px;
}
.jBox-TooltipSmallGray .jBox-pointer-top:after {
background: #fafafa;
left: 1px;
top: 6px;
}
.jBox-TooltipSmallGray .jBox-pointer-bottom:after {
background: #f2f2f2;
left: 1px;
bottom: 6px;
}
.jBox-TooltipSmallGray .jBox-pointer-right:after {
top: 1px;
right: 6px;
}
.jBox-TooltipSmallGray .jBox-pointer-left:after {
top: 1px;
left: 6px;
}