ดาวน์โหลด SmartPhoto - ดาวน์โหลดซอร์สโค้ด SmartPhoto

SmartPhoto

ซอร์สโค้ดอื่น ๆ

v1.6.5

ดาวน์โหลด

สมาร์ทโฟโต้

โปรแกรมดูรูปภาพแบบตอบสนองที่ใช้งานง่ายที่สุดโดยเฉพาะสำหรับอุปกรณ์มือถือ

ดู https://appleple.github.io/SmartPhoto/ สำหรับเอกสารและการสาธิตทั้งหมด
หากคุณเป็นคนญี่ปุ่น ดูที่นี่ https://www.appleple.com/blog/javascript/smartphoto-js.html แทน

คุณสมบัติ

ท่าทางที่ใช้งานง่าย เช่น บีบนิ้วเข้า/บีบนิ้วออก/ลาก/ปัดนิ้ว
ใช้ Accelerometer เพื่อย้ายภาพ
เข้าถึงได้จากคีย์บอร์ดและเครื่องอ่านหน้าจอ
แสดงรูปภาพผ่านแฮช URL
สามารถสร้างกลุ่มภาพถ่ายได้

การติดตั้ง

เวลา 22.00 น
แบบสแตนด์อโลน

ผ่านทางเวลา 13.00 น

 npm ติดตั้ง smartphoto --save

หรือเส้นด้าย

 เส้นด้ายเพิ่ม smartphoto

การใช้งาน

จำเป็นต้อง

 const SmartPhoto = ต้องการ ('สมาร์ทโฟโต้');

smartphoto.js

 document.addEventListener('DOMContentLoaded',function(){ใหม่ SmartPhoto(".js-smartphoto");});

jquery-smartphoto.js

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

การใช้งานสแตนด์อโลนพื้นฐาน

ตัวเลือก

ตัวแปร	คำอธิบาย	ค่าเริ่มต้น
ลูกศร	ลูกศรก่อนหน้า/ถัดไป	จริง
นำทาง	รูปภาพการนำทางที่ด้านล่าง	จริง
ใช้ OrientationApi	ใช้มาตรความเร่งเพื่อย้ายภาพ	จริง
ปรับขนาดสไตล์	ปรับขนาดภาพให้เต็ม/พอดีบนหน้าจอ	'เติม'
ภาพเคลื่อนไหวความเร็ว	ความเร็วของภาพเคลื่อนไหวเมื่อเปลี่ยนภาพ	300
แรงช่วงเวลา	ความถี่ในการใช้แรงกับภาพ	10

ซ่อนส่วนต่างๆ

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

ตัวเลือกพอดี/เติม

คุณสามารถเลือกได้ว่าต้องการปรับขนาดรูปภาพให้พอดี/เติมหรือไม่

 document.addEventListener('DOMContentLoaded',function(){
  SmartPhoto ใหม่ (".js-smartphoto", { resizeStyle: 'พอดี'
  -

เหตุการณ์

 // เมื่อ modal openphoto.on('open',function(){console.log('open');}); // เมื่อ modal Closedphoto.on('close',function(){console.log( 'close');});// เมื่อโหลดรูปภาพทั้งหมดแล้วphoto.on('loadall',function(){console.log('loadall');});// เมื่อรูปภาพถูกโหลด changephoto.on('change',function(){console.log('change');}); // เมื่อปัด startphoto.on('swipestart',function(){console.log('swipestart');} );// เมื่อปัด endphoto.on('swipeend',function(){console.log('swipeend');});// เมื่อซูม inphoto.on('zoomin',function(){console.log('zoomin');}); // เมื่อซูม outphoto.on('zoomout',function(){console.log('zoomout');} );

สสส

ตัวแปร	คำอธิบาย	ค่าเริ่มต้น
$ความเร็วภาพเคลื่อนไหว	ความเร็วของภาพเคลื่อนไหวเมื่อเปลี่ยนภาพ	.3 วินาที
$สีฉากหลัง	สีฉากหลังเมื่อดูภาพ	RGBA(0, 0, 0, 1)
$สีส่วนหัว	สีส่วนหัว	RGBA(0, 0, 0, .2)