Téléchargement SmartPhoto - Téléchargement du code source SmartPhoto

SmartPhoto

Autre code source

v1.6.5

Télécharger

Photo intelligente

La visionneuse d'images réactive la plus facile à utiliser, spécialement pour les appareils mobiles

Voir https://appleple.github.io/SmartPhoto/ pour des documents complets et des démos
Si vous êtes japonais, voyez plutôt ici https://www.appleple.com/blog/javascript/smartphoto-js.html.

Fonctionnalité

Gestes intuitifs tels que pincer/pincer/glisser/glisser
Utilisez l'accéléromètre pour déplacer des images
Accessible depuis les claviers et les lecteurs d'écran
Afficher les images via le hachage d'URL
Peut créer des groupes de photos

Installation

npm
autonome

via npm

 npm installer smartphoto --save

ou du fil

 fil ajouter une photo intelligente

Usage

exiger

 const SmartPhoto = require('smartphoto');

smartphoto.js

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

jquery-smartphoto.js

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

Utilisation autonome de base

Option

variable	description	défaut
flèches	flèches précédent/suivant	vrai
navigation	images de navigation en bas	vrai
useOrientationApi	utiliser l'accéléromètre pour déplacer les images	vrai
redimensionnerStyle	redimensionner les images pour les remplir/les adapter à l'écran	'remplir'
animationVitesse	vitesse d'animation lors du changement d'image	300
forceIntervalle	fréquence pour appliquer une force aux images	10

Masquer les pièces

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

Option Ajuster/Remplir

Vous pouvez choisir si vous souhaitez redimensionner les images pour les ajuster/remplir

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

Événement

 // lorsque le modal openphoto.on('open',function(){console.log('open');});// lorsque le modal closephoto.on('close',function(){console.log( 'close');});// lorsque toutes les images sont chargéesphoto.on('loadall',function(){console.log('loadall');});// lorsque la photo est modifiéephoto.on('change' ,function(){console.log('change');});// quand glisser démarréphoto.on('swipestart',function(){console.log('swipestart');});// lorsque le glissement se terminephoto.on('swipeend',function(){console.log('swipeend'); });// lors d'un zoom photo.on('zoomin',function(){console.log('zoomin');});// lors d'un zoom outphoto.on('zoomout',function(){console.log('zoomout');});

SCSS

variable	description	défaut
$vitesse d'animation	vitesse d'animation lors du changement d'image	.3s
$couleur-toile de fond	couleur de fond lors de la visualisation des images	rgba(0, 0, 0, 1)
$ couleur de l'en-tête	couleur d'en-tête	rgba(0, 0, 0, .2)