РусскийАмериканский

ToxicBox

ToxicBox - бесплатный jQuery Lightbox плагин

Открывает фотографии и произвольные контейнеры во всплывающем окне.

Особенности

  • Кроссбраузерность
  • Поддержка мобильных устройств
  • Отображение связанных картинок
  • Предзагрузка соседних картинок
  • Группировка галерей
  • Отображение одиночных картинок
  • Отображение контейнеров (div, section...)
  • Отображение уведомлений (типа alert)
  • Правильная реакция на zoom
  • Легкая изменяемость вида
  • Небольшой размер. Сейчас ~10KB
  • Прохождение теста W3C Validation

Текущая версия 1.1.0.3 - 16.07.2016

Bower: bower install toxicbox --save, проект на GitHub.


История версий плагина ToxicBox

ToxicBox распространяется под лицензией MIT

Поддержать проект

Что такое toxicbox?

Это jQuery плагин. С его помощью можно выводить во всплывающем окне фотографии, контейнеры и уведомления. Удобно, что это будет выглядеть в едином стиле, который можно подстроить под свой дизайн сайта. По функционалу похож на другие lightbox jquery, однако написан с нуля.

Совместимость

PC браузеры
IEEdgeChromeFirefoxOperaSafari
9+12+4+4+11.6+5+
Мобильные браузеры
Stock AndroidiOSOpera MobileWindowsFirefoxChrome
Android 2.3+5.1+11.5.5+WP 8.1+
old not tested
19.0+28.0+
jQuery Core
1.x2.x3.x
1.7.0+2.0+3.0+
VelocityJS
0.0.23+

Как использовать

Для работы плагина требуется jQuery 1.7.0 или более поздняя версия. А так же, начиная с версии jquery.toxicbox 1.0.7, плагин Velocity.js (обеспечивает более быструю анимацию, чем стандартная в jQuery). Эти библиотеки входят дистрибутив.

В html коде в тег head необходимо загрузить скрипт и его стили:

<head >
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.toxicbox.latest.min.css?version1" />
<script src="js/jquery-3.0.0.min.js" > </script>
<script src="js/velocity.min.js" > </script>
<script src="js/jquery.toxicbox.latest.min.js?version1" ></script>
</head >

Для активизации скрипта при выводе картинок в вашем html коде необходимо использовать следующий синтаксис

data-toxic="group" – связанные картинки
data-toxic="single" – одиночная картинка
<body>
<!--связанные картинки, атрибут title не обязательный-->
<a href="images/image1.jpg" title="Заголовок" data-toxic="group"></a>
<a href="images/image2.jpg" title="Заголовок" data-toxic="group"></a>
<!--одиночная картинка, атрибут title не обязательный-->
<a href="images/image3.jpg" title="Заголовок" data-toxic="single"></a>
</body>
data-toxic-name="group1" – группировка галерей, группа 1
data-toxic-name="my_group_name_2" – группировка галерей, группа 2

Вы не обязаны группировать галереи (параметр data-toxic-name можно не указывать), однако, если на вашей странице есть несколько галерей и вы не хотите выводить все картинки подряд, данная возможность пригодится. Называть группу можно как угодно, например data-toxic-name="myname". Доступно начиная с версии 1.0.9.

<body>
<!--связанные картинки, атрибут title не обязательный-->
<!--связанная группа 1-->
<a href="images/image1.jpg" title="Заголовок" data-toxic="group" data-toxic-name="group1"></a>
<a href="images/image2.jpg" title="Заголовок" data-toxic="group" data-toxic-name="group1"></a>
<a href="images/image3.jpg" title="Заголовок" data-toxic="group" data-toxic-name="group1"></a>
<a href="images/image4.jpg" title="Заголовок" data-toxic="group" data-toxic-name="group1"></a>
<!--связанная группа 2-->
<a href="images/image5.jpg" title="Заголовок" data-toxic="group" data-toxic-name="group2"></a>
<a href="images/image6.jpg" title="Заголовок" data-toxic="group" data-toxic-name="group2"></a>
</body>

Для вывода скрытых контейнеров в html файле желательно их поместить перед закрытием тега body и использовать следующий синтаксис. Для большинства случаев плагин сам определит размеры окна вывода. Если требуется какой-то специальный размер, или авто-определение сработало некорректно, ширину срытых элементов можно жестко задавать в css.

