تنزيل SmartPhoto - تنزيل رمز مصدر SmartPhoto

SmartPhoto

شفرة المصدر الأخرى

v1.6.5

تنزيل

صور ذكية

عارض الصور سريع الاستجابة الأكثر سهولة في الاستخدام خاصة للأجهزة المحمولة

راجع https://apple.github.io/SmartPhoto/ للحصول على المستندات والعروض التوضيحية الكاملة
إذا كنت يابانيًا، فراجع هنا https://www.apple.com/blog/javascript/smartphoto-js.html بدلاً من ذلك.

ميزة

إيماءات بديهية مثل الضغط للداخل/الضغط للخارج/السحب/التمرير
استخدم مقياس التسارع لتحريك الصور
يمكن الوصول إليها من لوحات المفاتيح وقارئات الشاشة
عرض الصور عبر تجزئة URL
يمكن أن تجعل مجموعات الصور

تثبيت

npm
مستقل

عبر نبم

 npm تثبيت الصورة الذكية - حفظ

أو الغزل

 الغزل إضافة الصورة الذكية

الاستخدام

يتطلب

 const SmartPhoto = require('smartphoto');

Smartphoto.js

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

مسج-smartphoto.js

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

الاستخدام الأساسي المستقل

خيار

عامل	وصف	تقصير
السهام	الأسهم السابقة/التالي	حقيقي
التنقل	صور الملاحة في الأسفل	حقيقي
useOrientationApi	استخدام مقياس التسارع لتحريك الصور	حقيقي
resizeStyle	تغيير حجم الصور لملءها / احتوائها على الشاشة	'يملأ'
AnimationSpeed	سرعة الرسوم المتحركة عند تبديل الصور	300
forceInterval	تردد لتطبيق القوة على الصور	10

إخفاء الأجزاء

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

خيار الملاءمة/الملء

يمكنك اختيار ما إذا كنت تريد تغيير حجم الصور لتناسب/ملءها

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

حدث

 // عندما يتم فتح الصورة المشروطة.on('open',function(){console.log('open');});// عندما يتم إغلاق الصورة المشروطة.on('إغلاق',function(){console.log( 'إغلاق');});// عندما يتم تحميل جميع الصورphoto.on('loadall',function(){console.log('loadall');});// عندما تكون الصورة تم تغيير photo.on('change',function(){console.log('change');});// عند بدء التمرير photo.on('swipestart',function(){console.log('swipestart');} );// عند انتهاء التمرير السريع photo.on('swipeend',function(){console.log('swipeend');});// عند التكبير inphoto.on('zoomin',function(){console.log('zoomin');});// عند التصغيرphoto.on('zoomout',function(){console.log('zoomout');} );

SCSS

عامل	وصف	تقصير
$ سرعة الرسوم المتحركة	سرعة الرسوم المتحركة عند تبديل الصور	.3ث
لون الخلفية $	لون الخلفية عند عرض الصور	رغبا (0، 0، 0، 1)
لون رأس $	لون الرأس	رغبا (0، 0، 0، .2)