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をもっとサポートすることを願っています。