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