NextGEN Galleryに追加されていた新しいギャラリー表示例
2016/04/25
※ 2016/04/25 この表示例によってページ数が水増しされてSEO的に悪影響の懸念があったので、サンプルの表示をオフにしました
※ 10/25 アルバム表記とタグでのソート表示に関して、バグと注意点を追記しました。
いつの間にか、NextGEN Galleryのデフォルト設定で可能なギャラリー表示例が増えていたので
今回はそれを紹介します。
今回もひとつのページで6種類、全ての表示方式で出力されているため、
PC環境によってはページ全体が重くなっているかと思いますので注意してください。
目次
現時点でのNextGEN Gallery最新版1.3.6のデフォルトで可能なギャラリーの種類
今回はNextGEN Gallery1.3.6にアップデートが完了している前提で話を進めています。
最新バージョンで表示できるギャラリー方法は、以下の8種類です。
1.ノーマルギャラリー
2.スライドショー
3.イメージブラウザー
4.タグによってソートされたノーマルギャラリー
5.PicLens
6.シングルピクチャー
7.アルバム
8.タグによってソートされたアルバム
1と2に関しては、以前にポストした以下の記事を参考にしてください。
NextGen Galleryのギャラリー表示例 – hycko.blog
今回の記事では、3~8の表示例及び設置方法を説明します。
また、画像をクリックした際の画像表示効果に関しては、このサイトではFancybox for wordpressを使用中のため、Fancyboxにて表示されます。
イメージブラウザーの表示例
表示タグは [imagebrowser id=ID] です。
IDの部分には、表示したいギャラリーのID番号の数字が入ります。
記入例: [imagebrowser id=5]
画像上部にはギャラリー内で登録したそれぞれの「画像のAlt&titleテキスト」が挿入され
画像下部には登録したそれぞれの「画像のdescription」が挿入されます。
widthなどは指定できず、画像のオリジナルサイズで出力しようとします。
ですが、ギャラリーを出力するコンテナ内の最大値にフィットするため、
divなどでコンテナを作り、その中にイメージブラウザーを展開すると良いと思います。
タグによってソートされたノーマルギャラリーです。
[スライドショーで表示]や[View With PicLens]は表示されません。
全てのギャラリーから、指定したタグを持つ画像を抽出、表示します。
複数指定をした場合は、いずれかのタグを持つ画像を抽出します。
カーソルを乗せた時にはギャラリー内で登録した「画像のAlt&titleテキスト」が
Altとしてポップアップします。
Ver1.3.6現在、タグは半角英数のみ対応しています。
日本語でタグを設定・指定すると、ギャラリーが表示されません。
表示タグは [nggtags gallery=TAGS] です。
tagsの部分には、抽出したい画像のタグが入ります。
記入例: [nggtags gallery=cats,animal]
View with PicLensの表示方法及び表示例
管理画面 → ギャラリー → オプション → General Options内
「Activate PicLens/CoolIris support」にチェックを入れることにより、ノーマルギャラリーを
表示する際に「View with PicLens」というメニューが増えます。
View with PicLensのリンクのみを作る方法
裏技ですが、ギャラリーを表示せずに、View with PicLensのリンクのみを作る事も可能です。
タグは以下の通りです。
<a class=piclenselink href="javascript:PicLensLite.start({feedUrl:'http://example.com/wp-content/plugins/nextgen-gallery/xml/media-rss.php?gid=5&mode=gallery'});">PicLens Link</a>
各々のURLにあわせて、タグ内容を変更してください。
記入例
<a class=piclenselink href="javascript:PicLensLite.start({feedUrl:'http://blog.hycko.net/wp-content/plugins/nextgen-gallery/xml/media-rss.php?gid=5&mode=gallery'});">ミーの写真集</a>
シングルピクチャーの表示例
表示タグは [singlepic id=8 w=width h=height mode=web20|watermark float=left|right] です。
IDの部分には、ギャラリーID番号ではなく、ピンポイントで表示したい「イメージID番号」が入ります。
記入例: [singlepic id=8 w=250 h=190 mode=web20 float=left]
id以外はオプションなので、不必要なら記入しなくてもOKです。
wはwidth、hはheightの数値を入力します。
modeは「web20」と「watermark」の二つから選ぶことができます。
web20は、この表示例の様に、下部を水面に映る様に反転させるエフェクトです。
watermarkは、自分で設定した画像もしくは文字を署名の様に画像に埋め込むエフェクトです。
watermarkの設定は
管理画面 → ギャラリー → オプション → Watermark
にて変更できます。
floatはスタイルシートのfloatと同じ効果で、画像の左側(left)か右側(right)に
文章を回りこみさせたい時に指定します。
しかし、ここでfloatを指定しても、floatを閉じるタグが自動で発行されないため
手動で <br clear=”all”> などのfloatを終了させるタグを挿入しないと
レイアウトが崩れる可能性があります。
カーソルを乗せた時にはギャラリー内で登録した「画像のAlt&titleテキスト」が
Altとしてポップアップします。
アルバム表示に関して注意点
今回、アルバムでの表示方法を
1.extend
2.compact
3.sort by tags
3通り説明します。その都合上、この一つの記事に3パターンのアルバム出力がされています。
しかし、一つの記事に二つ以上の表示方法を設定すると
アルバムクリック後のリンクが正常に機能しません。
例えばこのページだと、この一つの記事にextendとcompactでのアルバムが
挿入されているため、競合で不具合が発生しており、compactで出力したアルバムをクリックしても
extendのアルバムが展開されるというバグが発生しています。
よって、アルバムでの出力は、一つの記事につき1パターンまでにしてください。
ひとつの記事に1パターンの出力であれば、正常に動作します。
wordpressのパーマリンク設定を変更している場合におけるアルバム出力の設定
wordpress本体の設定で、パーマリンク設定をカスタムしている場合、アルバム表示をするために
以下の手順で設定を行う必要があります。
1.NextGEN Gallery管理画面 → オプション → General Options内「Activate permalinks」にチェックを入れ、保存する
2.wordpressの設定「パーマリンク設定」を開き、保存をしなおす
アルバムの表示例 – extend
表示タグは [album id=x template=extend] です。
IDの部分には、ギャラリーIDではなく、表示したい「アルバム」のID番号の数字が入ります。
記入例: [album id=1 template=extend]
アルバムの表示例 – compact
※前述の通り、この記事ではextendと競合しているため、compactのアルバムをクリックしても画像が展開できないバグが発生しています。一つの記事にcompactのみを出力する場合には問題ありません。
表示タグは [album id=x template=compact] です。
IDの部分には、ギャラリーIDではなく、表示したい「アルバム」のID番号の数字が入ります。
記入例: [album id=1 template=compact]
ギャラリーの登録名がそのままアルバム名となります。
写真数もギャラリーに登録されている画像数と同じ数になります。
To show tag albums の表示例
タグによってソートされた画像別のアルバムです。
アルバムですが、NextGEN Galleryで設定するalbumとは別です。
全てのgalleryより指定したタグを持つ画像を抽出し、アルバムとして表示をします。
例えば今回は「dog」と「cat」の二つをタグ指定したので、アルバムが2個作成され
それぞれ「dog」のタグが付いた画像、「cat」のタグが付いた画像のアルバムが生成されています。
Ver1.3.6現在、タグは半角英数のみ対応しています。
日本語でタグを設定・指定すると、アルバムの表紙は表示されますが、
クリック後に中身のギャラリーを展開する事ができません。
よって、必ずタグは半角英数でのみ設定してください。
表示タグは [nggtags album=TAGS] です。
tagsの部分には、抽出したい画像のタグが入ります。
記入例: [nggtags album=cat,dog]
タグがアルバム名になり、タグのヒット数が画像数になります。
以下のサイトを参考に解説しました。
参考:WordPress › NextGEN Gallery « WordPress Plugins
激安中国通販「AliExpress」の解説
日本の相場より半額以下の商品が送料無料で多数!楽天ポイントもついでにゲットする方法など、ウワサのアリエクスプレスをまとめてみました!
関連記事
-
NextGen Galleryの表示方法の説明 – FlashViewer編
※新バージョンのNextGen Flashviewerでは、swfファイルの保存 …
-
何も変更していないのに、xreaでktai entryから投稿が読み込めなくなった件
xreaにはよくあることですが、ktai entryからxreaのpop3にアク …
-
NextGEN GalleryのスライドショーなどをPHPタグを使って直接入力でサイトに埋め込む設定方法
※追記09/09/05 何故かまたダブルコーテーションが全角になっていたので、半 …
-
WP Tunerの日本語化ファイルを作ってみた
WP Tunerとは、wordpressの様々なパフォーマンスの解析をしてくれる …
-
coreserverからさくらVPSにwordpressを移植した時のメモ
興味本位でさくらVPS借りて設定してみたら、なんか普通に使えそうだったので、思い …
-
母親にブログを勧めてから数ヶ月が経った
岐阜の実家に住んでいるオフクロ。 今年で還暦な60歳だがパートフルタイム+家事+ …
-
flshow managerを正しく表示させる方法
FLashで手軽にアニメーションをするナビゲートリンクを作る事ができるFlsho …
-
wordpressのパーマリンクを懲りずに変更してみた
以前にも挑戦して、失敗というか断念している「wordpressのパーマリンク変更 …
-
wordpressアイキャッチ画像の自動化処理(昔の記事一括・記事投稿時)
アイキャッチ、便利ですが地味にめんどいです。 なので2つの方法で自動処理を行いま …
-
[Ktai Entry] EWWW Image Optimizerで画像のExifデータの削除やリサイズがされない
これは恐らくEWWW Image Optimizerが画像処理を行うタイミングの …
Comment
WordPress PlugIn 導入
すでにインストール済みだったWordPressにPlugInを入れた。 以下、メモ代わりに。 WP-SpamFree Anti-Spam(インストール済み、稼働中) spam対策プラグイン、有効化するだけで使える、強力なスパ…
はじめまして。
NextGen Galleryの使い方を調べていて、こちらに、たどり着きました。基本的な使い方、とても分かりやすかったです。
アルバムから個別のギャラリーをクリックした際に、そのギャラリーのサムネイルが表示されますが、これをサムネイルではなく、はじめの1枚の実写真を表示したいのですが、そのようなカスタマイズはかなり難しいでしょうか?
お暇な際にでもアドバイスいただければ、幸いです。
>>Hyneさん
はじめまして。コメントありがとうございます。
お力になれず申し訳ないのですが、最近全くWPに触れてないばかりか
NextgenGalleryのカスタマイズに関しては挑戦をしたことがないので
残念ながらお答えができません。
もし今後、同じようなことに挑戦した際には、ちゃんと記事にして案内させてもらいます!
hyckoさま
回答いただき、ありがとうございます。
そうですか・・・
あまり、凝ったデザインは必要なく、たてよこ均等に写真(サムネイル)を並べ、それをクリックすると拡大され、そのグループの写真をクリックで順番に見せたいというものなのですが、なかなかぴったりのものが見つかりません。
カスタマイズせずに、そのように動作するプラグインあればよいのですが。
PHPを勉強し始めたばかりなので、余計難しいです。
回答いただいただけで、感謝します。
また、寄らせていただきます。
[…] Gallery Posted on 05/03/2011 by manamihattori Album01 […]
はじめまして、検索でギャラリープラグインとfancyboxでたどり着きました。fancyboxのzoomタイプをwordpressにする前は使用していたんですが。
wordpressでhycko さんのように使う方法をぐぐっているのですがどうも辿り着けないのです。
導入方法はどのようにされたんでしょうか??
もしお時間有りましたらヒント頂ける助かります
>>Hyneさん
お返事ありがとうございました。
希望の動作に関しては、NextgenGalleryと画像を表示させるスクリプトの種類で
どうにか実現できる気がしますね。
具体的にどれというご案内ができなくて申し訳ありませんが・・・。
PHP、ご一緒に勉強していきましょう!
>>まゆうさん
コメントありがとうございます。
このブログで使っているfancyboxは、wordpressのプラグイン
「FancyBox for WordPress」にて動作をさせてます。
ご参考になれば幸いです。
動作をさせてます。