معاينة صورة الهاتف المحمول ، ملخص استخدام

معاينة الصور المحمولة Photoswipe ، ويدعم معاينة صور الكمبيوتر ، ويستخدم في الغالب لمعاينة صور الهاتف المحمول لنظام Android و iOS.

حزمة الموارد: Photoswipe-3.0.5

يوجد تنزيل حزمة 1.0.11 على موقع الويب الرسمي ل Photowipe ، لكن إصدار 1.0.11 يحتوي على عيوب. على بعض هواتف Android ، سيتم قفز صورتين عندما تنزلق مرة واحدة.

(في ظل الظروف العادية ، انزلق مرة واحدة وقفز 1 صورة)

طريقة الاستخدام المعتادة هي كما يلي:

قم بتحميل الملفات التالية في حزمة الموارد في علامة الرأس الخاصة بـ HTML:

 <script type = "text/javaScript" src = "klass.min.js"> </script> <script type = "text/javaScript" charset = "utf-8" src = "jquery-1.8.2.js" </script> <script type/"text/javascript" charset = "utf-8" src = "jquery.transit.js"> </script> <script type = "text/javaScript" charset = "utf-8" src = "jquery.transit.js"> </cript> <script type = "text/javaScript" charset = "utf-8" src = charset = "utf-8" src = "jquery.hammer.js"> </script>

شكل بعض صور HTML كما يلي:

 <ul id = "gallery"> <li> <a href = "images/full/001.jpg"> <img src = "images/thumb/001.jpg"/> </a> </li> <li> <a href = "images/full/002.jpg <li> <a href = "images/thumb/004.jpg"> <img src = "images/thumb/004.jpg"/> </a> </li> <li> <a href = "images/full/004. HREF = "Images/full/005.jpg"> <img src = "images/thumb/005.jpg"/> </a> </li> <li> <a href = "images/full/006.jpg"> <img src = "images/thumb/006.jpg"/> href = "الصور/full/008.jpg"/> </a> </li> <li> <a href = "الصور/الإبهام/008.jpg"/> </a> </li> <li> <li> <a href = "الصور/الكامل/009.jpg"> <img src = href = "Images/full/010.jpg"> <img src = "images/thumb/010.jpg"/> </a> </li> <li> <a href = "images/full/011.jpg"/> </a> </li> <li> href = "Images/Thumb/012.jpg"/> </a> </li> <li> <a href = "images/full/012.jpg"/> </a> </li> <li> <a href = "الصور/الكامل/013.jpg"> <img src = HREF = "Images/Full/014.jpg"> <img src = "Images/Thumb/014.jpg"/> </a> </li> <li> <a href = "images/full/015.jpg"/> </a> </li> <li> HREF = "Images/Full/016.jpg"/> </a> </li> <li> <a href = "Images/Thumb/016.jpg"/> </a> </li> <li> <a href = "images/full/017.jpg"> <img src = <li> <a href = "images/full/018.jpg"> <img src = "images/thumb/018.jpg"/> </a> </li> </ul>

يدعو جزء JS هذا البرنامج المساعد كما هو مذكور في العرض التوضيحي

 (وظيفة (نافذة ، Photoswipe) {document.addeventListener ('domcontentloaded' ، function () {var reports = {} ، مثيل = photoswipe.attach (window.document.queryselectorall ('#gallery a') ، reports) ؛} ، false) ؛

يمكنك أيضًا استخدام: $ ("#Gallery A"). Photoswipe () ؛

إذا احتاج جزء HTML إلى تنسيق خاص ، فيمكن استدعاؤه بالطرق التالية:

1. إعلان المتغيرات العالمية: var photoflipe_instance = 0 ؛

2. بالنسبة للعناصر التي تحتاج إلى إدخال المعاينة ، يكون المحتوى كما يلي:

 arr_images.push ({url: xxx}) ؛ var photoswipe = window.code.photoswipe ؛ var estary = photoswipe.attach (arr_images ، '' ، photogswipe_instance) ؛ photoswipe_instance ++ ؛ easty.show (show_current) ؛ 3. البحث عن تهيئة في photoswipe.cache.cacheclass: الدالة (الصور ، الخيارات) {var i ، j ، cacheimage ، Image ، SRC ، Caption ، Metadata ؛ this.settings = الخيارات ؛ this.images = [] ؛ لـ (i = 0 ، j = images.length ؛ i <j ؛ i ++) {image = images [i] ؛ // src = this.settings.getImagesource (image) ؛ // الكود الأصلي-أين التغيير src = image.url ؛ // new code-inhere the Change Caption = this.settings.getImageCaption (Image) ؛ metadata = this.settings.getImagemetadata (Image) ؛ this.mages.push (new Photoswipe.image.imageClass (Image ، SRC ، Caption ، Metadata)) ؛ }} ،

بالإضافة إلى ذلك ، كانت هناك مشكلة في المكون الإضافي وكان من الضروري إجراء التعديلات التالية:

البحث عن PhotoCwipe.documentoverlay.documentoverlayclass (كانت هناك في الأصل مشكلة في تحديد المواقع وارتفاع الطبقة العائمة الخلفية هنا)

 إعادة التعيين: function () {var width ، الارتفاع ، الأعلى ؛ if (this.settings.target === window) {width = util.dom.windowwidth () ؛ // الارتفاع = util.dom.bodyouterheight () * 2 ؛ // هذا يغطي ارتفاعًا إضافيًا يضاف إليه Photoswipe // Old Code-تغيير الارتفاع = util.dom.bodyouterheight () ؛ // رمز جديد-change place // top = (this.settings.jquerymobile)؟ util.dom.windowscrolltop () + 'px': '0px' ؛ // الكود القديم - حيث تكون التغييرات top = util.dom.windowscrolltop () + 'px' ؛ // رمز جديد - حيث تكون التغييرات إذا (الارتفاع <1) {height = this.initialbodyhight ؛ } if (util.dom.windowHeight ()> الارتفاع) {height = util.dom.windowHeight () ؛ }} آخر {width = util.dom.width (this.settings.target) ؛ الارتفاع = util.dom.hight (this.settings.target) ؛ أعلى = '0px' ؛ } util.dom.setStyle (this.el ، {العرض: العرض ، الارتفاع: الارتفاع ، الأعلى: TOP}) ؛ } ،

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.