Photoswipe.js الموقع الرسمي: http://photoswipe.com/ ، يمكن تنزيل ملفات Photoswipe والأمثلة ذات الصلة على هذا الموقع.
يستخدم هذا المكون بشكل أساسي لعرض الصور والألبومات ، وهو عملي للغاية.
1. استخدام هذا المكون يتطلب اثنين من ملفات JS
1 <script type = "text/javaScript" src = "simple-inheritance.min.js">
2 <script type = "text/javaScript" src = "code-photoswipe-1.0.11.min.js"> <!-يجب أن يكون الإصدار الأخير الحالي 1.0.11->
2. ثم يمكن أن يكون بنية الصفحة هكذا
<div id = "gallery"> <viv> <viv> <a href = "images/full/01.jpg"> <img src = "images/thumb/01.jpg"/> </a> </viv> <viv> <a href = "images/full/02.jpg HREF = "Images/Full/04.jpg"> <img src = "images/full/04.jpg"> <img src = "images/full/04.jpg"> <img src = "images/thumb/04.jpg"/> </a> </div> <a href = src = "Images/Thumb/05.jpg"/> </a> </viv> <viv> <a href = "images/full/06.jpg"> <img src = "images/thumb/06.jpg"/> </a> </viv> </div> </div>
في الواقع ، بالإضافة إلى بنية الصفحة ، فإن الأشياء الوحيدة المفيدة حقًا في رمز HTML هذا هي ID = "Gallery" و <a href = "path path"> </a> (سيتم شرحه لاحقًا). يلعب الفصل الآخر دورًا فقط في تجميل بنية الصفحة الأصلية (يختلف عن الصفحة التي تريد حقًا أن يكون لها التأثير ، أي أنك تحتاج فقط إلى الكتابة وفقًا لهيكل الصفحة أعلاه ، ويتم إكمال تأثير الصفحة الذي تريده بواسطة المكون الإضافي JS نفسه ، ولا تحتاج إلى كتابة تخطيط التأثير).
تتطلب الصفحة كل من JS و Page Phinction ، والما يلي هو استخدام المكون الإضافي.
3. يمكنك استخدام طريقتين لإعلان المكون الإضافي
1. يتم ذلك عن طريق إضافة addingeventListener () في المتصفح الافتراضي.
document.adDeventListener ("domcontentloaded" ، function () {code.photoswipe ('a' ، '#gallery') ؛ // هذا يتضمن معرف = "معرض" و <a href = "..."> </a> في بنية الصفحة أعلاه ، حيث id = "Gallery" هو الحاوية//<a href = ". إلى} ، خطأ) ؛2. كيفية استخدام jQuery:
$ (document) .Ready (function () {$ ("#Gallery a"). Photoswipe () ؛}) ؛4. مع هذا الإعداد ، من المحتمل أن تكون صفحتك هكذا.
تأثير الصفحة في البداية:
بعد النقر على أي صورة ، يصبح شكل الصفحة كما يلي (هذه الصفحة هي في الواقع الصفحة التي أريدها حقًا):
يمكنك رؤية المحتوى في ALT بوضوح في <img /> فوق الصفحة ، وسيكون هناك أربعة أزرار أدناه ، يمثل: أغلق الصفحة والعودة إلى المظهر الأصلي (أي الصورة أعلاه) ، والتشغيل التلقائي ، وصورة الصفحة السابقة ، وصورة الصفحة التالية.
يظهر تأثير مثل هذا الألبوم. بالطبع ، يمكنك استخدام الماوس للتمرير اليسرى واليمين على هذه الصفحة. إذا كنت على جهاز محمول ، يمكنك أيضًا التمرير اليسار واليمين على إصبعك.
يحتوي هذا البرنامج المساعد على العديد من الخصائص:
ALMERUSERZOOM: يتيح للمستخدمين النقر نقرًا مزدوجًا لعرض الصور عن طريق التكبير/التحرك. القيمة الافتراضية = صواب
AutostartSlideshow: عندما يتم تنشيط Photoswipe ، سيتم تشغيل عرض الشرائح تلقائيًا. القيمة الافتراضية = خطأ
ALTROTATIONONUSERZOOM: يسمح فقط بدعم من iOS - للمستخدمين بتدوير الصور مع الإيماءات في وضع التكبير/المقلاة. الافتراضي = خطأ
backbuttonhideenabled: اضغط على مفتاح العودة لإخفاء شرائح الألبوم. يستخدم بشكل أساسي Android و BlackBerry. يدعم BB6 و Android V2.1 و IOS 4 والإصدارات الأحدث. القيمة الافتراضية = صواب
CaptionAndToolbarautoHirdelay: وقت التأخير يخفي تلقائيًا بواسطة شريط العنوان وشريط الأدوات. القيمة الافتراضية هي = 5000 (MS). إذا تم ضبطه على 0 ، فلن يتم إخفاءه تلقائيًا (انقر/انقر للتبديل مرئيًا ومخفيًا)
CaptionAndToolBarflipposition: تبديل الموضع بين شريط العنوان وشريط الأدوات (Let Caption يتم عرضه في الأسفل ويتم عرض شريط الأدوات في الأعلى). القيمة الافتراضية = خطأ
CaptionAndToolbarhide: إخفاء شريط العنوان وشريط الأدوات. القيمة الافتراضية = خطأ
CaptionAndToolBaropacity: شفافية شريط العنوان وشريط الأدوات (0-1). القيمة الافتراضية = 0.8
CaptionAndToolBarShowEmptyCaptions: يعرض شريط العنوان حتى إذا كان عنوان الصورة الحالية فارغًا. القيمة الافتراضية = صواب
cachemode: وضع ذاكرة التخزين المؤقت ، code.photoswipe.cache.mode.normal (الافتراضي ، عادي) أو code.photoswipe.cache.gode.aggression (جذري ، نشط). يقرر كيف يدير Photoswipe ذاكرة التخزين المؤقت لذاكرة التخزين المؤقت للصور.
سيقوم الوضع العدواني بتعيين نوع الصور غير "الحالية ، السابقة ، التالية" الفارغة. سيكون مفيدًا لفيضان الذاكرة في متصفحات iOS الأقدم. في معظم الحالات ، يكون الوضع العادي على ما يرام.
DoubleTapspeed: الحد الأقصى للفاصل الزمني للنقر المزدوج. القيمة الافتراضية = 300 (MS)
DoubleTapzoomlevel: عندما ينقر المستخدم المزدوج ، فإن التعديل هو مستوى "التكبير-في التكبير" الافتراضي. القيمة الافتراضية = 2.5
EnupplyRag: يسمح بسحب الصورة السابقة/التالية إلى الواجهة الحالية. القيمة الافتراضية = صواب
EnableKeyboard: السماح لعمليات لوحة المفاتيح (تبديل السهم الأيسر واليسرى ، خروج ESC ، أدخل التشغيل التلقائي ، شريط عرض الفضاء/شريط العنوان المخفي/الخروج). الافتراضي = صحيح
EnableMouseWheel: يسمح تشغيل عجلة الماوس. الافتراضي = صحيح
fadeinspeed: السرعة (المدة) لعنصر التأثير ، ميلي ثانية. الافتراضي = 250
Fadeoutspeed: السرعة (المدة) لعنصر التأثير ، ميلي ثانية. الافتراضي = 250
ImagesCaleMethod: طريقة تحجيم الصور (الوضع). القيم الاختيارية: "Fit" ، "FitNouscale" و "Zoom". يضمن وضع "الملاءمة" أن تتكيف الصورة على الشاشة. "FitNouscale" يشبه "FIT" ولكنه لا يوسع الصورة. ستقوم "Zoom" بفحص الصورة بالكامل ، ولكن من الممكن أن يكون تحجيم الصورة متناسبًا بنفس القدر. الافتراضي = "FIT"
InvertMousewheel: عكس عجلة الماوس. بشكل افتراضي ، سوف ينتقل التمرير لأسفل الماوس إلى الصورة التالية وحتى الصورة السابقة. الافتراضي = خطأ
jQueryMobile: يشير إلى ما إذا كانت Photoswipe مدمجة في مشروع JQuery Mobile. افتراضيًا ، سيحاول PhotoSwipe العمل من أجلك
JQueryMobileDialoghash: علامة تجزئة JQuery Mobile المستخدمة في صفحات النافذة وحوار. القيمة الافتراضية = "& ui-state = مربع الحوار"
حلقة: ما إذا كان الألبوم حلقات تلقائيًا. الافتراضي = صحيح
الهامش: الفاصل الزمني بين صورتين ، الوحدة هي بكسل. الافتراضي = 20
Maxuserzoom: أقصى تكبير. الافتراضي = 5.0 (سيتم تجاهله إلى 0)
Minuserzoom: أصغر مضاعف تخفيض الصورة. الافتراضي = 0.5 (سيتم تجاهله إلى 0)
Mousewheelspeed: الحساسية استجابة لعجلة الماوس. الافتراضي = 500 (MS)
NextPreviousSlidesPeed: كم عدد المللي ثانية التي سيتم تأخيرها بعد النقر فوق الأزرار السابقة والجنبية. الافتراضي = 0 (التبديل الآن)
PreventHide: يمنع المستخدم من إغلاق الصور الضوئية. كما سيتم إخفاء زر "إغلاق" على شريط الأدوات. استخدمه على الصفحة الحصرية (المثال هو أمثلة/08- مود. الافتراضي = خطأ
ممنوع المعرضين: يمنع وضع التشغيل التلقائي. كما سوف يخفي زر التشغيل في شريط الأدوات. الافتراضي = خطأ
SlideShowDelay: كم من الوقت يستغرق تشغيل الصورة التالية في وضع التشغيل التلقائي؟ الافتراضي = 3000 (MS)
SlidesPeed: الوقت الذي تنزلق فيه الصورة في العرض. الافتراضي = 250 (MS)
swipethreshold: كم عدد البكسلات المستخدمة لنقل إصبع لإحداث حدث إيماءة. الافتراضي = 50
swipetimethreshold: يحدد الحد الأقصى لعدد ميلي ثانية لإثارة لفتة التمرير. إذا كانت بطيئة للغاية ، فلن تؤدي إلى الشريحة ، وسوف تسحب موضع الصورة الحالية فقط. الافتراضي = 250
SlidetimingFunction: تخفيف الوظيفة عند الانزلاق. الافتراضي = "Ease-Out"
Zindex: قيمة Zindex الأولية. الافتراضي = 1000
enableuiWebViewRepositionTimeout: تحقق مما إذا كان اتجاه الجهاز قد تغير. الافتراضي = خطأ
UiWebViewResetPositionDelay: الوقت للتحقق مما إذا كان اتجاه الجهاز يتغير بانتظام هو 500 (MS)
PreventDefaultTouchEvents: يحجب أحداث اللمس الافتراضية ، مثل تمرير الصفحة. الافتراضي = صحيح
الهدف: يجب أن يكون عنصر DOM قانوني (مثل DIV). الافتراضي هو نافذة (صفحة كاملة). إذا كان DOM منخفض المستوى ، فسيتم عرضه في DOM وقد لا يكون ملء الشاشة.
إذا لم تكن بحاجة إلى عرض الصفحة الأولى وعرض الصفحة الثانية مباشرة ، فيمكنك تعيينها على هذا النحو:
$ (document) .Ready (function () {// إعداد photoswipe ، الإعداد "PreventHide: true" var thumbels = code.photoswipe ('a' ، '#gallery' ، {preventHide: true}) ؛ code.photoswipe.current.show (0) ؛}) ؛بالطبع ، يحتوي هذا البرنامج المساعد على العديد من وظائف الاستماع الأخرى:
document.addeventListener ('domcontentloaded' ، function () {// onbeforeshow call هذه الطريقة قبل عرض المعرض. code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onshow ، وظيفة (e) {console.log ("onbeforeshow") ؛}) ؛ console.log ("onshow") ؛}) ؛ code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onhide ، function (e) {console.log ('onhide') ؛}) ؛ console.log ('Onshownext') ؛}) ؛ code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.ondisplayImage ، وظيفة (e) {console.log ('ondisplayimage') ؛}) ؛ code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onresetposition ، وظيفة (e) {console.log ('onresetposition') ؛}). slideshowcode.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstart ، وظيفة (e) {console.log ('onslideshowstart') ؛}) ؛ code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstop ، function (e) {console.log ('onslideshowstop') ؛}) ؛ code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforecaptionandtoolbarshow ، وظيفة (e) {console.log ('onbeforecaptionandtoolbarshow') ؛}) ؛ code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforecaptionandtoolbarhide ، وظيفة (e) {console.log ('onbeforeCaptonandToolbarhide') ؛}) ؛ عادةً ما يؤدي Onbeecaptionandtoolbarhide إلى تشغيل code.photoswipe.current.addeventender (}) ؛نظرًا لأن طريقة استدعاء واجهة API غير موجودة في موقع Photowipe الرسمي ، والمستوى الحالي من JS ليس جيدًا جدًا ، فإن بعض واجهات API الخاصة بها غير مفهومة جيدًا. ومع ذلك ، عندما راجعت مثاله ، وجدت أن المتغير غالبًا ما يظهر ، code.photoswipe أو code.photoswipe.current. تم إجراؤهم في وحدة التحكم. عندما أدخلت code.photoswipe ، ظهر المحتوى التالي:
على الرغم من أنه لا يمكنك فهم ما هو عليه تمامًا ، يمكنك أن ترى أن العنصر الحالي مدرج. ثم أدخل code.photoswipe.current في وحدة التحكم للحصول على المحتوى التالي:
يمكنك العثور على مزيد من المعلومات هنا ، على سبيل المثال: يشير CurrentIndex إلى أن الصورة الحالية مفهرسة في القائمة ، والاتصال كله هو code.photoswipe.current.currentIndex يمثل الموضع المفهرس للصورة الحالية. هذه المعلومات مهمة جدا بالنسبة لي. يمكننا عرض معلومات مختلفة على صفحات مختلفة من خلال هذه المعلومات.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.