<link rel="stylesheet" type="text/css" href="/css/jBox.css">
<script type='text/javascript' src="/js/jBox.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ModalBorder.css">
<link rel="stylesheet" type="text/css" href="/css/NoticeBorder.css">
<link rel="stylesheet" type="text/css" href="/css/TooltipBorder.css">
<link rel="stylesheet" type="text/css" href="/css/TooltipDark.css">

<a href="#" class="apotitle2" newcontent="Перейти на APO-UCOZ: <a href='http://apo-ucoz.com' target='blank'>Клик</a>" newtitle="Заголовок из тег newtitle">Использование опций</a>
<script>
$('.apotitle2').jBox('Tooltip', {
  id: 'apoid', // Уникальный ID блока с подсказкой
  width: 300, // Фиксированная ширина подсказки
  height: 100, // Фиксированная высота подсказки
  maxWidth: 400, // Максимальная ширина подсказки
  maxHeight: 150, // Максимальная высота подсказки
  trigger: 'click', // Открывать при клике или наведении (click, mouseenter)
  preventDefault: 1, // Запрет взаимодействия со ссылками внутри подсказки
  title: 'Это заголовок подсказки, если не указан атрибут, из которого брать содержимое',
  content: 'Это текст на тот случай, если не указан атрибут, из которого брать содержимое',
  getTitle: 'newtitle', // Из какого атрибута брать заголовок для подсказки
  getContent: 'newcontent', // Из какого атрибута брать текст для подсказки
  target: $('.apotitle2'), // Для какого элемента вывести подсказку
  position: {
  x: 'right', // Позиция вывода по оси x (left, right, middle)
  y: 'bottom', // Позиция вывода по оси y (top, bottom, middle)
  },
  offset: {
  x: 10, // Сдвиг подсказки по оси x
  y: -5 // Сдвиг подсказки по оси y
  },
  fixed: 0, // Фиксированная или статичная подсказка (0, 1)
  reposition: 0, // Перестраивать позицию подсказки при изменении размера экрана (0, 1)
  repositionOnOpen: 0, // Перестраивать позицию подсказки при первом открытии (0, 1)
  repositionOnContent: 0, // Перестраивать позицию подсказки при изменении содержимого подсказки (0, 1)
  fade: 1, // Использовать ли эффект плавного появления и угасания (0, 1)
  animation: 'flip', // Тип анимации (zoomIn, zoomOut, pulse, move, slide, flip, tada)
  theme: 'TooltipBorder', // Цветовая схема подсказки (ModalBorder, NoticeBorder, TooltipBorder, TooltipDark)
  addClass: 'newclass', // Добавление своего класса к подсказке
  overlay: 0, // Добавление оверлея к подсказке (0, 1)
  zIndex: 999, // Указываем свой z-index (0, 9999999999...)
  delayOpen: 500, // Задержка перед открытием
  delayClose: 1000, // Задержка перед закрытием
  closeOnEsc: 1, // Закрывать ли при нажатии клавиши ECS
  closeOnClick: true, // При каком событии закрывать подсказку (overlay - клик по оверлею, box - по самой подсказке, body - клик где угодно, кроме самой подсказки, true - клик в любом месте на странице
  closeOnMouseleave: 0, // Закытие при отводе курсора с подсказки (0, 1)
  closeButton: 'box', // Тип закрытия (box - кнопка, title - по заголовку, overlay - по оверлею)
  constructOnInit: 0, // Формировать код при инициализации (0, 1)
  blockScroll: 1, // Убирать прокрутку body при вызове подсказки (0, 1)
  draggable: 'title', // Возможность перемещать (0, 1, title - за заголовок, jQuery selector - указать свой jQuery объект ($('.class'))
  dragOver: 1, // Если есть другие перемещаемые объекты - отодвигать их
  onInit: function() {
  console.log('Подсказка инициализирована'); // Событие при инициализации
  },
  onCreated: function() {
  console.log('Подсказка создана в body'); // Событие при формировании html кода подсказки
  },
  onOpen: function() {
  console.log('Подсказка открыта'); // Событие при открытии подсказки
  },
  onClose: function() {
  console.log('Подсказка закрывается'); // Событие перед закрытием подсказки
  },
  onCloseComplete: function() {
  console.log('Подсказка полностью закрыта'); // Событие при полном закрытии подсказки
  }
  });
