- 2008-11-30 (日) 23:00
- [wordpress]
※新バージョンの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を使って、ギャラリーを以下の様に表示させることができます。
The Flash Player and a browser with Javascript support are needed..
表示タグは [simpleviewer=ID] です。
IDの部分には、表示したいギャラリーのID番号の数字が入ります。
widthには横幅、heightには縦幅が入ります。
記入例: [simpleviewer=1,600,600]
Simplevieweのrオプションは
管理画面 → ギャラリー → Flashviewer → Simpleviewer
項目の説明は、上より順に
・画像の横幅の最大値
・画像の縦幅の最大値
・ギャラリー名とファイル名の文字色
・表示前の読み込み時の「now Loading」の文字色
・画像の枠線の色
・画像の枠線の太さ
・SimpleViewer全体とナビゲーションの外側、画像本体表示の外側との余白の幅
・ナビゲーションと画像本体表示との余白幅
・ナビゲーションを横に何列表示するか
・ナビゲーションを縦に何列表示するか
・ナビゲーションを上下左右のどこに配置するか
・全体的な縦の表示位置の指定
・全体的な横の表示位置の指定
・SimpleViewerの背景に使う画像の指定（.jpg もしくは .swf）
TiltVierの表示例
TiltViewerを使って、ギャラリーを以下の様に表示させることができます。
The Flash Player and a browser with Javascript support are needed..
表示タグは [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を使って、ギャラリーを以下の様に表示させることができます。
The Flash Player and a browser with Javascript support are needed..
表示タグは [autoviewer=ID] です。
IDの部分には、表示したいギャラリーのID番号の数字が入ります。
widthには横幅、heightには縦幅が入ります。
記入例: [autoviewer=1,600,600]
Autoviewerのオプションは
管理画面 → ギャラリー → Flashviewer → Autoviewer
項目の説明は、上より順に
・写真の枠線の色
・写真の枠線の太さ
・写真と写真の間の広さ
・Autoviewerのスライドショー時の次の画像に切り替えるまでの表示時間
PostCardViewerの表示例
PostCardViewerを使って、ギャラリーを以下の様に表示させることができます。
The Flash Player and a browser with Javascript support are needed..
表示タグは [pcviewer=ID] です。
IDの部分には、表示したいギャラリーのID番号の数字が入ります。
widthには横幅、heightには縦幅が入ります。
記入例: [pcviewer=1,600,600]
PostCardviewerオプションは
管理画面 → ギャラリー → Flashviewer → postcardviewer
項目の説明は、上より順に
・サムネイルを表示する範囲のサイズ
・横に何枚サムネイルを並べるか
・サムネイルの大きさを画像の実寸の何％にするか
・クリック後の画像の大きさを、画像の実寸の何％にするか
・画像の枠の色
・画像の枠の幅
・キャプションの文字色
正常なタグで記事を作成しても表示されない原因
以下のいずれかが考えられます。
・ブラウザのキャッシュの問題（ブラウザの再起動で表示されるようになる）
・それぞれのswfが正常にインストールされていない
・閲覧しているPCのパワー不足
・ギャラリーの指定ミス
・実は正常にタグが書かれていない
ブログ内の関連記事
- Newer: 各検索エンジンのサイトエクスプローラーに無料で登録する
- Older: 筋肉減少中
- Trackback URL for this entry
- http://blog.hycko.net/nextgen-gallery%e3%81%ae%e8%a1%a8%e7%a4%ba%e6%96%b9%e6%b3%95%e3%81%ae%e8%aa%ac%e6%98%8e-flashviewer%e7%b7%a8/836/trackback/
- Listed below are links to weblogs that reference
- NextGen Galleryの表示方法の説明 – FlashViewer編 from hycko.blog
- pingback from フォトギャラリー開設のお知らせ | freetempo 09-02-05 (木) 16:48
-
[...] 他にもこんな表示が可能です。（下記のリンク参照） ↓ ↓ ↓ フォトギャラリーの表示方法 [...]
- pingback from ThinkPad with Ubuntu » Blog Archive » NextGEN Gallery 11-04-24 (日) 15:23
-
[...] ・・・結局のところ使用はしていませんが、hycko.blogさんのサイトでNextGen Galleryの表示方法の説明 – FlashViewer編のとおり、詳しい説明がありましたので参考にさせていただきました。Simpl [...]
