NextGen Galleryの表示方法の説明 – FlashViewer編

※新バージョンのNextGen Flashviewerでは、swfファイルの保存フォルダが変更されています。
　詳しくはコチラの記事を参照してください。
　
NextrGen Galleryは、前回お伝えしたデフォルトの表示方法以外にも、さらに
外部プラグインを使うことで多くの表示方法を使うことができます。

今回は、NextGen Galleryの外部プラグインとして有名な、FlashViewerの
ギャラリー表示例の紹介です。

また、NextGen Gallery Flashviewerの設定方法やオプションの説明、
インストール方法や使い方も紹介したいと思います。

続きではこの4点の表示例を掲載してますが、同時に表示されるため
多少重くなるかもしれないのでご注意ください。

NextGen Gallery FlashViwerのインストール方法（使い方）

厳密にはこのプラグインは「SimpleViewer」「TiltViewer」「AutoViewer」「PostCardViewer」の
4点の表示方法のための補助プラグインとなります。

よって、今回紹介する表示方法は、下記の手順通りにインストールをしてから、
始めてNextGen Galleryのタグによる今回の表示方法が使用可能になります。

1.NextGEN-FlashViewer Pluginをダウンロード後に解凍

2.このサイトより「SimpleViewer」「TiltViewer」「AutoViewer」「PostCardViewer」をダウンロードして解凍後、先ずは「PostCardViewer」の中にある「viewer.swf」を「pcviewer.swf」にリネームした後、それぞれのファイルに入っていた「viewer.swf（SimpleViewer）」「autoviewer.swf」「TiltViewer.swf」「pcviewer.swf」を、” wp-content/plugins/nggflash-swf “内にアップロードする。（nggflash-swfフォルダは自分で作成）

3.その後、1で解凍したフォルダをアップロードし、プラグインの使用を開始する

準備が整ったところで、以下は表示例の紹介です。

SimpleVierの表示例

SimpleViewerを使って、ギャラリーを以下の様に表示させることができます。

表示タグは　[simpleviewer=ID]　です。
IDの部分には、表示したいギャラリーのID番号の数字が入ります。
widthには横幅、heightには縦幅が入ります。
記入例: [simpleviewer=1,600,600]

Simplevieweのrオプションは
管理画面　→　ギャラリー　→　Flashviewer　→　Simpleviewer

項目の説明は、上より順に
・画像の横幅の最大値
・画像の縦幅の最大値
・ギャラリー名とファイル名の文字色
・表示前の読み込み時の「now Loading」の文字色
・画像の枠線の色
・画像の枠線の太さ
・SimpleViewer全体とナビゲーションの外側、画像本体表示の外側との余白の幅
・ナビゲーションと画像本体表示との余白幅
・ナビゲーションを横に何列表示するか
・ナビゲーションを縦に何列表示するか
・ナビゲーションを上下左右のどこに配置するか
・全体的な縦の表示位置の指定
・全体的な横の表示位置の指定
・SimpleViewerの背景に使う画像の指定（.jpg もしくは .swf）

TiltVierの表示例

TiltViewerを使って、ギャラリーを以下の様に表示させることができます。

表示タグは　[tiltviewer=ID]　です。
IDの部分には、表示したいギャラリーのID番号の数字が入ります。
widthには横幅、heightには縦幅が入ります。
記入例: [tiltviewer=1,600,600]

Tiltviewerオプションは
管理画面　→　ギャラリー　→　Flashviewer　→　tiltviewer

項目の説明は、上より順に
・クリック後に表示させる画像の最大表示サイズ
・（Flickerから画像を取得時に有効な項目）再読み込みのボタンを表示するか
・裏面に切り替えるボタンの表示（Flickerから画像を取得すると、裏側に様々な情報が表示される）
・（Flickerから画像を取得時に有効な項目）裏側にFlickerのページへのリンクを表示するか
・（Flickerから画像を取得時に有効な項目）Flickerのページへのリンクに使う文章
・横にサムネイルを何枚並べるか
・縦にサムネイルを何枚並べるか
・画像の枠線の色
・裏返した画像の背景色
・TiltViewer全体の中心からグラデーションをする円の基本色
・グラデーションをする円より外側の背景色
・TiltViewer上で右クリックした際に表示されるフルスクリーンの開始の項目の文章
・フルスクリーン時に右クリックした際に表示されるフルスクリーン解除の項目の文章
・Flickerの画像を使う際には、ここにFlickerのIDを入力
・（Flickerから画像を取得時に有効な項目）裏側にFlickerのページで使われている文章を表示するか

AutoVierの表示例

Autoviewerを使って、ギャラリーを以下の様に表示させることができます。

表示タグは　[autoviewer=ID]　です。
IDの部分には、表示したいギャラリーのID番号の数字が入ります。
widthには横幅、heightには縦幅が入ります。
記入例: [autoviewer=1,600,600]

Autoviewerのオプションは
管理画面　→　ギャラリー　→　Flashviewer　→　Autoviewer

項目の説明は、上より順に
・写真の枠線の色
・写真の枠線の太さ
・写真と写真の間の広さ
・Autoviewerのスライドショー時の次の画像に切り替えるまでの表示時間

PostCardViewerの表示例

PostCardViewerを使って、ギャラリーを以下の様に表示させることができます。

表示タグは　[pcviewer=ID]　です。
IDの部分には、表示したいギャラリーのID番号の数字が入ります。
widthには横幅、heightには縦幅が入ります。
記入例: [pcviewer=1,600,600]

PostCardviewerオプションは
管理画面　→　ギャラリー　→　Flashviewer　→　postcardviewer

項目の説明は、上より順に
・サムネイルを表示する範囲のサイズ
・横に何枚サムネイルを並べるか
・サムネイルの大きさを画像の実寸の何％にするか
・クリック後の画像の大きさを、画像の実寸の何％にするか
・画像の枠の色
・画像の枠の幅
・キャプションの文字色

正常なタグで記事を作成しても表示されない原因

以下のいずれかが考えられます。

・heightとwidthが設定されていない（未設定でも動くバージョンと動かないバージョンがある）
・ブラウザのキャッシュの問題（ブラウザの再起動で表示されるようになる）
・それぞれのswfが正常にインストールされていない
・閲覧しているPCのパワー不足
・ギャラリーの指定ミス
・実は正常にタグが書かれていない