Der am einfachsten zu verwendende responsive Bildbetrachter speziell für mobile Geräte
Vollständige Dokumente und Demos finden Sie unter https://appleple.github.io/SmartPhoto/
Wenn Sie Japaner sind, sehen Sie sich stattdessen hier https://www.appleple.com/blog/javascript/smartphoto-js.html an.
Intuitive Gesten wie Auf- und Zuziehen/Ziehen/Wischen
Verwenden Sie den Beschleunigungsmesser, um Bilder zu verschieben
Zugriff über Tastaturen und Bildschirmleseprogramme
Bilder per URL-Hash anzeigen
Kann Fotogruppen bilden
npm
eigenständig
über npm
npm smartphoto installieren --save
oder Garn
Garn Smartphoto hinzufügen
erfordern
const SmartPhoto = require('smartphoto');
smartphoto.js
document.addEventListener('DOMContentLoaded',function(){new SmartPhoto(".js-smartphoto");});
jquery-smartphoto.js
$(function(){$(".js-smartphoto").SmartPhoto();});
Variable | Beschreibung | Standard |
---|---|---|
Pfeile | Vorherige/nächste Pfeile | WAHR |
Navigation | Navigationsbilder unten | WAHR |
useOrientationApi | Verwenden Sie den Beschleunigungsmesser, um Bilder zu bewegen | WAHR |
resizeStyle | Ändern Sie die Größe von Bildern, damit sie den Bildschirm ausfüllen/passen | 'füllen' |
Animationsgeschwindigkeit | Animationsgeschwindigkeit beim Wechseln von Bildern | 300 |
Kraftintervall | Frequenz, um Kraft auf Bilder auszuüben | 10 |
document.addEventListener('DOMContentLoaded',function(){new SmartPhoto(".js-smartphoto",{arrows: false,nav: false});});
Sie können wählen, ob Sie Bilder passend/füllend skalieren möchten
document.addEventListener('DOMContentLoaded',function(){ neues SmartPhoto(".js-smartphoto",{ resizeStyle: 'fit' });});
// wenn das Modal openphoto.on('open',function(){console.log('open');});// wenn das Modal geschlossenphoto.on('close',function(){console.log( 'close');});// wenn alle Bilder geladen sindphoto.on('loadall',function(){console.log('loadall');});// wenn das Foto geladen ist geändertphoto.on('change',function(){console.log('change');});// wann swipe gestartetphoto.on('swipestart',function(){console.log('swipestart');} );// wenn das Wischen beendet istphoto.on('swipeend',function(){console.log('swipeend');});// wenn gezoomt inphoto.on('zoomin',function(){console.log('zoomin');});// beim Herauszoomenphoto.on('zoomout',function(){console.log('zoomout');} );
Variable | Beschreibung | Standard |
---|---|---|
$animationsgeschwindigkeit | Animationsgeschwindigkeit beim Wechseln von Bildern | .3s |
$Hintergrundfarbe | Hintergrundfarbe beim Betrachten von Bildern | rgba(0, 0, 0, 1) |
$header-color | Kopfzeilenfarbe | rgba(0, 0, 0, .2) |
ZIP herunterladen
https://github.com/appleple/SmartPhoto
@steelydylan
Code und Dokumentation unterliegen dem Copyright 2017 von appleple, Inc. Der Code wurde unter der MIT-Lizenz veröffentlicht.