Mobile Picture Preview Photoswipe、PC Picture Previewをサポートし、主にAndroidおよびiOSのモバイル画像プレビューに使用されます。
リソースパッケージ：Photoswipe-3.0.5
Photoswipeの公式Webサイトには1.0.11パッケージのダウンロードがありますが、1.0.11バージョンには欠陥があります。一部のAndroid携帯電話では、1回スライドすると2枚の写真がジャンプします。
（通常の状況では、一度スライドして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 =" utf-8 "" "" "utf-8" " src = "jquery.transit.js"> </script> <script> <text/javascript "charset =" utf-8 "src =" jquery.transit.js "> </script>" text/javascript "charset =" utf-8 "src =" hammer.js "> </javascript =" ""> </jvascript = " charset = "utf-8" src = "jquery.hammer.js"> </scrip>
いくつかのHTML画像の形式は次のとおりです。
<ul id = "gallery"> <li> <a href = "images/full/001.jpg"> <img src = "images/thumb/001.jpg"/> </a> </li> <li> <li> <a href = "images/thumb/004.jpg"> <img src = "images/sumb/004.jpg"/> </a> </li> <li> <a href = "amemase/004.jpg"> <img src = "画像/サム/サム/サム/サム/ href = "images/full/005.jpg"> <img src = "image/thumb/005.jpg"/> </a> </li> <li> <a href = "images/full/006.jpg"> <img src = "images/thumb/006.jpg"/> </a> href = "images/full/008.jpg"/> </a> </li> <li> <a href = "images/thumb/008.jpg"/> </a> </li> <li> <a href = "images/full/009.jpg"> <img src = "Images/Thumm/009.jpg"/</ < href = "images/full/010.jpg"> <img src = "image/thumb/010.jpg"/> </a> </li> <li> <a href = "images/full/011.jpg"/> </a> </li> <li> <a href = href = "Images/thumb/012.jpg"/> </a> </li> <li> <a href = "images/full/012.jpg"/> </a> </li> <li> <a href = "images/full/013.jpg"> <img src = "Images/Thumb/013.jpg"/</ < href = "images/full/014.jpg"> <img src = "/sumb/014.jpg"/> </a> </li> <li> <a href = "images/full/015.jpg"/> </a> </li> <li> <a href = "/full/016.jpg"/</ 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 = "/thumb/017.jpg"/> </ <li> <a href = "images/full/018.jpg"> <img src = "images/thumb/018.jpg"/> </a> </li> </ul>
JSパーツは、デモに記載されているようにこのプラグインを呼び出します
（function（window、photoswipe）{document.addeventlistener（ 'domcontentloaded'、function（）{var options = {}、instance = photoswipe.attach（window.document.queryselectorall（ '＃gallery a'）、options）;}、false）;}（window.code.photoswipe）;$（ "＃gallery a"）。photoswipe（）を使用することもできます。
HTMLパーツに特別な形式が必要な場合は、次の方法で呼び出すことができます。
1。グローバル変数を宣言：var photoswipe_instance = 0;
2。プレビューを入力する必要がある要素の場合、コンテンツは次のとおりです。
arr_images.push（{url：xxx}）; var photoswipe = window.code.photoswipe; var instance = photoswipe.attach（arr_images、 ''、photoswipe_instance）; photoswipe_instance ++; instance.show（show_current）; 3. Photoswipe.cache.cacheclassで初期化：function（image、options）{var i、j、cacheimage、image、src、caption、metadata; this.settings = options; this.images = []; for（i = 0、j = images.length; i <j; i ++）{image = image [i]; // src = this.settings.getimagesource（image）; //オリジナルコード - 変更src = image.url; //新しいコード - 変更caption = this.settings.getimagecaption（image）; metadata = this.settings.getimagemetadata（画像）; this.images.push（new Photoswipe.image.imageClass（Image、SRC、Caption、Metadata））; }}、さらに、プラグインに問題があり、次の変更を行う必要がありました。
photoswipe.documentoverlay.documentoverlayclassを見つける（もともとここでは、バックグラウンドフローティング層の位置と高さに問題がありました）
リセットポジション：function（）{var width、height、top; if（this.settings.target === window）{width = util.dom.windowwidth（）; // height = util.dom.bodyouterheight（） * 2; //これはPhotoswipeによって追加された追加の高さをカバーします// new Code-Change Place // top =（this.settings.jquerymobile）？ util.dom.windowscrolltop（） + 'px'： '0px'; //古いコード - 変更はtop = util.dom.windowscrolltop（） + 'px'; //新しいコード - （height <1）{height = this.this.initialbodyheight; } if（util.dom.windowheight（）> height）{height = util.dom.windowheight（）; }} else {width = util.dom.width（this.settings.target）; height = util.dom.height（this.settings.target）; top = '0px'; } util.dom.setStyle（this.el、{width：width、height：height、top：top}）; }、上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。