Легковесный плагин с современной технологией для удобного просмотра изображений на сайте. Разрабатывался специально с акцентом на мобильные устройства.
Идеальное решение для фото галерей или приложений, которые используют графический контент. Плагин позволяет создавать лайтбоксы с изображениями, используя приятную анимацию и полноценную поддержку браузерами. Конечно же, пользоваться данным плагином на мобильном устройстве одно удовольствие.
Плагин может быть задействован как на чистом JavaScript, также и с помощью jQuery. Просмотр изображений включает в себя следующие особенности:
- Интуитивно понятные жесты – пользователь легко сможет управлять изображениями;
- Использование акселерометра, чтобы перемещать изображения;
- Возможно управление с клавиатуры;
- Показывать картинки через хэш URL`а;
- Можно группировать фотографии.
Использование плагина jQuery просмотр изображений:
Подключаем файлы плагина
<script src="/path/to/js/jquery-smartphoto.js"></script> <link rel="stylesheet" href="/path/to/css/smartphoto.min.css"></script>
Создаем простую разметку с изображениями
<a href="./assets/large-kuma.jpg" class="js-smartPhoto" data-caption="bear" data-id="bear"> <img src="./assets/kuma.jpg" width="360" data-group="animal"/> </a> <a href="./assets/large-rakuda.jpg" class="js-smartPhoto" data-caption="camel" data-id="camel"> <img src="./assets/rakuda.jpg" width="360" data-group="animal"/> </a> <a href="./assets/large-sai.jpg" class="js-smartPhoto" data-caption="rhinoceros" data-id="rhinoceros"> <img src="./assets/sai.jpg" width="360" data-group="animal"/> </a>
Объявляем работу плагина
$(function(){ $(".js-smartPhoto").smartPhoto(); });
Опции плагина для просмотра изображений:
переменная | описание | по умолчанию |
---|---|---|
arrows | Кнопки вперед и назад | true |
nav | Кнопки навигации по картинкам | true |
useOrientationApi | Использование акслерометра | true |
resizeStyle | Изменения размера изображений «fill\fit» | ‘fill’ |
animationSpeed | Скорость анимации переключения картинок | 300 |
forceInterval | Частота применения силы к изображениям | 10 |
Мощный, современный плагин для просмотра изображений. Может работать как без зависимостей, так и с поддержкой jQuery. Скачать файлы плагина можно по ссылке выше.