hycko.blog

昔の記事は上手く表示されないかもしれない。

NextGEN Galleryに追加されていた新しいギャラリー表示例

      2016/04/25

この記事は 2286回 閲覧されています

※ 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などでコンテナを作り、その中にイメージブラウザーを展開すると良いと思います。

To show image sorted by tagsの表示例

タグによってソートされたノーマルギャラリーです。
[スライドショーで表示]や[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&amp;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&amp;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

 - wordpress ,

  • このエントリーをはてなブックマークに追加

Comment

  1. Ashen より:

    WordPress PlugIn 導入

    すでにインストール済みだったWordPressにPlugInを入れた。 以下、メモ代わりに。 WP-SpamFree Anti-Spam(インストール済み、稼働中) spam対策プラグイン、有効化するだけで使える、強力なスパ…

  2. Hyne より:

    はじめまして。
    NextGen Galleryの使い方を調べていて、こちらに、たどり着きました。基本的な使い方、とても分かりやすかったです。

    アルバムから個別のギャラリーをクリックした際に、そのギャラリーのサムネイルが表示されますが、これをサムネイルではなく、はじめの1枚の実写真を表示したいのですが、そのようなカスタマイズはかなり難しいでしょうか?

    お暇な際にでもアドバイスいただければ、幸いです。

  3. hycko より:

    >>Hyneさん

    はじめまして。コメントありがとうございます。
    お力になれず申し訳ないのですが、最近全くWPに触れてないばかりか
    NextgenGalleryのカスタマイズに関しては挑戦をしたことがないので
    残念ながらお答えができません。

    もし今後、同じようなことに挑戦した際には、ちゃんと記事にして案内させてもらいます!

  4. Hyne より:

    hyckoさま
    回答いただき、ありがとうございます。
    そうですか・・・
    あまり、凝ったデザインは必要なく、たてよこ均等に写真(サムネイル)を並べ、それをクリックすると拡大され、そのグループの写真をクリックで順番に見せたいというものなのですが、なかなかぴったりのものが見つかりません。

    カスタマイズせずに、そのように動作するプラグインあればよいのですが。

    PHPを勉強し始めたばかりなので、余計難しいです。

    回答いただいただけで、感謝します。
    また、寄らせていただきます。

  5. […] Gallery Posted on 05/03/2011 by manamihattori Album01 […]

  6. まゆう より:

    はじめまして、検索でギャラリープラグインとfancyboxでたどり着きました。fancyboxのzoomタイプをwordpressにする前は使用していたんですが。
    wordpressでhycko さんのように使う方法をぐぐっているのですがどうも辿り着けないのです。
    導入方法はどのようにされたんでしょうか??
    もしお時間有りましたらヒント頂ける助かります

  7. hycko より:

    >>Hyneさん
    お返事ありがとうございました。
    希望の動作に関しては、NextgenGalleryと画像を表示させるスクリプトの種類で
    どうにか実現できる気がしますね。
    具体的にどれというご案内ができなくて申し訳ありませんが・・・。
    PHP、ご一緒に勉強していきましょう!

    >>まゆうさん
    コメントありがとうございます。
    このブログで使っているfancyboxは、wordpressのプラグイン
    「FancyBox for WordPress」にて動作をさせてます。
    ご参考になれば幸いです。
    動作をさせてます。

Message

記事に意見や感想、質問があれば、お気軽にどうぞ~
名前は無記入でもOKです

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

  関連記事

no image
coreserverからさくらVPSにwordpressを移植した時のメモ

興味本位でさくらVPS借りて設定してみたら、なんか普通に使えそうだったので、思い …

wordpressアイキャッチ画像の自動化処理(昔の記事一括・記事投稿時)

アイキャッチ、便利ですが地味にめんどいです。 なので2つの方法で自動処理を行いま …

no image
wordpressのパーマリンク変更プラグイン「Permalink Redirect」での301ループに要注意

以前の記事で書いた通り、パーマリンクを変更しようとしてPermalink Red …

no image
wordpressをxreaなどPHPがsafemodeのサーバに設置する時の解決法

サーバでPHPがsafemodeになっていると、wordpressを操作する際に …

no image
WP Tunerの日本語化ファイルを作ってみた

WP Tunerとは、wordpressの様々なパフォーマンスの解析をしてくれる …

no image
NextGEN Galleryでスライドショーなどが表示されない場合の解決法

主にプラグインのアップデート後ですが、サイトのNextGEN Gallery関連 …

no image
携帯サイトにGoogle Analyticsを設置する方法

※既にGoogle Analyticsにて携帯サイトに公式対応しているので、そち …

no image
PHP Speedy WPは高速化の効果がなかった

設定によってはプラグインに不具合がでるし、体感速度として特にサイト表示が高速化す …

no image
NextGen Galleryの使い方を1から説明してみる

wordpressの画像ギャラリープラグインとして優秀なNextGen Gall …

no image
wordpress2.7とNextgen Gallery最新版(1.0.2)にしたらFlashviewerが動かなくなったと思いきや・・・

wordpressとNextGen Galleryを最新版にしたら、何故かFla …