Descarga de SmartPhoto - Descarga del código fuente SmartPhoto

SmartPhoto

Otro código fuente

v1.6.5

Descargar

Foto inteligente

El visor de imágenes responsivo más fácil de usar, especialmente para dispositivos móviles.

Consulte https://appleple.github.io/SmartPhoto/ para obtener documentos y demostraciones completos.
Si es japonés, consulte aquí https://www.appleple.com/blog/javascript/smartphoto-js.html.

Característica

Gestos intuitivos como pellizcar/pellizcar/arrastrar/deslizar
Utilice el acelerómetro para mover imágenes
Accesible desde teclados y lectores de pantalla
Mostrar imágenes mediante hash de URL
Puede hacer grupos de fotos.

Instalación

mpn
autónomo

vía npm

 npm instala smartphoto --guardar

o hilo

 hilo agregar foto inteligente

Uso

requerir

 const SmartPhoto = requerir('smartphoto');

foto inteligente.js

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

jquery-smartphoto.js

 $(función(){$(".js-smartphoto").SmartPhoto();});

Uso independiente básico

Opción

variable	descripción	por defecto
flechas	flechas anterior/siguiente	verdadero
navegación	imágenes de navegación en la parte inferior	verdadero
utilizarOrientationApi	Usa el acelerómetro para mover imágenes.	verdadero
cambiar tamañoEstilo	cambiar el tamaño de las imágenes para llenarlas o ajustarlas a la pantalla	'llenar'
animaciónVelocidad	velocidad de animación al cambiar de imagen	300
intervalo de fuerza	Frecuencia para aplicar fuerza a las imágenes.	10

Ocultar partes

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

Opción de ajuste/relleno

Puedes elegir si deseas escalar las imágenes para ajustarlas/rellenarlas

 document.addEventListener('DOMContentLoaded',función(){
  nuevo SmartPhoto(".js-smartphoto",{ resizeStyle: 'fit'
  });});

Evento

 // cuando el modal openphoto.on('open',function(){console.log('open');});// cuando el modal closephoto.on('close',function(){console.log( 'close');});// cuando se cargan todas las imágenesphoto.on('loadall',function(){console.log('loadall');});// cuando se carga la foto changephoto.on('change',function(){console.log('change');});// cuando se inicia el deslizamientophoto.on('swipestart',function(){console.log('swipestart');} );// cuando finaliza el deslizamientophoto.on('swipeend',function(){console.log('swipeend');});// cuando se hace zoom inphoto.on('zoomin',function(){console.log('zoomin');});// cuando se alejaphoto.on('zoomout',function(){console.log('zoomout');} );

SCSS

variable	descripción	por defecto
$ velocidad de animación	velocidad de animación al cambiar de imagen	.3s
$color de fondo	color de fondo al ver imágenes	rgba(0, 0, 0, 1)
$ color del encabezado	color del encabezado	rgba(0, 0, 0, .2)