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

Дата публикации  Дата изменения18.01.13  КомментарииНет   Просмотры1028

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

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

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

$('#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 | Загрузок: 11
Бесплатные курсы

Категории

Теги: , , ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые