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
正常に稼動していたwordpressがいきなり500内部サーバエラーになったときの解決法

wordpressで管理しているブログがいきなり500内部サーバーエラーになった …

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

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

母親にブログを勧めてから数ヶ月が経った

岐阜の実家に住んでいるオフクロ。 今年で還暦な60歳だがパートフルタイム+家事+ …

no image
wordpressのパーマリンクを懲りずに変更してみた

以前にも挑戦して、失敗というか断念している「wordpressのパーマリンク変更 …

no image
パーマリンクを変更してみた

笑えるほど順位が激減して復帰もしなさそうだったので、戻しました。 SEO評価戻る …

no image
NextGen Galleryの表示方法の説明 – ImageFlow編

NextGen Galleryの外部プラグイン「ImageFlow」の解説です。

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

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

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

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

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

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

no image
Ultimate Google Analyticsではイベントトラッキングが正常にカウントされない

メモ。 恐らくUltimate Google Analyticsが発行するコード …