837 Glisse.js — это простое, быстрое и полностью настраиваемое jQuery-средство для просмотра фотографий. Вам понравятся эффекты переходов между двумя изображениями, полностью выполненные на CSS3.
Обязательно посмотрите два примера с прекрасными фотографиями Пьера Низета, чтобы увидеть плагин в действии.
Возможности
- Навигация с помощью клавиатуры
- Полностью настраиваемый CSS код
- Анимация с помощью CSS3 keyframes
- 7 различных эффектов переходов
- Масштабирование под область просмотра
- Поддержка полноэкранного режима
- Поддержка iPad & iPhone (а скоро и полная поддержка Android)
Внимание
Этот плагин использует много новых возможностей CSS3, например, keyframes. Поэтому скрипт не работает в старых браузерах.
Но цель разработчика в том, что, если от плагина будет хорошая отдача, сделать его полностью кроссбраузерным, используя javascript-анимацию для старых браузеров.
План разработки
- Поддержка старых браузеров
- Добавление перелистывания
Документация
Основное использование
Поместите этот скрипт в свой документ после объявления jQuery
|
1 |
<script src="glisse.js"></script> |
Затем добавьте основную таблицу стилей (перед вашей собственной таблицей стилей)
Эта таблица содержит основные стили Glisse.js, но без визуализации!
|
1 |
<link rel="stylesheet" href="glisse.css" /> |
Добавьте своему изображению атрибут «data-glisse-big». Этот атрибут соответствует полной картинке.
|
1 |
<img class="pics" src="thumb.jpg" data-glisse-big="big.jpg"/> |
Если вы хотите объединить показываемые изображения в группы, просто добавьте атрибут «rel» своим ссылкам
|
1 2 3 |
<img class="pics" src="thumb-1.jpg" data-glisse-big="big-1.jpg" rel="group1"/> <img class="pics" src="thumb-2.jpg" data-glisse-big="big-2.jpg" rel="group1"/> <img class="pics" src="thumb-3.jpg" data-glisse-big="big-3.jpg" rel="group1"/> |
Если вы хотите показать заголовок во время слайдшоу, просто используйте атрибут «title»
|
1 2 |
<img class="pics" src="thumb-1.jpg" data-glisse-big="big-1.jpg" rel="group1" title="my awesome picture"/> <img class="pics" src="thumb-2.jpg" data-glisse-big="big-2.jpg" rel="group1" title="wooh, another picture"/> |
После этого вызовите плагин.
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function () { $('.pics').glisse({ changeSpeed: 550, speed: 500, effect:'bounce', fullscreen: true }); }); </script> |
Опции
Допустимые опции glisse.js:
- changeSpeed — продолжительность перехода между 2 изображениями (по умолчанию 1000)
- speed — продолжительность открытия/закрытия слайдшоу (по умолчанию 300)
- dataName — изменение названия атрибута data для полноэкранных изображений (по умолчанию data-glisse-big)
- fullscren — полноэкранная галерея с использованием полноэкранного api (по умолчанию false)
- disablindRightClick — отключение правого клика на полноразмерном изображении (по умолчанию false)
- effect — эффект (по умолчанию bounce)
- Возможные значения эффектов:
- bounce
- fadeBig
- fade
- roll
- rotate
- flipX
- flipY
Совместимость
- Firefox 4+
- Opera 11.6+
- Chrome 14+
- Safari 5+
- iPhone/iPad iOS 4.3+
- BlackBerry OS v6+
Работает, но без CSS3 переходов:
- Opera 10+
- Firefox 3.6
- IE8+
Гуд!