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
github
https://github.com/codecomputerlove/photoswipe
オンラインデモ
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
互換性の機能
Photoswipeは、多数のモバイルデバイスとすべての一般的なJavaScriptクラスライブラリ/開発フレームワークと互換性があります。 JQUERYベースのバージョン、JQueryフリーバージョン、JQueryモバイル互換バージョンの両方があります。もちろん、すべてがすべてソースコードサンプルパッケージにあります。
使い方
Photoswipeは、Webサイトに簡単に統合できる独立した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>
コードを呼び出します
/* jQueryのReady関数に似たDomContentLoadedイベントリスニングを追加します。
デフォルトの方法Examples/01-Default.html
サムネイルモードがない場合は、.examples/09-exclusive-mode-no-thumbnails.htmlを確認してください。
*/
// Photoswipe.Attachメソッドは3つのパラメーター（HTML要素コレクション、オプションの構成情報、および複数のインスタンスの場合のオプションの文字列タイプIDを受信します）
document.addeventlistener（ 'domcontentloaded'、function（）{
// Photoswipeを設定して、IDをギャラリーとしてコンテナの下のすべての<a>タグにバインドします。クリックしてアクティブになります
//ここのオブジェクトはPhotoswipeインスタンスであり、show（0）、hide（）などの対応する方法を使用できます。
var myphotoswipe = code.photoswipe.attach（window.document.queryselectorall（ '＃gallery a'）、{enablemousewheel：false、enablekeyboard：false}）;
}、 間違い）;
jqueryを使用する場合、コールコードは次のとおりです。
// jQueryバージョン、対応するJSファイルもJSファイルで変更する必要があります
//例については、Examples/02-jquery.htmlを参照してください
$（document）.ready（function（）{
//ここのオブジェクトはPhotoswipeインスタンスであり、show（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：ユーザーがダブルクリックして写真を表示してズームイン/移動します。デフォルト値= true
2.AutostArtSlideshow：Photoswipeがアクティブ化されると、スライドショーが自動的に再生されます。デフォルト値= false
3.AllowrotationNuserzoom：iOSのみをサポートする - ユーザーはズーム/PANモードのジェスチャーで画像を回転させることができます。デフォルト値= false
4.BackButtonHideEnabled：戻りキーを押して、アルバムスライドを非表示にします。主にAndroidとBlackBerryが使用しています。 BB6、Android V2.1、iOS 4、および新しいバージョンをサポートしています。デフォルト値= true
5.CaptionAndToolbarauto -HidedeLay：タイトルバーとツールバーによって自動的に隠された遅延時間。デフォルト値は= 5000（MS）です。 0に設定すると、自動的に非表示になりません（タップ/クリックして表示されて非表示になりました）
6.CAPTIONANDTOOLBARFLIPPSOSITION：タイトルバーとツールバーを切り替えます（下部にキャプションを表示し、ツールバーが上部に表示されます）。デフォルト値= false
7.CaptionAndToolbarhide：タイトルバーとツールバーを非表示にします。デフォルト値= false
8.CaptionAndToolbaropacity：タイトルバーとツールバーの透明性（0-1）。デフォルト値= 0.8
9.CAPTIONANDTOOLBARSHOWEMPTIONS：現在の画像のタイトルが空であっても、タイトルバーが表示されます。デフォルト値= true
10.CacheMode：Cache Mode、code.photoswipe.cache.mode.normal（デフォルト、通常）またはcode.photoswipe.cache.mode.aggressive（Radical、Active）。 Photoswipeが画像キャッシュキャッシュを管理する方法を決定します。
11.アグレッシブモードは、空の非「現在、前、次の」画像のタイプを積極的に設定します。古いiOSブラウザのメモリオーバーフローに役立ちます。ほとんどの場合、通常のモードは問題ありません。
12.DoubleTapsPeed：ダブルクリックするための最大間隔。デフォルト値= 300（MS）
13.Doubletapzoomlevel：ユーザーがダブルクリックすると、倍率倍数がデフォルトの「ズームイン」レベルです。デフォルト値= 2.5
14.ENABLEDRAG：前/次の画像を現在のインターフェイスにドラッグすることができます。デフォルト値= true
15.EnableKeyBoard：キーボード操作を許可します（左および右矢印の切り替え、ESC出口、自動再生の入力、スペースバーディスプレイ/非表示のタイトルバー/出口）。デフォルト= true
16.enablemousewheel：マウスホイールの動作を許可します。デフォルト= true
17.Fadeinspeed：効果要素の速度（持続時間）、ミリ秒。デフォルト= 250
18.FadeOutSpeed：フェード効果要素の速度（持続時間）、ミリ秒。デフォルト= 250
19.ImagesCaleMethod：画像スケーリング方法（モード）。オプションの値：「フィット」、「FitNouscale」、「ズーム」。モード「フィット」により、画像が画面に適応することが保証されます。 「FitNouscale」は「Fit」に似ていますが、画像を拡大しません。 「ズーム」は画像を完全にスクリーニングしますが、画像スケーリングが等しく比例しない可能性があります。 default = "fit"
20.InvertMouseWheel：マウスホイールを反転します。デフォルトでは、マウスをスクロールすると、次の写真に切り替えて、前の写真に切り替えます。デフォルト= false
21.JqueryMobile：PhotoswipeがJQuery Mobile Projectに統合されているかどうかを示します。デフォルトでは、Photoswipeはあなたのためにこれを試してみます
22.jqueryMobiledialoghash：ウィンドウとダイアログページで使用されるjqueryモバイルのハッシュタグ。デフォルト値= "＆ui-state =ダイアログ"
23.Loop：アルバムが自動的にループするかどうか。デフォルト= true
24.Margin：2つの写真間の間隔、ユニットはピクセルです。デフォルト= 20
25.Maxuserzoom：最大倍率。デフォルト= 5.0（0に設定されます）
26.Minuserzoom：画像の最小の削減倍。デフォルト= 0.5（0に設定されます）
27.MouseWheelspeed：マウスホイールに応答した感度。デフォルト= 500（MS）
28.NextPreviousSlidesSpeed：前のボタンと次のボタンがクリックされると、何ミリ秒が遅れますか。デフォルト= 0（今すぐ切り替えます）
29.Preventhide：ユーザーがPhotoswipeを閉じることを防ぎます。また、ツールバーの「クローズ」クローズボタンを非表示にします。排他的なページで使用します（例は、ソースコードの例/08-Excclusive-Mode.htmlです）。デフォルト= false
30.PreventsLideshow：自動再生モードをブロックします。また、ツールバーの再生ボタンを非表示にします。デフォルト= false
31.Slideshowdelay：自動プレイモードで次の写真を再生するのにどれくらい時間がかかりますか？デフォルト= 3000（MS）
32.SlidesSpeed：画像がビューにスライドする時間。デフォルト= 250（MS）
33.スイープレスホールド：スワイプジェスチャーイベントをトリガーするために、指がスライドするピクセルの数。デフォルト= 50
34.swipetimethershold：スワイプジェスチャーをトリガーするために、ミリ秒の最大数を定義します。遅すぎると、スライドがトリガーされず、現在の写真の位置のみをドラッグします。デフォルト= 250
35.SlidetimingFunction：スライド時に機能を緩和します。 default = "ease-out"
36.Zindex：初期Zindex値。デフォルト= 1000
37.ENABLEUWEBVIEWREPOSITIONTIMEOUT：デバイスの方向が変更されたかどうかを確認します。デフォルト= false
38.uiwebviewresetpositiondelay：デバイスの方向が定期的に500（ms）であるかどうかを確認する時間
39.PreventDefaultTouchevents：ページスクロールなど、デフォルトのタッチイベントをブロックします。デフォルト= true
40.target：法的DOM要素（divなど）でなければなりません。デフォルトはウィンドウ（フルページ）です。低レベルのDOMの場合、DOMに表示され、フルスクリーンではない場合があります。
カスタム関数
gettoolbar：function（）{ /*html文字列をツールバーに表示して表示します。デフォルトでは、Galleryは<a>タグを使用して<img>サムネイルをラップし、<a>タグのhref属性が完全な画像のURLであると想定しています。現時点では、この方法を使用して、対応する要素の画像のパスを返すことができます。それはあらゆる種類のものです。たとえば、rel属性か何か。 jqueryを持つ方が簡単です。 */ return el.getattribute（ 'rel'）; }、getImageCaption：function（el）{ /** getimagesourceメソッドのように、このメソッドは画像のタイトルを返します。デフォルトでは、ギャラリーは画像のALT属性を探します。 * /}、getImageMetadata：function（el）{ / ** ondisplayimageを聞くと、この関数を通じて追加のメタ情報を取得できます。およびuse */ return in ondisplayimage {longdescription：el.getattribute（el、 'long-description'）}}}Android電話の場合、ワンクリックにより、レイヤーをクリックする問題が閉じられます。下のレイヤーはクリックイベントを引き起こします。私たちの解決策は次のとおりです。
//トリガーAndroid電話の複数のレベルでクリックします。タイマーを使用してvar event_timeout = 500; //複数のイベントトリガーを防止します関数preventmulticlick（）{if（multiclickprevent）{return false; } multiclickprevent = true; window.settimeout（function（）{multiclickprevent = false;}、event_timeout）; trueを返します。 }; //ブラウザvar useragent = navigator.useragentに適応します。 var viryios = useragent.match（/iPad | iPhone | iPod/i）; var likeandroid = useragent.match（/android/i）; var SpecialClick = "Click"; if（likeios）{specialclick = "touchstart click"; } else if（likeandroid）{SpecialClick = "TouchStart Click"; } /example $（ "。t_right"） // example $（ "body"）。live（specialclick、function（）{if（preventmulticlick（））{//他の操作を実行}}）;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。