</script>

<script>
new jBox('Notice', {
  content: 'Расширенное использование', // Вы можете использовать почти все опции, что перечислены для Tooltip элемента выше
  width: 300, // Ширина
  height: 100, // Высота
  animation: 'tada', // Тип анимации
  autoClose: 5000, // Автозакрытие через 5 сек (0 - 999999, false)
  color: 'red', // Цвет подсказки (black, red, green, blue, yellow)
  stack: 1, // Выстраивать подсказки друг под другом или нет (0, 1)
  audio: 'http://imapo.ru/css/bling1', // Ссылка на аудиофайл (Залейте в mp3 и ogg форматах)
  volume: 17 // Громкость звука (0 - 100)
  });
</script>

<script>
var apoModal2 = new jBox('Modal', { // Можно использовать почти все опции Tooltip
  draggable: 'title', // Возможность перемещать (0, 1, title - за заголовок, jQuery selector - указать свой jQuery объект ($('.class'))
  title: 'Заголовок модального окна', // Заголовок
  content: 'Расширенное использование использование', // Можно использовать почти все опции Tooltip
  blockScroll: 0 // Не убираем прокрутку body
  });
  apoModal2.setWidth(500); // Задать ширину окна
  apoModal2.setHeight(200); // Задать высоту окна
  apoModal2.setTitle('Новый титульник'); // Новый заголовок
  apoModal2.setContent('Новый контент'); // Новый контент
  apoModal2.open(); // Открытие окна
  apoModal2.audio({
  url: 'http://imapo.ru/css/bling1' // Подключение звука
  });
  // apoModal2.close() - Закрытие окна
  // apoModal2.toggle() - Если закрыто - откроет окно и наоборот
  // apoModal2.disable() - Отключить окно
  // apoModal2.enable() - Активировать окно
  // apoModal2.destroy() - Удалиить окно
</script>

<a href="#" id="apoconfirm">Использование окон-подтверждалок</a>
<script>
  new jBox('Confirm', { // Можно использовать почти все опции Tooltip
  blockScroll: 0, // Не убираем прокрутку body
  content: 'Нравится jBox?', // Текст вопроса
  confirmButton: 'Да', // Текст кнопки "Да"
  cancelButton: 'Неа', // Текст кнопки "Нет"
  attach: $('#apoconfirm'), // При клике по какому элементу открывать
  confirm: function() {
  alert('Здорово! Я тоже от них в восторге!'); // Функция при клике по "Да"
  },  
  cancel: function() {
  alert('Жаль. Плагин здоровский...'); // Функция при клике по "Нет"
  }
  });
</script>

<a href="http://imapo.ru/img/x_d2a6ad91.jpg" title="My title 1" data-jbox-image="gallery1"><img src="http://imapo.ru/img/x_d2a6ad91.jpg"></a>
<a href="http://imapo.ru/img/x_eefc1cea.jpg" title="My title 2" data-jbox-image="gallery1"><img src="http://imapo.ru/img/x_eefc1cea.jpg" alt=""></a>
<a href="http://imapo.ru/img/x_f55b7b4d.jpg" title="My title 3" data-jbox-image="gallery1"><img src="http://imapo.ru/img/x_f55b7b4d.jpg" alt=""></a>
<script>
  new jBox('Image', {
  src: 'href', // С какого атрибута брать ссылку на картинку (href)
  gallery: 'data-jbox-image', // Какой класс должен быть у ссылок на картинки (data-jbox-image)
  imageLabel: 'title', // Из какого атрибута брать описание (title)
  imageFade: 500, // Скорость плавной смены картинок
  imageSize: 'cover' // Тип масштабирования картинки при увеличении (cover, contain,
auto, число)
  })
</script>