Галереи изображений - всплывание, перемещение, переключение

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Плагин галереи изображений автоматически поддерживает устройства с сенсорным экраном. Можно увеличить до 9 изображений одновременно, можно их перемещать, переключаться между ними, приводить в исходное состояние по повторному клику или менять на следующие / предыдущие изображения.

Заданные (указанные соответствующим параметром) изображения посетитель может менять на другие, через визуальные элементы с изменяемой прозрачностью - области для кликов в центре изображения. Любое открытое (большое) изображение может содержать (или не содержать) такие визуальные элементы.

При смене текущего открытого изображения, все следующие / предыдущие (от текущего) изображения появляются по центру экрана, таким образом, области кликов для смены всегда находятся в одном месте (в центре изображения и экрана), они невидимы пока не будет наведён указатель (мышь).
Смена текущего изображения невозможна, если в списке галереи (в текущем или заданном HTML-коде страницы) одно всплывающее изображение или для текущего изображения не указан соответствующий параметр.

Работа плагина всплывающих изображений похожа на работу оконной системы, но увеличенные изображения не являются окнами и не занимают дескрипторов оконной системы, при этом используется базовая анимация VcorpJS с временным использованием и освобождением свободных дескрипторов анимации (от 1 до 9).

Примечание: здесь мы будем разбирать изображения и обработчики onclick, встраиваемые в HTML-код, чтобы не усложнять документацию.
Более "продвинутые" способы организации галереи, по мнению автора, только усложнят документацию.
Для получения расширенных сведений всегда можно обратиться к автору через форму обратной связи.

.zoomImg( node, src, [ time ] , [ step ] , width , height , [ htmlHead ] , [ posHead ] , [ center ] , [ fast ] , [ gallery ] )

Увеличение (всплывание) изображения с дальнейшим автоматическим управлением всей галереей.
Изображение в момент увеличения подстраивается под текущие размеры окна браузера, не превышая его, не выходя за видимую область, сохраняя пропорции.

node - ссылка на изображение класса pb_ismall его текстовый id

time - скорость анимации, не менее 100 миллисекунд (минимум и по умолчанию 100).

step - шаг анимации в миллисекундах, не менее 10 (по умолчанию 20).

width - ширина большого изображения после увеличения в пикселях px (число или строка, не менее 1).

height - высота большого изображения после увеличения в пикселях px (число или строка, не менее 1).

htmlHead - HTML-содержимое заголовка большого изображения (если posHead указан и не 0).

posHead - Положение заголовка (0 - без заголовка, >0 - под изображением, <0 - над изображением с указанным смещением в пикселях).

center - если указано (не 0), то центрирование большого изображения по центру экрана.

fast - если указано (не 0), то мгновенный показ большого изображения, без анимации.

gallery - если указано (не 0), то данное изображение участвует в гелерее (смене изображений) и имеет визуальные элементы замены в центре.

Если указан необязательный параметр, то предыдущий необязательный параметр необходимо указывать (если не нужен, то указывайте 0 или null или false или "").

Функция возвращает true - если обработка началась, или false - если неверные параметры или уже открыто одновременно 9 больших изображений.

.uImg( [ selector ] [ , node ] )

Обновление списка изображений, которые участвуют в галерее (добавляются изображения из HTML-кода элементов, у которых в onclick указан последний параметр).
Может пригодиться в случаях, когда инициализация VcorpJS происходит до появления HTML-кода со всплывающими изображениями (например, SPA-приложение), или когда селектор отличается от селектора по-умолчанию (".pb_ismall"). Функция .uImg() вызывается автоматически при инициализации VcorpJS с селектором по-умолчанию. При вызове происходит поиск HTML-элементов с селектором selector, у которых указан в HTML-коде обработчик onclick.

selector -произвольный текстовый селектор для выбора классов и элементов в блоке-родителе node. Заменяет значение по умолчанию (".pb_ismall").
Селектор составляется по правилам CSS (имена классов указываются с точкой и т.д.).

node - ссылка на родительский HTML-блок, в котором искать все теги с классом pb_ismall (или указанные селектором элементы), или его текстовый id, по умолчанию document (VcorpJS.D)

Визуальный пример галереи изображений

Самый простой способ организовать галерею - поместить в исходный HTML-код элементы <img> с обработчиками кликов:

<img class="pb_ismall" alt="..." src="/img/1.png"
onclick="VcorpJS.zoomImg(this,'/img/1.png',200,20,700,300,'Заголовок 1',-25,0,0,1)" />
<img class="pb_ismall" alt="..." src="/img/2.png"
onclick="VcorpJS.zoomImg(this,'/img/2.png',200,20,478,400,'Заголовок 2',1,0,0,1)" />

Результат (стили заданы в CSS - это CSS-анимация, размеры и отступы, и т.д. - см. CSS для галереи изображений):

Если большие изображения имеют большой размер в байтах (тем более если их много), то очень желательно их заменить на мелкие копии для предпросмотра (класса pb_ismall), чтобы за время выбора пользователя успели подгрузиться большие.
Большие изображения проще всего подгрузить, вставив HTML-код со скрытым блоком класса pb_hidden, внутри которого разместить теги <img> со ссылками на большие изображения (в примере ниже обратите внимание на src изображений).

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.