SmartPhoto.js — современный плагин для просмотра изображений с поддержкой мобильных устройств

03.05.2017 weatherless JavaScript » jQuery » #971

Смотреть Источник Скачать

Легковесный плагин с современной технологией для удобного просмотра изображений на сайте. Разрабатывался специально с акцентом на мобильные устройства.

Идеальное решение для фото галерей или приложений, которые используют графический контент. Плагин позволяет создавать лайтбоксы с изображениями, используя приятную анимацию и полноценную поддержку браузерами. Конечно же, пользоваться данным плагином на мобильном устройстве одно удовольствие.

Плагин может быть задействован как на чистом JavaScript, также и с помощью jQuery. Просмотр изображений включает в себя следующие особенности:

Интуитивно понятные жесты – пользователь легко сможет управлять изображениями;
Использование акселерометра, чтобы перемещать изображения;
Возможно управление с клавиатуры;
Показывать картинки через хэш URL`а;
Можно группировать фотографии.

Использование плагина jQuery просмотр изображений:

Подключаем файлы плагина

<script src="/path/to/js/jquery-smartphoto.js"></script>
<link rel="stylesheet" href="/path/to/css/smartphoto.min.css"></script>

1 2	<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>

</a>

</a>

</a>

Объявляем работу плагина

$(function(){
    $(".js-smartPhoto").smartPhoto();
});

$(function(){

$(".js-smartPhoto").smartPhoto();

});

Опции плагина для просмотра изображений:

переменная	описание	по умолчанию
arrows	Кнопки вперед и назад	true
nav	Кнопки навигации по картинкам	true
useOrientationApi	Использование акслерометра	true
resizeStyle	Изменения размера изображений «fill\fit»	‘fill’
animationSpeed	Скорость анимации переключения картинок	300
forceInterval	Частота применения силы к изображениям	10

Мощный, современный плагин для просмотра изображений. Может работать как без зависимостей, так и с поддержкой jQuery. Скачать файлы плагина можно по ссылке выше.