まず、いくつかのレンダリングを見てみましょう。
写真の1つをクリックして拡大します。これは、画像テキストの説明をサポートできます。
サポート共有機能：
ジェスチャーの拡大とズームアウトをサポートします
JSフレームワークを使用することはPhotoswipeです。
Photoswipeは、PCとモバイル端子と互換性のある画像拡大プラグインです。複数のバージョンを経験しており、常に更新されています。数え切れないほどの落とし穴があり、モバイル端子に大きな利点があります。
1。次のようなさまざまなスタイルを制御できます。
タイトル、共有、フルスクリーンボタン、クリックイベント、字幕を追加するかどうか、透明な背景など。
2. PCターミナルと互換性のあるモバイルタッチジェスチャーをサポートできます
すべての基本的なジェスチャーのサポート：次または前のジェスチャーをスライドさせ、ドラッグパン、ズーム、ズーム、または閉じる、クリックしてコントロールを切り替え、ダブルクリックしてズームインまたはズームします。
3。共有
デフォルトのUIには、リンクを共有するボタンがあります。デフォルトのリンクはFacebook、Twitter、Pinterestですが、APIを介して共有タイプを設定できます。
4。ユーザーインターフェイス
ユーザーインターフェイスは、コアスクリプトから完全に分離されています。インターフェイスは完全にカスタマイズできます。デフォルトのPhotoswipe UIは応答性が高く、デスクトップ、タブレット、モバイルデバイスで完全に使用できます。
5.さらに多くの機能があなたが発見するのを待っています。
公式ウェブサイト：http：//photoswipe.com/
Github：https：//github.com/dimsemenov/photoswipe
1.公式ウェブサイトでPhotoswipeをダウンロードして、ページに紹介します
<link rel = "styleSheet pretch" href = "css/photoswipe.css"> <link rel = "styleSheet frefetch" href = "css/default-skin/default-skin.css"> <script src = "js/photowipe.js"> </script src = "js/photowipe
2。次のコード構造をページに追加する必要があります（この構造はプラグイン画像を閲覧するために必要なコードです。著者はJSに統合されていないため、ユーザーは自分のWebページに手動で追加する必要があります）：
<！ - Photoswipeのルート要素。クラスPSWPが必要です。 - > <div tabindex = "-1" role = "ダイアログ" aria-hidden = "true"> <！ - Photoswipeの背景。アニメーション化不透明度はRGBA（）よりも高速であるため、別の要素です。 - > <div> </div> <！ - オーバーフローのスライドラッパー：隠し。 - > <div> <！ - スライドを保持するコンテナ。 Photoswipeは、メモリを保存するためにDOMに3つだけを保持します。これら3つのPSWP__ITEM要素を変更しないでください。データは後で追加されます。 - > <div> div> div> <div> </div> <div> </div> </div> <div> </div> </div> <！ - デフォルト（photoswipeui_default）インターフェイス。変更できます。 - > <div> <div> <！ - コントロールは自明です。注文を変更できます。 --> <div></div> <button></button> <button></button> <!-- element will get class pswp__preloader--active when preloader is running --> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> <div> <div></div> </div> </div> </div> <div> <div> </div> </div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> </div>
3.閲覧する必要がある写真にPhotoswipe構造コードを追加します。ここに注意を払うために必要なのはです
Data-PSWP-UIDは、各アルバムで一意でなければなりません。データサイズは、拡大すると画像の幅と高さです。指定された幅と高さが画像と一致しない場合、表示された画像は変形します。データサイズを削除する方法はありませんが、時間がある場合は、代替手段を見つけることができます。
<！ - データ-PSWP-UIDは、各アルバムで一意でなければなりません。データサイズは、ズームインしたときに画像の幅と高さを指定します - > <div data-pswp-uid = "1"> <figure> <a href = "img/m33333333.jpg" 670x712 "> <img src =" img/th1.jpg "> </a>
4. JSコードを追加します。このコードの著者は、Photoswipeフレームワークに統合されていません。彼は手動でそれをWebページに追加する必要があります。
<スクリプトタイプ= "text/javascript"> var initphotoswipefromdom = function（galleryselector）{// dom要素（URL、タイトル、サイズ...）//（ギャラライズセレクターの子供）var parseThumbnelelements = function（el）{var thumbelements = el.childnodes、unnodes、nu nunodes、l.thumbelements = el。サイズ、アイテム; for（var i = 0; i <numnodes; i ++）{figherel = thumbelements [i]; // <図>要素//要素ノードのみを含むif（figher.nodetype！== 1）{継続; } 25 linkel = figherel.children [0]; // <a>要素サイズ= linkel.getAttribute（ 'data-size'）。split（ 'x'）; //スライドオブジェクトアイテムを作成= {src：linkel.getAttribute（ 'href'）、w：parseint（size [0]、10）、h：parseint（size [1]、10）}; if（figher.children.length> 1）{// <figcaption> content item.title = fightel.children [1] .innerhtml; } if（linkel.children.length> 0）{// <img>サムネイルノード、サムネイルurl item.msrc = linkel.children [0] .getattribute（ 'src'）; } item.el = fighnel; // getthumbboundsfn items.push（item）のリンク要素を保存します。 } returnアイテム。 }; //最寄りの親ノードvar close = function coldest（el、fn）{return el &&（fn（el）？el：coldest（el.parentnode、fn））; }; //ユーザーがサムネイルをクリックすると、var onthumbnailsclick = function（e）{e = e ||をトリガーするとwindow.event; E.PreventDefault？ e.preventdefault（）：e.returnValue = false; var etarget = e.target || E.SRCELEMENT; //スライドのルート要素を見つけるvar clickedlistitem = coldest（etarget、function（el）{return（el.tagname && el.tagname.touppercase（）=== '図）;}）; if（！clickedListitem）{return; } //すべての子ノードをループすることによりクリックされたアイテムのインデックスを見つける// data-属性var clickedgallery = clickedListitem.parentnodes = clickedlistitem.parentnode.childnodes.childnodes、numchildnodes = numchildnodes.length、nodeindedex = index; for（var i = 0; i <numchildnodes; i ++）{if（childnodes [i] .nodetype！== 1）{continue; } if（childnodes [i] === clickedListitem）{index = nodeIndex;壊す; } nodeindex ++; } if（index> = 0）{// photoswipeを開く有効なインデックスがOpenPhotoswipe（index、clickedgallery）を見つけた場合; } falseを返します。 }; // url（＃＆pid = 1＆gid = 2）var photoswipeparsehash = function（）{var hash = window.location.hash.substring（1）、params = {}; if（hash.length <5）{return params; } var vars = hash.split（ '＆'）; for（var i = 0; i <vars.length; i ++）{if（！vars [i]）{継続; } var pair = vars [i] .split（ '='）; if（pair.length <2）{継続; } params [pair [0]] = pair [1]; } if（params.gid）{params.gid = parseint（params.gid、10）; } paramsを返します。 }; var openphotoswipe = function（index、galleryelement、disableAnimation、fromurl）{var pspelement = document.queryselectorall（ '。pswp'）[0]、ギャラリー、オプション、アイテム; items = parseThumbnailelements（GalleryElement）; // parameter options = {barssize：{top：100、bottom：100}、fullscreenel：false、//フルスクリーンボタンの共有バイトンがサポートされているかどうか：[{id： 'wechat'、label： 'share wechat'、url： '＃'}、{id： 'weibo'、 'sina weibo'、url Picture '、url：' {{raw_image_url}} '、download：true}]、// share button // define gallery index（for url）galleryelement.getattribute（' data-pswp-uid '）、gethumbboundsfn：index（index）{// items [index] .el.getElementsByTagname（ 'img'）[0]、// thumbnail pageyscroll = window.pageyoffset ||を見つけるdocument.documentlement.scrolltop、rect = thumbnail.getBoundingClientRect（）; return {x：rect.left、y：rect.top + pageyscroll、w：rect.width}; }}; // photoswipeはurlから開きます（fromurl）{if（options.gallerypids）{// real indexを解析するカスタムpidsが（var j = 0; j <items.length; j ++）{if（item [j] .pid == index）{options.index = j;壊す; }}} else {// urlインデックスでは、1つのoptions.index = parseint（index、10）-1から始まります。 }} else {options.index = parseint（index、10）; } // indexが見つかった場合はexit if（isnan（options.index））{return; } if（disableAnimation）{options.showanimationduration = 0; } // DataをPhotoswipeに渡してIt Gallery = new Photoswipe（PSWPELEMENT、PHOTOSWIPEUI_DEFAULT、アイテム、オプション）; Gallery.init（）; }; //すべてのギャラリー要素をループし、イベントvar galleryelements = document.queryselectorall（galleryselector）; for（var i = 0、l = galleryelements.length; i <l; i ++）{galleryelements [i] .setattribute（ 'data-pswp-uid'、i+1）; GalleryElements [i] .onclick = onthumbnailsclick; } //＃＆pid = 3＆gid = 1 var hashdata = photoswipeparsehash（）が含まれている場合、urlとオープンギャラリーを解析します。 if（hashdata.pid && hashdata.gid）{openphotoswipe（hashdata.pid、galleryelements [hashdata.gid -1]、true、true）; }}; //上記の機能を実行しますinitphotoswipefromdom（'。my-gallery '）; </script>この記事は「JavaScript Wechat Development Skillsの要約」にまとめられており、誰もが学習して読むことを歓迎します。
「WeChat Mini Program Development Tutorial」が皆の編集者によって慎重に編集されているWechat Miniプログラムに関するチュートリアルをお勧めします。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。