Frontender`s Spectre - бот Telegram, который собирает контент для фронтенд-разработчиков в одном месте. Бесплатно.
плагин для просмотра изображений

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

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

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

Плагин может быть задействован как на чистом 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. Скачать файлы плагина можно по ссылке выше.