Photoswipe.js公式Webサイト：http：//photoswipe.com/、Photoswipeファイルと関連例をこのWebサイトからダウンロードできます。
このコンポーネントは、主に写真やアルバムを表示するために使用され、非常に実用的です。
1.このコンポーネントを使用するには、2つのJSファイルが必要です
1 <script type = "text/javascript" src = "simple-heritance.min.js">
2 <スクリプトタイプ= "text/javascript" src = "code-photoswipe-1.0.11.min.js"> <！ - 現在の最新バージョンは1.0.11->である必要があります
2。その後、ページ構造は次のようになります
<div id = "gallery"> <div> <div> <a href = "images/full/01.jpg"> <img src = "image/thumb/01.jpg"/> </a> </div> <div> <div> <a href = "Images/full/04.jpg"> <img src = "images/full/04.jpg"> <img src = "images/full/04.jpg"> <img src = "images/thumb/04.jpg"/> </a> src = "images/thumb/05.jpg"/> </a> </div> <div> <a href = "images/full/06.jpg"> <img src = "images/thumb/06.jpg"/> </a> </div> </div> </div>
実際、ページ構造に加えて、このHTMLコードで本当に役立つのはID = "Gallery"と<a href = "イメージパス"> </a>です（後で説明されます）。他のクラスは、元のページ構造を美化するのにのみ役割を果たします（つまり、実際に効果が必要なページとは異なります。つまり、上記のページ構造に従って入力する必要があり、必要なページ効果はプラグインJS自体によって完了し、エフェクトレイアウトを書く必要はありません）。
ページにはJSとページの両方の構造が必要であり、以下はプラグインを使用するためです。
3.プラグインを宣言するために2つの方法を使用できます
1.デフォルトのブラウザでaddeventListener（）を追加して行われます。
document.addeventlistener（ "domcontentloaded"、function（）{code.photoswipe（ 'a'、 '＃gallery'）; }、false）を指しています。2。jQueryの使用方法：
$（document）.ready（function（）{$（ "＃gallery a"）。photoswipe（）;}）;4。この設定では、あなたのページはおそらくこのようなものになるでしょう。
最初のページの効果：
画像をクリックした後、ページの形式は次のようになります（このページは実際に私が本当に欲しいページです）：
ページの上の<img />のAltのコンテンツをはっきりと見ることができます。下の4つのボタンがあり、ページを閉じて元の外観（上の写真）、自動再生、前のページの写真、次のページの写真に戻ります。
そのようなアルバムの効果が現れます。もちろん、マウスを使用して、このページで左右をスワイプできます。ハンドヘルドデバイスを使用している場合は、指で左右にスワイプすることもできます。
このプラグインには多くのプロパティがあります。
Allowuserzoom：ユーザーがダブルクリックして、ズームイン/移動して写真を表示できます。デフォルト値= true
AutoStartSlideshow：Photoswipeがアクティブ化されると、スライドショーが自動的に再生されます。デフォルト値= false
AlowRotationNuserzoom：iOSのみがサポートされているため、ユーザーはズーム/PANモードのジェスチャーで画像を回転できます。デフォルト= false
BackButtonHideEnabled：戻りキーを押して、アルバムスライドを非表示にします。主にAndroidとBlackBerryが使用しています。 BB6、Android V2.1、iOS 4、および新しいバージョンをサポートしています。デフォルト値= true
CaptionAndToolbarauto -HidedeLay：タイトルバーとツールバーによって自動的に隠された遅延時間。デフォルト値は= 5000（MS）です。 0に設定すると、自動的に非表示になりません（タップ/クリックして表示されて非表示になりました）
CaptionAndToolbarFlippsosition：タイトルバーとツールバーの間のトグル位置（下部にキャプションが表示され、ツールバーが上部に表示されます）。デフォルト値= false
CaptionAndToolbarhide：タイトルバーとツールバーを非表示にします。デフォルト値= false
CaptionAndToolbaropacity：タイトルバーとツールバーの透明性（0-1）。デフォルト値= 0.8
CaptionAndToolbarShowEmptions：現在の画像のタイトルが空であっても、タイトルバーを表示します。デフォルト値= true
CACHEMODE：Cache Mode、code.photoswipe.cache.mode.normal（default、ermorm）またはcode.photoswipe.cache.mode.aggressive（Radical、Active）。 Photoswipeが画像キャッシュキャッシュを管理する方法を決定します。
アグレッシブモードは、空の非「現在、前、次の」画像のタイプを積極的に設定します。古いiOSブラウザのメモリオーバーフローに役立ちます。ほとんどの場合、通常のモードは問題ありません。
DoubleTapsPeed：ダブルクリックの最大間隔。デフォルト値= 300（MS）
DoubleTapzoomlevel：ユーザーがダブルクリックすると、倍率倍数がデフォルトの「ズームイン」レベルです。デフォルト値= 2.5
EnabledRag：前/次の画像を現在のインターフェイスにドラッグすることができます。デフォルト値= true
EnableKeyBoard：キーボード操作を許可します（左矢印と左矢印の切り替え、ESC出口、自動再生、スペースバーディスプレイ/非表示のタイトルバー/出口）。デフォルト= true
EnableMouseWheel：マウスホイールの動作を許可します。デフォルト= true
Fadeinspeed：効果要素の速度（持続時間）、ミリ秒。デフォルト= 250
FadeOutSpeed：効果要素の速度（持続時間）、ミリ秒。デフォルト= 250
ImagesCaleMethod：画像スケーリング方法（モード）。オプションの値：「フィット」、「FitNouscale」、「ズーム」。モード「フィット」により、画像が画面に適応することが保証されます。 「FitNouscale」は「Fit」に似ていますが、画像を拡大しません。 「ズーム」は画像を完全にスクリーニングしますが、画像スケーリングが等しく比例しない可能性があります。 default = "fit"
InvertMouseWheel：マウスホイールを反転します。デフォルトでは、マウスをスクロールすると、次の写真に切り替えて、前の写真に切り替えます。デフォルト= false
jQueryMobile：PhotoswipeがJQuery Mobile Projectに統合されているかどうかを示します。デフォルトでは、Photoswipeはあなたのためにこれを試してみます
jQueryMobiledialoghash：ウィンドウとダイアログページに使用されるjQueryモバイルのハッシュタグ。デフォルト値= "＆ui-state =ダイアログ"
ループ：アルバムが自動的にループするかどうか。デフォルト= true
マージン：2つの写真間の間隔、ユニットはピクセルです。デフォルト= 20
Maxuserzoom：最大倍率。デフォルト= 5.0（0に設定されます）
Minuserzoom：画像の最小の削減倍。デフォルト= 0.5（0に設定されます）
MouseWheelspeed：マウスホイールに応答した感度。デフォルト= 500（MS）
Next -PreviousSlidesSpeed：前のボタンと次のボタンをクリックした後、何ミリ秒が遅れますか。デフォルト= 0（今すぐ切り替えます）
予防：ユーザーがPhotoswipeを閉じることを防ぎます。また、ツールバーの「クローズ」クローズボタンを非表示にします。排他的なページで使用します（例は、ソースコードの例/08-Excclusive-Mode.htmlです）。デフォルト= false
PreventsLideshow：自動再生モードをブロックします。また、ツールバーの再生ボタンを非表示にします。デフォルト= false
Slideshowdelay：自動プレイモードで次の写真を再生するのにどれくらい時間がかかりますか？デフォルト= 3000（MS）
スライドスピード：画像がビューにスライドする時間。デフォルト= 250（MS）
SwipethReshold：スワイプジェスチャーイベントをトリガーするために指をスライドさせるために使用されるピクセルの数。デフォルト= 50
swipetimethershold：スワイプジェスチャーをトリガーするために、ミリ秒の最大数を定義します。遅すぎると、スライドがトリガーされず、現在の写真の位置のみをドラッグします。デフォルト= 250
SlidetimingFunction：スライド時の機能を緩和します。 default = "ease-out"
Zindex：最初のZindex値。デフォルト= 1000
EnableUWeBViewRepositionTimeOut：デバイスの方向が変更されたかどうかを確認します。デフォルト= false
uiwebviewresetpositiondelay：デバイスの方向が定期的に変化するかどうかを確認する時間は500（ms）
PreventDefaultTouchevents：ページスクロールなどのデフォルトのタッチイベントをブロックします。デフォルト= true
ターゲット：法的DOM要素（divなど）でなければなりません。デフォルトはウィンドウ（フルページ）です。低レベルのDOMの場合、DOMに表示され、フルスクリーンではない場合があります。
最初のページを表示して2番目のページを直接表示する必要がない場合は、次のように設定できます。
$（document）.ready（function（）{// Photoswipeの設定、「Presphide：true "var thumbels = code.photoswipe（ 'a'、 '#gallery'、{presphide：true}）; code.photoswipe.current.show（0）;}）;もちろん、このプラグインには他にも多くのリスニング機能があります。
document.addeventlistener（ 'domcontentloaded'、function（）{// onbeforeshowギャラリーが表示される前にこのメソッドを呼び出す。code.photoswipe.addeventlistener（code.photoswipe.eventtypes.onbeforeshow、function（e）; code.photoswipe.current.addeventlistener（code.photoswipe.eventtypes.onshow、function（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、function {console.log（ 'ondisplayimage'）;}）; code.photoswipe.current.addeventlistener（code.photoswipe.eventtypes、function（e）{console.log（ 'onresetposition'）;}）ギャラリーは、SlideShowCode.photoswipe.current.addeventlistener（code.photoswipe.eventtypes.onslideshowstartを開始しましたcode.photoswipe.current.addeventlistener（code.photoswipe.eventtypes.onslideshowstop、function {console.log（ 'onslideshowstop'）;}）; code.photoswipe.current.addeventlistener（code.photoswipe.eventtypes.onbeforecaptionandtoolbarshow、function（e）{console.log（ 'onbeforecaptionandtoolbarshow'）;}）; code.photoswipe.current.addeventlistener（code.photoswipe.eventtypes.onbeforecaptionandtoolbarhide、function（e）{console.log（ 'onbeforecaptionandtoolbarhide'）;}）;または、通常、oneborecaptionandtoolbarhideは通常、beforecaptionandtoolbarhideまたはbeforecaptionandtoolbarhideメソッドをトリガーします。 }、間違い）;APIインターフェイスの呼び出し方法はPhotoswipe公式Webサイトにはないため、JSの現在のレベルはあまり良くないため、APIインターフェイスの一部は基本的によく理解されていません。ただし、その例を確認すると、変数がcode.photoswipeまたはcode.photoswipe.currentに頻繁に表示されることがよくありました。それらはすべてコンソールで行われました。 code.photoswipeを入力したとき、次のコンテンツが表示されました。
それが何であるかを完全に理解することはできませんが、現在の要素が含まれていることがわかります。次に、コンソールにcode.photoswipe.currentを入力して、次のコンテンツを取得します。
詳細については、例：CurrentIndexは、現在の画像がリストにインデックスが付けられていることを示し、接続全体がcode.photoswipe.current.currentindexは現在の画像のインデックス付き位置を表します。この情報は私にとって非常に重要です。この情報を通じて、さまざまなページにさまざまなページ情報を表示できます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。