Кросс-браузерный плагин галереи на JQuery

18.01.13 18.01.13 Нет 3583

Интересный кросс-браузерный плагин галереи на JQuery со многими опциями. Тестировался в Mozilla Firefox Google Chrome, Opera, Safari, Internet Explorer (работает даже в 6!).
В Internet Explorer кнопки изображений теряют прозрачность, потому что IE6 не обрабатывает прозрачные PNG. Вы можете игнорировать это, или поменять изображения, или уровень прозрачности JS.

Использует необструктивный JavaScript (содержание отображается не через JavaScript);
Создание галереи, многочисленных галерей или отдельных изображений;
Минигалерея для просмотра;
Добавление описания к изображениям;
Эффекты "всплывающих" картинок;
Навигация клавиатурой;
Навигация колесом мышки.

Пример использования:

$('#demo').thumbox();

C настройками:

$('#demo2').thumbox({thumbs:4, dockPosition:'bottom', maxThumbWidth:50, labelPosition:'top'});

Настройки (default):

thumbs // Количество превю в мини-галереи (5)
overlayColor //Цвет модального окна с фото ( #999)
overlayOpacity //Прозрачность модального окна (0.8)
overlaySpeed //Скорость появления и скрытия модального окна в миллисекундах (500)
scrollSpeed //Скорость прокрутки мини-галареи (500)
zoomSpeed //Скорость увеличения фото (250)
showOne //Показывать только первое изображение на странице [true/false] (false)
keyboardNavigation //Навигация с помощью клавиатуры [true/false] (true)
showLabel //Показать описание [true/false] (true)
labelPosition //Позиция мини-галереи [bottom/top] (bottom)
descAttr //Атрибут с описанием (alt)
dockPosition //Позиция галереи [top/bottom] (top)
maxThumbWidth //Максимальная ширина миниатюры [в пикселях] (0)
maxThumbHeight //Максимальная высота миниатюры [в пикселях] (0)
timeOut //Максимальное время ожидания загрузки картинки [в секундах] (15)
wheelNavigation //Включение навигации колесиком мышки [true/false] (true)
openImageEffect //Эффект для открытия изображения (Linear)
closeImageEffect //Эффект для закрытия изображения (linear)
scrollDockEffect //Эффект для скроулинга изображения (linear)

При загрузке easing.js доступно применение эффектов:

easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, 
easeOutBounce, easeInOutBounce, jswing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, 
easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint,
easeInOutQuint, easeInSine, easeOutSine , easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo,
easeInCirc, easeOutCirc, easeInOutCirc

Смотреть пример

Скачать исходник Размер: 1,13MB | Изменен: 18.01.13 | Загрузок: 122