jsImageBox -- легкий аналог lightbox без jQuery

Делал сегодня фотогалерею для одного из своих сайтов, и потребовался скрипт, который показывал бы фотографию во всплывающей рамке с затемнением фона (так называемый lightbox), причем так, чтобы можно было просматривать сразу целую серию фотографий, переходя от одной к другой. Оригинальный lightbox не подходил именно по причине отсутствия поддержки серий, а его вторая версия использует jQuery. Для того сайта мне покзалось это слишком тяжелым решением, и я стал искать легкий скрипт, не требующий больших библиотек. И такое решение было найдено: jsImageBox, в сжатом виде занимающий всего 9 Kb.

Использование очень простое: подключаем файл с помощью тега script, как обычно, для каждой фотографии в серии задаем rel="rr" и событие onclick="return jsiBoxOpen(this)", а также аттрибут title для ссылки, если хотим выводить не только фотографию, но и ее название. Важный момент: если в верстке сайта используются блоки с относительным позиционированием (position: relative), тег script нужно помещать в head, или сразу после открывающего тега body, иначе всплывающая рамка может оказаться совсем не там, где вы ее ожидаете.

В целом скрипт понравился мне всем, кроме юзабилити: пользование социальным сетями приучило к тому, что если щелкнуть по самой фотографии, происходит переход к следующей, здесь же при щелчке не происходило ничего, а для перехода приходилось целиться в маленькую стрелочку наверху. То же самое и с закрытием: привычное закрытие по щелчку вне рамки не работало. Решил доработать самостоятельно. Это оказалось просто: в функции инициализации jsiBoxInit добавил обработчик, вызывающий функцию перехода к следующему сообщению, если оно не последнее или функцию закрытия в противном случае:

jsiBox.mainImg.onclick=function() {
  if (jsiBox.currentImgIndex+1 < jsiBox.linkNodesArray.length) jsiBoxNext();
  else jsiBoxClose();
}
jsiBox.wrapNode.onclick = jsiBoxClose;

Вставлять этот код следует после

jsiBox.mainImg       = document.getElementById('jsiBoxMainImage');

Также поправил цвет фона заливки в настройках в начале файла:

overlayColor   : '#000',

Общее впечатление осталось такое: хорошее решение там, где требуется легкость и простота, но автору есть куда его совершенствовать. В частности, улучшить юзабилити, вынести в настройки скорость разворачивания рамки и сделать добавление HTML-кода не через document.write, а через appendChild к тегу body.