Photoswipe هو ألبوم صور/لعبة مصممة خصيصًا لأجهزة اللمس المحمول. إنه متوافق مع جميع متصفحات iPhone و iPad و BlackBerry 6+ ومكتب سطح المكتب. يعتمد التنفيذ الأساسي على HTML/CSS/JavaScript ، وهو منتج ألبوم صور مجاني ومفتوح المصدر.
لمن
دع موقع الهاتف المحمول يختبر ألبوم الألبوم مثل التطبيق الأصلي.
ميزات ممتازة
يوفر Photoswipe للمستخدمين واجهة تفاعلية مألوفة وبديهية.
الموقع الرسمي
http://www.photoswipe.com/
مثال رمز المصدر
http://github.com/downloads/codecomputerlove/photoswipe/code.photoswipe-3.0.5.zip
جيثب
https://github.com/codecomputerlove/photoswipe
العرض التوضيحي عبر الإنترنت
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
ميزات التوافق
Photoswipe متوافق مع عدد كبير من الأجهزة المحمولة وجميع مكتبات/أطراف تطوير JavaScript الشهيرة. هناك كل من الإصدارات القائمة على jQuery ، وإصدارات خالية من jQuery ، والإصدارات المتوافقة مع jQuery. بالطبع ، كل ما في واحد هو كل شيء في حزمة نموذج الكود المصدري.
كيفية استخدام
Photoswipe هي مكتبة JavaScript مستقلة يمكن دمجها بسهولة في موقع الويب الخاص بك. تم إجراء الكثير من التحسينات لمتصفحات الهاتف المحمول (WebKits). بالطبع ، بالنسبة لمتصفحات سطح المكتب و jQueryMobile ، يتم توفير الإصدارات المقابلة أيضًا في حزمة الكود المصدري.
مراجع مكتبة الفصل
<!- أشار Photoswipe إلى Klass من قبل. إذا كنت بحاجة إلى زيادة سرعة التحميل ، فيمكنك إضافة علامة/سمة تأجيل إلى البرنامج النصي->
<script type = "text/javaScript" src = "klass.min.js"> </script>
<!- ملاحظة مهمة ، إذا لم تستخدم إصدار jQuery ، فسيحدث خطأ تحت IE. بالطبع ، إذا كنت تستخدم إصدار jQuery ، فأنت بحاجة إلى تقديم jQuery->
<script type = "text/javaScript" src = "code.photoswipe-3.0.5.min.js"> </script>
رمز الاتصال
/* أضف الاستماع إلى الحدث DomContentEntload ، على غرار وظيفة jQuery الجاهزة.
أمثلة على الطريقة الافتراضية/01-default.html
يرجى التحقق من .examples/09-mode-mode-no-thumbnails.html لعدم وجود وضع مصغرة.
*/
// تتلقى طريقة PhotoSwipe.attach 3 معلمات (مجموعة عناصر HTML ، ومعلومات التكوين الاختيارية ، ومعرف نوع السلسلة الاختياري عند وجود مثيلات متعددة)
document.addeventListener ('domcontentloaded' ، function () {
// قم بتعيين Photoswipe لربط جميع العلامات <a> تحت الحاوية مع معرف كمعرض. انقر لتفعيل
// الكائن هنا هو مثيل لافتة الصور ، ويمكنك استخدام الطرق المقابلة ، مثل العرض (0) ، Hide () ، إلخ.
var myphotoswipe = code.photoswipe.attach (window.document.queryselectorall ('#gallery a') ، {enableMouseWheel: false ، enableKeyboard: false}) ؛
}، خطأ شنيع)؛
إذا كنت تستخدم jQuery ، فإن رمز الاتصال هو كما يلي:
// إصدار jQuery ، يجب أيضًا تغيير ملف JS المقابل في ملف JS
// انظر الأمثلة/02-jquery.html للحصول على تفاصيل عن أمثلة
$ (وثيقة). ready (function () {
// الكائن هنا هو مثيل لافتة الصور ، ويمكنك استخدام الطرق المقابلة ، مثل العرض (0) ، Hide () ، إلخ.
var myphotoswipe = $ ("#gallery a"). photoswipe ({enableMouseWheel: false ، enableKeyboard: false}) ؛
}) ؛
رمز HTML
<!- تستخدم UL LI وأشياء أخرى لعرض الصور المصغرة ، ويمكن أيضًا تعديلها حسب الحاجة. العنصر <img> أدناه هو صورة مصغرة. إذا لم يكن مطلوبًا ، يمكن ضبط SRC على فارغ ->
<ul id = "gallery">
<li> <a href = "images/full/01.jpg"> <img src = "images/thumb/01.jpg"/> </a> </li>
<li> <a href = "images/full/02.jpg"> <img src = "images/thumb/02.jpg"/> </a> </li>
<li> <a href = "Images/full/03.jpg"> <img src = "images/thumb/03.jpg"/> </a> </li>
<li> <a href = "images/full/04.jpg"> <img src = "images/thumb/04.jpg"/> </a> </li>
<li> <a href = "images/full/05.jpg"> <img src = "images/thumb/05.jpg"/> </a> </li>
<li> <a href = "images/full/06.jpg"> <img src = "images/thumb/06.jpg"/> </a> </li>
</ul>
وصف المعلمة
1.allowuserzoom: يسمح للمستخدمين بالنقر المزدوج بالتكبير/الانتقال لعرض الصور. القيمة الافتراضية = صواب
2.AutostArtSlideshow: عندما يتم تنشيط Photoswipe ، سيتم تشغيل عرض الشرائح تلقائيًا. القيمة الافتراضية = خطأ
3.allowRotationOnuserzoom: يسمح فقط بدعم من iOS - للمستخدمين بتدوير الصور مع الإيماءات في وضع التكبير/المقلاة. القيمة الافتراضية = خطأ
4.BackButtonHideenabled: اضغط على مفتاح العودة لإخفاء شرائح الألبوم. يستخدم بشكل أساسي Android و BlackBerry. وهو يدعم إصدارات BB6 و Android V2.1 و iOS 4 والإصدارات الأحدث. القيمة الافتراضية = صواب
5.CaptionAndToolbarautoHideLay: وقت التأخير يخفي تلقائيًا بواسطة شريط العنوان وشريط الأدوات. القيمة الافتراضية هي = 5000 (MS). إذا تم ضبطه على 0 ، فلن يتم إخفاءه تلقائيًا (انقر/انقر للتبديل مرئيًا ومخفيًا)
6.CaptionAndToolBarflipposition: تبديل شريط العنوان وشريط الأدوات (دعنا يتم عرض التسمية التوضيحية في الأسفل ويتم عرض شريط الأدوات في الأعلى). القيمة الافتراضية = خطأ
7.CaptionandToolbarhide: إخفاء شريط العنوان وشريط الأدوات. القيمة الافتراضية = خطأ
8.CaptionAndToolBaropacity: شفافية شريط العنوان وشريط الأدوات (0-1). القيمة الافتراضية = 0.8
9. القيمة الافتراضية = صواب
10.cachemode: وضع ذاكرة التخزين المؤقت ، code.photoswipe.cache.mode.normal (افتراضي ، عادي) أو code.photoswipe.cache.mode.aggression (جذري ، نشط). يقرر كيف يدير Photoswipe ذاكرة التخزين المؤقت لذاكرة التخزين المؤقت للصور.
11. سوف يقوم الوضع العدواني بتعيين نوع الصور غير "الحالية ، السابقة ، التالية" الفارغة. سيكون مفيدًا لفيضان الذاكرة في متصفحات iOS الأقدم. في معظم الحالات ، يكون الوضع العادي على ما يرام.
12.doubletapspeed: الحد الأقصى للفاصل الزمني للنقر المزدوج. القيمة الافتراضية = 300 (MS)
13.doubletapzoomlevel: عندما ينقر المستخدم المزدوج ، فإن المضاعف هو المستوى الافتراضي "Zoom-in". القيمة الافتراضية = 2.5
14.EnabledRag: يسمح بسحب الصورة السابقة/التالية إلى الواجهة الحالية. القيمة الافتراضية = صواب
15. enablekeyboard: السماح لعمليات لوحة المفاتيح (تبديل السهم الأيسر والأيمن ، خروج ESC ، أدخل التشغيل التلقائي ، شريط عرض الفضاء/شريط العنوان المخفي/الخروج). الافتراضي = صحيح
16. EnableMouseWheel: يسمح بعجلات الماوس. الافتراضي = صحيح
17.fadeinspeed: السرعة (المدة) لعنصر التأثير ، مللي ثانية. الافتراضي = 250
18.fadeoutspeed: السرعة (المدة) لعنصر تأثير التلاشي ، ميلي ثانية. الافتراضي = 250
19.IMAGESCALEMETHOD: طريقة تحجيم الصورة (الوضع). القيم الاختيارية: "Fit" ، "FitNouscale" و "Zoom". يضمن وضع "الملاءمة" أن تتكيف الصورة على الشاشة. "FitNouscale" يشبه "FIT" ولكنه لا يوسع الصورة. ستقوم "Zoom" بفحص الصورة بالكامل ، ولكن من الممكن أن يكون تحجيم الصورة متناسبًا بنفس القدر. الافتراضي = "FIT"
20.invertmousewheel: عكس عجلة الماوس. بشكل افتراضي ، سوف ينتقل التمرير لأسفل الماوس إلى الصورة التالية وحتى الصورة السابقة. الافتراضي = خطأ
21.JqueryMobile: يشير إلى ما إذا كانت Photoswipe مدمجة في مشروع JQuery Mobile. افتراضيًا ، سيحاول PhotoSwipe العمل من أجلك
22.JqueryMobileDialoghash: علامة تجزئة jQuery Mobile المستخدمة على صفحات النافذة وحوار. القيمة الافتراضية = "& ui-state = مربع الحوار"
23.loop: ما إذا كان الألبوم يحلق تلقائيًا. الافتراضي = صحيح
24.Margin: الفاصل بين صورتين ، الوحدة هي وحدات البكسل. الافتراضي = 20
25.maxuserzoom: أقصى تكبير. الافتراضي = 5.0 (سيتم تجاهله إلى 0)
26.Minuserzoom: أصغر مضاعف تخفيض للصورة. الافتراضي = 0.5 (سيتم تجاهله إلى 0)
27. Mousewheelspeed: الحساسية استجابة لعجلة الماوس. الافتراضي = 500 (MS)
28.NextPreviousSlidesPeed: كم عدد المللي ثانية التي سيتم تأخيرها عندما يتم النقر على الأزرار السابقة والجادمة. الافتراضي = 0 (التبديل الآن)
29.Preventhide: يمنع المستخدمين من إغلاق الصور الضوئية. كما سيتم إخفاء زر "إغلاق" على شريط الأدوات. استخدمه على الصفحة الحصرية (المثال هو أمثلة/08- مود. الافتراضي = خطأ
30.preventslideshow: يمنع وضع التشغيل التلقائي. كما سوف يخفي زر التشغيل في شريط الأدوات. الافتراضي = خطأ
31.SlideshowDelay: كم من الوقت يستغرق تشغيل الصورة التالية في وضع التشغيل التلقائي؟ الافتراضي = 3000 (MS)
32. slidespeed: الوقت الذي تنزلق فيه الصورة إلى العرض. الافتراضي = 250 (MS)
33.SwipethReshold: كم عدد البكسلات التي تنزلقها لإصبعها لتشغيل حدث إيماءة. الافتراضي = 50
34.SwipetimethReshold: يحدد الحد الأقصى لعدد ميلي ثانية لإثارة إيماءة التمرير. إذا كانت بطيئة للغاية ، فلن تؤدي إلى الشريحة ، وسوف تسحب موضع الصورة الحالية فقط. الافتراضي = 250
35. الافتراضي = "Ease-Out"
36.zindex: قيمة Zindex الأولية. الافتراضي = 1000
37. الافتراضي = خطأ
38.UIWebViewResetPositionDelay: الوقت للتحقق مما إذا كان اتجاه الجهاز يتغير بانتظام هو 500 (MS)
39.PreventDefaultTouchEvents: يحجب حدث اللمس الافتراضي ، مثل تمرير الصفحة. الافتراضي = صحيح
40. Target: يجب أن يكون عنصر DOM قانوني (مثل div). الافتراضي هو نافذة (صفحة كاملة). إذا كان DOM منخفض المستوى ، فسيتم عرضه في DOM وقد لا يكون ملء الشاشة.
وظائف مخصصة
getToolbar: function () { /*إرجاع سلسلة html المراد عرضها في شريط الأدوات* /} ، getImagesource: function (el) { /*talle gallery كيفية الحصول على src من الصورة. افتراضيًا ، يفترض المعرض أنك تستخدم علامة <A> للف <IMG> Thumbnail ، وأن سمة HREF الخاصة بالعلامة <A> هي عنوان URL للصورة الكاملة. في هذا الوقت ، يمكن استخدام هذه الطريقة لإرجاع مسار صورة العنصر المقابل. يمكن أن يكون من جميع الأنواع. على سبيل المثال ، سمة REL أو شيء من هذا القبيل. سيكون من الأسهل الحصول على jQuery. */ return el.getAttribute ('rel') ؛ } ، getImageCaption: function (el) { /** مثل طريقة getImagesource ، تُرجع هذه الطريقة عنوان الصورة. بشكل افتراضي ، يبحث المعرض عن سمة ALT للصورة. * /} ، getImagemetadata: Function (el) { / ** إذا استمعت إلى OnDisplayImage ، فيمكنك الحصول على معلومات التعريف الإضافية من خلال هذه الوظيفة. واستخدم */ إرجاع في ondisplayimage {longdescription: el.getattribute (EL ، 'data-long-description')}}بالنسبة لهواتف Android ، ستؤدي نقرة واحدة إلى إغلاق مشكلة النقر على طبقة ، وستظل الطبقة السفلية تؤدي إلى حدث النقر. حلنا كما يلي:
// النقرات الزناد على مستويات متعددة على هواتف Android. نستخدم مؤقتًا لاعتراض event_timeout = 500 ؛ // منع مشغلات الأحداث المتعددة // أحداث متتالية في وقت قصير var multiclickprevent = false ؛ وظيفة PreventMulticLick () {if (multiclickprevent) {return false ؛ } multiclickprevent = true ؛ window.settimeout (function () {multiclickprevent = false ؛} ، event_timeout) ؛ العودة صحيح. } ؛ // التكيف مع المستعرض var useragent = navigator.userAgent ؛ var likeios = useragent.match (/ipad | iPhone | iPod/i) ؛ var likeandroid = useragent.match (/android/i) ؛ var SpecialClick = "Click" ؛ if (likeios) {SpecialClick = "TouchStart Click" ؛ } آخر إذا (likeandroid) {specialClick = "TouchStart Click" ؛ } /example $ (". // مثال $ ("body"). live (specialclick ، function () {if (PremeTmulticLick ()) {// performents Other Operations}}) ؛ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.