Download SmartPhoto - Download do código-fonte SmartPhoto

SmartPhoto

Outro código-fonte

v1.6.5

Baixar

Foto inteligente

O visualizador de imagens responsivo mais fácil de usar, especialmente para dispositivos móveis

Consulte https://appleple.github.io/SmartPhoto/ para documentos e demonstrações completos
Se você for japonês, consulte aqui https://www.appleple.com/blog/javascript/smartphoto-js.html.

Recurso

Gestos intuitivos, como apertar/afastar/arrastar/deslizar
Use o acelerômetro para mover imagens
Acessível a partir de teclados e leitores de tela
Mostrar fotos via hash de URL
Pode fazer grupos de fotos

Instalação

npm
autônomo

via npm

 npm instalar foto inteligente --save

ou fio

 fio adicionar foto inteligente

Uso

exigir

 const SmartPhoto = require('smartphoto');

foto inteligente.js

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

jquery-smartphoto.js

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

Uso autônomo básico

Opção

variável	descrição	padrão
setas	setas anterior/próxima	verdadeiro
navegação	imagens de navegação na parte inferior	verdadeiro
useOrientationApi	use o acelerômetro para mover imagens	verdadeiro
redimensionarEstilo	redimensionar imagens para preencher/caber na tela	'preencher'
animaçãoVelocidade	velocidade de animação ao trocar imagens	300
forceInterval	frequência para aplicar força às imagens	10

Ocultar peças

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

Opção de ajuste/preenchimento

Você pode escolher se deseja dimensionar as imagens para caber/preencher

 document.addEventListener('DOMContentLoaded',function(){
  novo SmartPhoto(".js-smartphoto",{ resizeStyle: 'fit'
  });});

Evento

 // quando o modal opensphoto.on('open',function(){console.log('open');}); // quando o modal closedphoto.on('close',function(){console.log( 'close');});// quando todas as imagens são carregadasphoto.on('loadall',function(){console.log('loadall');});// quando a foto é changephoto.on('change',function(){console.log('change');});// quando deslizar iniciadophoto.on('swipestart',function(){console.log('swipestart');} );// quando o deslizamento terminaphoto.on('swipeend',function(){console.log('swipeend');});// quando ampliado inphoto.on('zoomin',function(){console.log('zoomin');});// quando reduzidophoto.on('zoomout',function(){console.log('zoomout');} );

SCSS

variável	descrição	padrão
$velocidade de animação	velocidade de animação ao trocar imagens	0,3s
$ cor de fundo	cor de fundo ao visualizar imagens	rgb(0, 0, 0, 1)
$cor do cabeçalho	cor do cabeçalho	rgb(0, 0, 0, .2)