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