hycko.blog

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

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

      2015/08/13

※新バージョンの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=1,600,600]

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

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

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

TiltVierの表示例

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

[tiltviewer=1,600,600]

表示タグは [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=1,500,500]

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

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

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

PostCardViewerの表示例

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

[pcviewer=1,600,600]

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

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

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

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

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

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

 - wordpress , ,

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

Comment

  1. […] 他にもこんな表示が可能です。(下記のリンク参照) ↓      ↓        ↓ フォトギャラリーの表示方法 […]

  2. […] ・・・結局のところ使用はしていませんが、hycko.blogさんのサイトでNextGen Galleryの表示方法の説明 – FlashViewer編のとおり、詳しい説明がありましたので参考にさせていただきました。Simpl […]

  3. kurikurashi より:

    flashviewerのご紹介、ありがとうございます。

    ただ、上記にご説明頂いているように設定をしているのですが、
    [ギャラリーが見つかりません]
    と表記されて画像表示がされません。。。

    nextgalleryは正常に動いております。
    ダッシュボードにもflashviewerの編集画面はきちんと表示されています。

    ショートコードもご案内頂いている様に、以下にようにしています。
    [simpleviewer=1]

    お忙しいと思いますが、、大変恐縮ですが、何かアドバイスなど頂けませんでしょうか。

  4. hycko より:

    >>kurikurashiさん

    コメントありがとうございます。

    エラー内容的には、 [simpleviewer=1] で指定した ギャラリーID1 が見つからないというものですよね。

    ・Nextgen galleryにてギャラリーID1は存在してますか?
    ・もし存在しているのであれば、他のギャラリーIDを試すとどうでしょうか?
    ・また、simpleviewer以外のautoviewerやtiltviewrの動作はどうでしょうか?
    ・simpleviewerの設定は正しくされてますか?

    自分が確認するとしたら、ここらでしょうか・・・。
    何か解決の手助けになれれば幸いです。

Message

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

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

  関連記事

no image
[Ktai Entry] EWWW Image Optimizerで画像のExifデータの削除やリサイズがされない

これは恐らくEWWW Image Optimizerが画像処理を行うタイミングの …

no image
wordpressのパーマリンクは途中で変更しない方が良い理由

ある程度の期間を運用したwodpressのパーマリンクをこれから変更しようと考え …

no image
[WP]query_postsを指定しているとカスタム投稿の一覧が正常に出力されない

何故か沼ったのでメモ。 記事一覧のループ have_posts 前に query …

no image
新しいNextGen Flashviewerの設定方法

というわけで、新バージョンのNextGen Flashviewerではswfファ …

no image
さくらでwordpressにSSLを設定したら重くなった

さくらのレンタルサーバで独自ドメインにSSLを設定したら、何故かwordpres …

NextGEN Galleryのスライドショーに「jwplayer」と表示されるロゴを消したい

JW Image Rotatorのバージョンが3.18だと、上の画像の様に スラ …

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

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

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

※ 2016/04/25 この表示例によってページ数が水増しされてSEO的に悪影 …

no image
Dagon Design Sitemap Generatorのオプションが管理画面の設定に表示されない問題

どうやらrunPHP Plugin for WordPressを有効にしてると、 …

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

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