lightgallery」を使ってみました。今回はその利用方法などの紹介。lightgallery」は、jQueryで動作するレスポンシブなライトボックスギャラリープラグインです。CSSとjsファイルを呼び出し、簡単なコードを書くことで、高機能な写真ギャラリーをサイトに設置することができます。呼び出すjsファイルを変更したり、実行コードを多少修正することで、簡単に動作をカスタマイズ出来るのも特徴です。ギャラリー表示例lightGalleryを実際に動作させてみると以下のようになります。レスポンシブに対応していると同時に、こんな感じで、スワイプでの写真切り替えにも対応しています。以下では、このlightGalleryの使い方を簡単に説明します。以下では、サイトでのlightGalleryの設置方法を紹介します。主な手順lightGalleryを利用するのに必要な主な手順は以下です。ZIP」ボタンからファイルをダウンロードします。ダウンロードしたファイルを解凍して、中にある「dist」フォルダ内にあるフォルダすべてをプロジェクトフォルダ内に移動します。「dist」フォルダの中には以下のフォルダがあります。cssfontsimgjsこれらのフォルダを全てをプロジェクトフォルダ直下にコピペします。WordPressの場合は、テーマフォルダ直下。ヘッダーでCSSの呼び出し次に、<head></head>内で以下のようにlightGalleryのCSSファイルを呼び出します。/>フッターでJSファイルの呼び出しフッターの</body>タグ手前あたりでjsファイルを以下のように呼び出します。src="js/lg-zoom.min.js"></script>「lg-xxxxxxxx.min.js」というファイルは、プラグインファイルです。必要な機能を追加したい時にJSファイルを呼び出します。機能としては、以下のような機能があります。詳しくは、デモページを見てみると良いかと思います。plugin.sachinchoolur.github.ioフッターに実行コードの記入あとは、先程のjsファイル呼び出しコードのあとに以下のようにjQueryの実行コードを記入します。最後にHTMLで以下のようにマークアップします。id=”lightgallery”></div>ラッパーの中には、AとIMGタグ以外の余計な要素が入ると動作しなくなるので注意してください。(※ul、liタグなどに対応させることはできる模様。)例えば、以下のように書くと、動作しなくなります。僕は最初、jQueryプラグイン「Lightbox」のようにlightGalleryも利用できると思っていました。16:20ただ、lightGalleryは、本文中の画像を拡大表示(ライトボックス表示)するようには出来ていませんでした。(※上にも書いたように、余計な要素が入り込むと動作しないため)ですので、バージョン1.2.0時点では、単に画像(動画)ギャラリーとしてしか利用できないようです。以下で、使い方を簡単に説明します。ヘッダーでCSSの呼び出しWordPressテーマでの呼び出しは、、<head></head>内で以下のようにlightGalleryのCSSファイルを呼び出します。/>子テーマでは、get_stylesheet_directory_uri()、親テーマではget_template_directory_uri()を利用した方が良いかもしれません。フッターでの呼び出しフッターの</body>手前での呼び出しをまとめて書くと以下のようになります。{jQuery("#lightgallery").lightGallery();});</script>HTMLをマークアップするあとは、テンプレートカスタマイズもしくは、投稿画面から以下のようになるように、HTMLをマークアップします。/></a>...</div>投稿画面などからマークアップを記入するときは、余分な改行が入ると<p></p>タグなどが挿入されて、動作しなくなるので注意が必要です。lightgalleryは、読み込むファイルは多いですが、結構簡単に高機能画像ギャラリーを作成することができます。WordpressでLightbox的な機能(本文中の画像を拡大表示する機能)として利用するには向いていません。いうか、やろうと思ったら動作しませんでした。「手軽に高機能なギャラリーサイトを作りたい」なんて場合には、便利なjQueryプラグインだと思います。無料で使える会計ソフト「MFクラウド確定申告」は零細個人事業主にとっては神ツールなのではないかスポンサーリンクレクタングル(大)広告レクタングル(大)広告シェアする8141227LINE!4922574フォローする@MrYhiraさんをフォローこの記事をお届けした寝ログの最新ニュース情報を、いいねしてチェックしよう!スポンサーリンクわいひら関連記事VMwareで仮想マシンを構築してLinux(CentOS)をインストールする方法【初心者向け】これまでLinuxを触ったことがない初心者の方向けのCentOS環境構築方法です。VMwareで仮想マシンを構築して、自由なテスト環境を手に入れることができます。記事を読むWordPress記事を修正した時に更新日を変更するかしないかを選択できるようにするカスタマイズ方法Wordpressの投稿管理画面から更新日の変更をユーザーが自由に選択できる設定項目を追加するカスタマイズ方法の紹介です。誤字修正等のちょっとした修正なので更新日を検索エンジンに伝えたくない場合などに。自前のサーバーでないサイトから画像を取得して画像キャシュ化する方法です。ついでに大きさを統一するためリサイズします。記事を読むWordPressヘッダーでレンダリングブロックしているJavascriptをフッターで読み込むカスタマイズ方法ヘッダーでJSファイルが読み込まれていると、ページの読み込みが遅くなります。それを防ぐために、WordpressでJSリソースファイルの読み込みを、ページの最後の方で読み込んで、レンダリングブロックを防ぐカスタマイズ手順です。Patterns」の紹介です。記事を読む検索結果に星評価を表示するWordPressカスタマイズ方法(JSON-LDでレビュー構造化データの出力)JSON-LDを使用してレビューの構造化データー(リッチスニペット用の記述)をheadタグに出力するための、WordPressテーマカスタマイズ方法です。Proプラグインを使用していたら、不具合が気になったので、直接WordpressテーマにOGPを設定した話。記事を読むTwitter、Facebook、Google+、はてブのソーシャルカウント数をWordPressで直接取得する関数まとめSNSの、ツイート数や、いいね数、Google+1数、はてブ数などの取得方法です。functions.phpに貼り付けて使用できます。記事を読むWordPressテーマなどでは、PHP関数で直接ファイル操作をするのは非推奨、WP_FileSystemを使って操作するのが望ましいらしいWordpressではPHPのファイルシステム利用は望ましくなく、WP_FileSystemの利用が推奨されています。記事を読むWordPressのビジュアルエディターにテーマのstyle.cssを割り当てる方法Wordpressテーマ内のstyle.cssを用いて、ビジュアルエディターもテーマ表示と同じスタイルで記事を書けるようにするカスタマイズ方法の紹介です。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。使える会計ソフト「MFクラウド」は零細個人事業主には神ツールなのではないかコスパ無双サーバー「カラフルボックス」レビュー。「ボックスメニュー」ショートコードの実装方法。WPメニュー機能で内容を変更できるやつ。CocoonSimplicityの後継テーマを作りました。Cocoonにて無料配布しています。Simplicityシンプルな無料Wordpressテーマを自作してみました。簡素好きな人におすすめ。Simplicityにて無料配布しています。「ボックスメニュー」ショートコードの実装方法。WPメニュー機能で内容を変更できるやつ。方はサイトの始め方参照。