data-toxic-databox="id1" – вывод элемента с #id1
<body>
<!--отображаем элемент с id="id1", атрибут title не обязательный-->
<a href="#" title="Заголовок" data-toxic-databox="id1"></a>
<!--отображаем элемент с id="id2", атрибут title не обязательный-->
<button title="Заголовок" data-toxic-databox="id2"></button>
<div id="id1" class="hidden"></div> <!--css: .hidden {display:none;} -->
<section id="id2" style="display:none;"></section>
</body>

Отображение уведомлений по сути похоже на вывод скрытого элемента, однако не требует размещать в html коде непосредственно скрытый контейнер. Лучше всего подходит для коротких сообщений. По умолчанию ширина уведомлений равна 300px, опция alert_width.

data-toxic-alert="Ваше сообщение" – вывод уведомления «Ваше сообщение»
<body>
<a href="#" data-toxic-alert="Ваше сообщение 1"></a>
<button data-toxic-alert="Ваше сообщение 2"></button>
</body>

Картинки toxicbox по-умолчанию находятся в каталоге "../images/toxic/", в скрипте можно указать любой каталог ("images/toxic/", "../images/toxic/", "http://mysite.com/images/toxic/" и т.п.). Рекомендуемый размер кнопок 20 X 20px.

Есть дополнительные изменяемые параметры. Вставку с опциями можно разместить в html документе (после загрузки jquery.toxicbox.js, например перед закрытие тега head).

Стоит отметить, что они не обязательны: если их не задать, что скрипт будет работать с базовыми значениями.

<head >
<script>
toxicbox_options = {
language : 'en', //Язык информационного блока для связанных картинок. Значения 'en', 'ru'.
padding : 5, //Ширина рамки в px.
speed : 1, //Скорость анимации. 1 соответствует базовой скорости.
images_url : "../images/toxic/", //url папки где хранятся картинки для скрипта.
alert_width : 300, //Ширина уведомлений.
auto_width : 'on', //Авто-корректировка ширины контейнеров, если раскрытие во всю ширину. Значения 'on', 'off'.
basic_width : 960, //Базовая ширина для auto_width в px.
start_box_size: 150 //Размер стартового окна загрузки в px.
};
</script>
</head >

Немного о auto_width: функция сделана из расчета, что текстовый блок во всю ширину экрана зачастую выглядит не очень здорово. Если в CSS не задана ширина и контейнер содержит, к примеру, параграфы длинного текста без переносов, есть вероятность такой ситуации. Функция auto_width должна решить эту проблему.

Изменить стандартную цветовую тему (фон плашки, цвет текста, шрифты) можно отредактировав файл toxic.css, элементы отвечающие за эти параметры вынесены отдельно с пометками.

Расширенное использование

Начиная с версии 1.0.7 вы можете вызывать окна типа Databox и Alert прямо из ваших js сценариев. Обязательным условием является запуск из функции .ready(), которая запустится после того, как DOM полностью загрузился.

ToxicBox.GetDatabox('id', delay, 'Заголовок'); – вывод контейнера #id, с задержкой delay, с заголовком «Заголовок».
<script>
$(document).ready(function() { //в метод .ready() передаем анонимную функцию
  $( document )
    .on( "click", "button", function(a) {
      if (a) {
        ToxicBox.GetDatabox('id1', 0, 'Заголовок1'); //в зависимости от условия выводим конейнер #id1, с заголовком "Заголовок1".
      } else {
        ToxicBox.GetDatabox('id2'); //в зависимости от условия выводим конейнер #id2, без заголовка.
      }
      return false;
  });
});
</script>
ToxicBox.GetAlert('Уведомление', delay); – вывод уведомления "Уведомление", с задержкой delay.
<script>
$(function() { //в метод .ready() передаем анонимную функцию
  if (window.location.href.indexOf('show_alert') > -1) ToxicBox.GetAlert('Alert!', 500); //если url содержит show_alert, выводим Alert!, delay = 500 ms
});
</script>

Таким образом, можно в любом месте вашего сценария запрашивать вывод окон Databox и Alert.

delay можно не указывать. По-умолачанию он равен 0.

Вам понравился ToxicBox?

Поддержите проект!

Вы можете перечислить любую сумму денег в качестве поддержки проекта.

PayPal: toxicbox@my-gallery.name
Для замечаний и предложений
toxicbox@my-gallery.name
Расскажите друзьям
Смотрите также:
Информационные партнеры