jsImageBox

О

firefox-gray jsImageBox - компактный и несложный в подключении скрипт, который позволяет показывать увеличенные изображения во всплывающем блоке. Код скрипта занимает всего 9кб. Для его работы на страницу нужно подключить только один js файл. Скрипт написан без использования сторонних фреймворков и библиотек, поэтому не должен вызвать конфликтов при подключении на сайты, уже сделанные с использованием какого-либо фреймворка.

Скрипт распространяется бесплатно под лицензией GPL, однако разработчики не будут против, если вы подкинете им деньжат. Так им станет еще радостнее от того, что их разработка помогла вам сделать ваш вебсайт лучше.


Пример галереи

sample image sample image sample image sample image sample image sample image
 

HTML код

<script type="text/javascript" src="jsibox/jsibox_basic.js"></script> <a href="content_images/1.jpg" rel="rr" onclick="return jsiBoxOpen(this)" title="Это попугайчики!"><img src="content_images/1_1.jpg" width="151" height="100" alt="sample image" /></a> <a href="content_images/2.jpg" rel="rr" onclick="return jsiBoxOpen(this)" title="Это такие птицы. Фламинго! У фламинго тонкие длинные ноги, гибкая шея и оперенье, окраска которого варьирует от белого до красного цвета. Их особым отличительным признаком является массивный выгнутый вниз клюв, с помощью которого они фильтруют пищу из воды или ила."><img src="content_images/2_1.jpg" width="151" height="100" alt="sample image" /></a> <a href="content_images/3.jpg" rel="rr" onclick="return jsiBoxOpen(this)" title="Это такая улитка!"><img src="content_images/3_1.jpg" width="151" height="100" alt="sample image" /></a> <a href="content_images/4.jpg" rel="rr" onclick="return jsiBoxOpen(this)" title=""><img src="content_images/4_1.jpg" width="151" height="100" alt="sample image" /></a> <a href="content_images/5.jpg" rel="rr" onclick="return jsiBoxOpen(this)" title="Это детская площадка!"><img src="content_images/5_1.jpg" width="151" height="100" alt="sample image" /></a> <a href="content_images/6.jpg" rel="rr" onclick="return jsiBoxOpen(this)" title="Это такой кофе... в зернах!"><img src="content_images/6_1.jpg" width="151" height="100" alt="sample image" /></a>

Как подключать

Для того чтобы бокс правильно работал на странице нужно объявить DTD.

Например

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

или

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Для использования бокса на странице подключите в <head> или в любое место внутри <body> скачанный скрипт:

<script type="text/javascript" src="jsibox/jsibox_basic.js"></script>

Для открытия изображений в боксе в ссылки нужно добавить параметры:

  • onclick="return jsiBoxOpen(this)" - обязательный параметр для того чтобы бокс запустился.
  • rel="gallery_name" - необязательный параметр для организации галлереи. gallery_name - любое название. Сссылки на изображения с одинаковым gallery_name группируются в одну галлерею.
  • title="Название" - необязательный параметр. Этот параметр можно добавить для того чтобы отображать название или описание изображения.

Например

<a href="content_images/1.jpg" rel="rr" onclick="return jsiBoxOpen(this)" title="Это попугайчики!"><img src="content_images/1_1.jpg" width="151" height="100" alt="sample image" /></a>

Для изменения внешнего вида jsImageBox, можно поэкспериментировать с настройками, которые находятся в начале файла jsibox_basic.js

var jsiBox = {
  // НАСТРОЙКИ //
  boxBorderColor : '#727272', // Цвет границы бокса
  boxBorderWidth : '1px', // Толщина границы бокса
  boxBgColor     : '#484848', // Цвет фона бокса
  imgBgColor     : '#fff', // Цвет подложки изображения
  overlayColor   : '#fff', // Цвет затемнения страницы
  nextArrow      : '→', // Следующее изображение
  prevArrow      : '←', // Предыдущее изображение
  closeSymbol    : '×', // Значок закрытия бокса
  statusString   : 'Изображение [num] из [total]', // Строка описания текущего соcтояния
  selfDir        : '' // Путь к каталогу кода бокса, если пустая строка то скрипт попробует автоматически вычислить путь
};


Скачать Js Image Box

Несжатый код с комментариями Сжатый код

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

Яндекс.Деньги
  • 4100178541478
WebMoney
  • R265609919412
  • Z225521846252