NextGenGallery

https://haniwaman.com/nextgen-gallery/

https://haniwaman.com/nextgen-gallery/#index_id5

ギャラリーを作成してみる

Gallery → Add Gallery を開いてください。

ギャラリー名を入力して「ファイルを追加」からどんどんとファイルを追加していきましょう。

「アップロード」ボタンでWordPressへアップロードします。

進捗状況が出るので、とても親切です。

アップロード時に自動で圧縮もしてくれる優れもの。ちなみに画像がアップロードされる先は、/wp-content/galleryです。

ギャラリーを表示してみる

投稿ページか固定ページを開いてください。エディタの上部に「Add Gallery」ボタンが追加されていることが分かります。こちらをクリックしてください。

「Display Galleries」タブから、どの表示形式にするか選択できます。まずは一般的な、「NextGEN Basic Thumbnails」を選択して「Insert Displayed Gallert」で記事に挿入しましょう。

こんな感じのギャラリーページが出来上がりました!

「Show Slideshow」は文字通り、スライドショーとして表示を切り替えてくれるリンクです。

NextGEN Gallery の設定

Gallery → Gallery Settings を開いてください。個人的に重要だと思う設定だけまとめました。

画像のサイズ

画像は自動的にトリミングされて大きさが調整されるようになっています。サイズは、「Override thumbnail settings」から変更可能です。

  • Override thumbnail settings → 画像のサイズを変更しますか?
  • Thumbnail dimensions → サムネイルの大きさ
  • Thumbnail crop → トリミングしますか?

サイズの大きさもトリミングの有無も変更可能です。ただし、画像のサイズが揃っていないと余白がありすぎる並びになってしまうので注意してください。

画像の表示枚数

「Images per page」で、ギャラリーの枚数の上限を設定できます。一画面にたくさん表示したい方はここの数字を大きくしましょう。

Show Slideshow のリンク

個人的にはあまり必要ないと思うので、削除しちゃいました。
「Show slideshow link」を「いいえ」にすることで表示されなくなります。

スライドショーの切り替わりスピード

標準は10秒で切り替わる設定になってますが、遅すぎます。なんの動きもないページにスクロールせずに10秒待ち続ける人がいるとは思えません。

3秒に設定を変更しました。

主要な設定は以上です。次はちょっと上級レベルなカスタマイズを見ていきます。

Gallery SettingsのBASIC THUMBNAILSの Enable AJAX pagenationは いいえ にしておく。はい にするとページネーション2ページ以降はLightBoxが効かなくなる! いいえ の状態にしておく。

WP jQuery Lightbox と組み合わせる方法

「NextGEN Gallery」は基本機能としてLightboxが組み込まれています。Lightboxとは、画像をクリックすると拡大表示してくれる機能ですね。

標準では「Fancybox」が使われているのですが、これをWordPressプラグイン「WP jQuery Lightbox」に変更することができます。

WP jQuery Lightbox をインストール

プラグイン → 新規追加 → キーワード「WP jQuery Lightbox」 → 今すぐインストール

インストールできたら、有効化してください。

設定 → jQuery Lightbox を開いてください。 「スクリーンサイズに合わせて画像を縮小」にチェックすることをお忘れなく!

「WP jQuery Lightbox」側の設定は以上です。

WP jQuery Lightboxを使うためのNextGEN Galleryの設定

Gallery → Other Options を開いてください。

「Lightbox Effects」のエリアを変更します。

  • 「What effect would you like to use?」 → Custom
  • 「Code」 → rel=”lightbox”

これで、ライトボックスが「WP jQuery Lightbox」に置き換わります。

NextGen Gallery ギャラリープラグイン wordpress

http://www.adminweb.jp/wordpress-plugin/list/index13.html

http://www.adminweb.jp/wordpress-plugin/list/index14.html

 

http://sharinglab.info/wordpress/wordpress-plug-in/design/nextgen-gallery20-2/

 

管理画面を日本語化するパッチは現在ないようだ。

インストールされたバージョンが既に数カ所は日本語なので、たぶんその部分だけ。ほぼ英語だけみたい。

 

キャプションについて

https://ja.forums.wordpress.org/topic/5242

 

サムナイルのサイズ
Galley  → other options → thumbnail option でサイズを決定

【追加2】ギャラリーの画像サイズはレイアウトに沿って
サムネイルの画像サイズを設定する。

管理画面ー>ギャラリーー>オプションー>サムネイルで指定。

 サムネイルのサイズを変更したら、既に登録済みの画像のサムネイルは、 再作成する必要がある。
管理画面ー>ギャラリーー>ギャラリー管理より、再作成する。

 

サムネイルのカラム数

あと小技としては、レスポンシブ対応のテーマを使っている場合は、Gallery settings の Number of columns は「0」にしておいて、cssのほうでwidthを設定すると吉。

Number of columns はカラムの個数(写真の横並びの個数)を設定する項目なので、3とか4とか入れるとレスポンシブっぽくヌルヌル動いてくれません。

http://mcbrain.jp/8805/

 ※.ngg-gallery-thumbnail-box だけで指定するとオリジナルのCSSが優先されるので包含している要素から指定すること。

 

もし、2カラムにしてwidth:50%にすると、スマホ横向きの時に、元の画像が小さいと、スペースがものすごく生まれる。いろいろやったがだめ。3カラムにしてwidthを30%で体裁ととのえた。

 

NextGEN GalleryとWP jQuery Lightboxを併用してレスポンシブ対応のギャラリーをつくる

itprobe 2014年1月31日 by itprobe

NextGEN Gallery自体はデフォルトではレスポンシブに対応していませんから、
横並び1列の画像数は表示カラム数を指定せず、「Gallery Settings」の「NextGEN Basic Thumbnails」にある、
「Number of columns to display」の値は0にしておいて、CSSのwidthを適切な%で設定しましょう。

140131-02

http://entrys.jp/wordpress/blog/837