Загрузка SmartPhoto - Загрузка исходного кода SmartPhoto

SmartPhoto

Другой исходный код

v1.6.5

Скачать

СмартФото

Самый простой в использовании адаптивный просмотрщик изображений, особенно для мобильных устройств.

См. https://appleple.github.io/SmartPhoto/ для получения полной документации и демонстраций.
Если вы японец, см. здесь https://www.appleple.com/blog/javascript/smartphoto-js.html.

Особенность

Интуитивно понятные жесты, такие как сведение/разведение/перетаскивание/пролистывание.
Используйте акселерометр для перемещения изображений
Доступен с клавиатуры и программ чтения с экрана.
Показ изображений через хеш URL-адреса
Могу создавать группы фотографий.

Установка

НПМ
автономный

через НПМ

 npm установить смартфото --сохранить

или пряжа

 пряжа добавить смартфото

Использование

требовать

 const SmartPhoto = require('smartphoto');

smartphoto.js

 document.addEventListener('DOMContentLoaded',function(){new SmartPhoto(".js-smartphoto");});

jquery-smartphoto.js

 $(function(){$(".js-smartphoto").SmartPhoto();});

Базовое автономное использование

Вариант

переменная	описание	по умолчанию
стрелки	стрелки «предыдущий/следующий»	истинный
навигация	навигационные изображения внизу	истинный
использоватьOrientationApi	используйте акселерометр для перемещения изображений	истинный
изменить размер стиля	изменить размер изображений, чтобы они заполнились/поместились на экране	'наполнять'
анимацияСкорость	скорость анимации при переключении изображений	300
ForceInterval	частота применения силы к изображениям	10

Скрыть детали

 document.addEventListener('DOMContentLoaded',function(){new SmartPhoto(".js-smartphoto",{arrows: false,nav: false});});

Вариант подгонки/заполнения

Вы можете выбрать, хотите ли вы масштабировать изображения по размеру/заполнению.

 document.addEventListener('DOMContentLoaded',function(){
  новый SmartPhoto(".js-smartphoto",{ resizeStyle: 'fit'
  });});

Событие

 // когда модальное openphoto.on('open',function(){console.log('open');});// когда модальное closephoto.on('close',function(){console.log( 'close');});// когда все изображения загруженыphoto.on('loadall',function(){console.log('loadall');});// когда фотография измененофото.on('change',function(){console.log('change');});// при смахивании началосьphoto.on('swipestart',function(){console.log('swipestart');} );// когда смахивание завершеноphoto.on('swipeend',function(){console.log('swipeend');});// при увеличении inphoto.on('zoomin',function(){console.log('zoomin');});// при уменьшении масштабаphoto.on('zoomout',function(){console.log('zoomin');} );

СССС

переменная	описание	по умолчанию
$animation-speed	скорость анимации при переключении изображений	.3 с
$backdrop-color	цвет фона при просмотре изображений	rgba(0, 0, 0, 1)
$header-color	цвет заголовка	rgba(0, 0, 0, .2)