SmartPhoto

Foto Cerdas

Penampil gambar responsif yang paling mudah digunakan terutama untuk perangkat seluler

Lihat https://appleple.github.io/SmartPhoto/ untuk dokumen dan demo lengkap
Jika Anda orang Jepang, Lihat di sini https://www.appleple.com/blog/javascript/smartphoto-js.html.

Fitur

• Gerakan intuitif seperti mencubit masuk/mencubit keluar/menyeret/menggesek

• Gunakan Akselerometer untuk memindahkan gambar

• Dapat diakses dari keyboard dan pembaca layar

• Tampilkan gambar melalui hash URL

• Dapat membuat grup foto

Instalasi

• npm

• mandiri

melalui npm

 npm instal foto pintar --simpan

atau benang

 benang tambahkan foto pintar

Penggunaan

memerlukan

 const SmartPhoto = memerlukan('foto pintar');

foto pintar.js

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

jquery-smartphoto.js

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

Penggunaan Dasar Mandiri

Pilihan

variabel	keterangan	bawaan
panah	panah sebelumnya/berikutnya	BENAR
navigasi	gambar navigasi di bagian bawah	BENAR
gunakanOrientationApi	gunakan accelerometer untuk memindahkan gambar	BENAR
mengubah ukuranStyle	mengubah ukuran gambar agar terisi/pas di layar	'mengisi'
kecepatan animasi	kecepatan animasi saat berpindah gambar	300
Interval kekuatan	frekuensi untuk menerapkan gaya pada gambar	10

Sembunyikan bagian

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

Opsi Pas/Isi

Anda dapat memilih apakah Anda ingin menskalakan gambar agar pas/terisi

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

Peristiwa

 // saat modal openphoto.on('open',function(){console.log('open');});// saat modal closephoto.on('close',function(){console.log( 'close');});// saat semua gambar dimuatphoto.on('loadall',function(){console.log('loadall');});// saat foto dimuat changephoto.on('change',function(){console.log('change');});// saat menggesek startphoto.on('swipestart',function(){console.log('swipestart');} );// saat menggesek berakhirphoto.on('swipeend',function(){console.log('swipeend');});// saat diperbesar inphoto.on('zoomin',function(){console.log('zoomin');});// saat diperbesarphoto.on('zoomout',function(){console.log('zoomout');} );

SCSS

variabel	keterangan	bawaan
$kecepatan animasi	kecepatan animasi saat berpindah gambar	.3s
$warna latar belakang	warna latar belakang saat melihat gambar	rgba(0, 0, 0, 1)
$warna header	warna tajuk	rgba(0, 0, 0, .2)

Unduh

Unduh ZIP

Github

https://github.com/appleple/SmartPhoto

Penyumbang

@steelydylan

Lisensi

Hak cipta kode dan dokumentasi 2017 oleh appleple, Inc. Kode dirilis di bawah Lisensi MIT.