そんな願いを完璧に応えてくれるライブラリが現れた...それが「PhotoSwipe」です。百聞は一見にしかず、まずはPhotoSwipeの公式サイトのデモをご覧下さい。stars」にした結果。実際に使ってみて、デザインの良さ、機能の豊かさ、動きのスムーズさ、どれをとっても「これだ!」と言わんばかりの完成度を感じました。API(開いた画像に固有のURLが付く)画像の自動ローディング(自動的に前後の画像をロードする)SVG(後方互換にPNGを使う)アイコンネイティブHTML5フルスクリーン対応キーボードショートカット一言でまとめると「モダン」です。モバイルファーストの昨今ですし、タッチジェスチャーのサポートは嬉しいですよね。多機能すぎて、使い方が柔軟すぎて、困る...こちらがPhotoSwipeの使い方紹介ページです。Startedこんなことが書いてあります。install「jQueryのプラグインとかじゃないので、実装するのに最低限のJavaScriptの知識が必要です」とのことですが、なんか、実装が地味に面倒ですよね...(笑)フレームワークだけ用意して、コントロール権はすべて使い手に委ねる。この柔軟性こそがPhotoSwipeの良さですが、毎回毎回、同じ実装をするのはやはり面倒ですから、jQueryでラップしたものはないか探してみたのですが、いいのがなかったので、自分で作って公開しました。提供しているものを使います。JSのほうは、PhotoSwipe本体をプラグインの中に含めたので、プラグインだけを読み込んで下さい。jquery.photoswipeでインストールした後、importして、jQueryにマウントして下さい。'jquery.photoswipe.js';PhotoSwipeMounter(jQuery);マークアップは特に決まった形はなく、imgタグが入っていれば大丈夫です。以下の設定をimgタグに付与できます。いずれもオプションです。キャプションテキストを格納している要素のクラス名。`img`を`figure`要素に入れた場合、その中の`figcaption`が使われる。指定しなかった場合、`src`のURLが使われる。`src`で指定した画像の幅と高さが使われる。上記のようなマークアップと仮定すれば、以下の1行で実装完了です。セレクターで指定した要素の中に必ずimgタグを入れるようにして下さい。それか、上記のサンプルコードみたいに、aタグとかの中に入れずに、そのままimgタグを使っても構いません。hrefをフル解像度の画像のURLとみなされます。hrefの値が#element-idのような、ページ内の別の要素を指している場合、その要素のinnerHTMLをスライドとして表示されます。渡すオプションオブジェクト。渡すイベントオブジェクト.動的に写真を追加する後から動的に写真をギャラリーに追加した場合、追加した後に`update`しておいて下さい。これでとりあえず面倒な実装が少し楽になったのではないでしょうか?PhotoSwipe、そのうち、Lightboxに代わる新しいギャラリーライブラリの代名詞になるかもしれませんね。ちなみに、下記の記事では、PhotoSwipeのオプションについて詳細に書かれていますので、英語のドキュメントを読むのが苦手な方はご参考下さい。PMありがとうございます。現在、トライしておりますが、難儀しております。1.デモページはないでしょうか?2.「上記のようなマークアップと仮定すれば、以下の1行で実装完了です。{$(‘#gallery’).photoSwipe();});でよろしいでしょうか?基礎的なことかもしれなく、申し訳ありませんが、宜しくお願いいたします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。新しい投稿をメールで受け取るランディングページ制作の基本(BtoC商品、アフィリエイトサイト向け)自作LINEスタンプと、剣道やってるとよくある話RECOMMENDこちらの記事も人気です。セレクタをキャッシュしてみたら180倍くらい早くなった。中国四川出身の王です。2008年に日本に渡り、大学卒業後Web制作会社勤務を経て、現在はフリーランスとしてゆるりと働いています。サイト制作の全般を担当しています。好きな生き物はプーティ(マイCat)です。趣味はアニメ鑑賞です。新世代の武道具店「ばんとう武道商店」に行ってきました!モバイルにも対応!完璧なLightBox「PhotoSwipe」をjQueryプラグイン化しました。ThinkIT連載オランダ移住、起業に関するコラムをThinkITにて連載中です。