• Home
• How to use
• Contact

greyboxプラグイン

HOME > プラグイン > greyboxプラグイン

画像のポップアップ表示 greyboxプラグイン

画像をホームページで表示させるのに、そのまま画像を貼り付けてもいいのですが、詳しく見せる為に大きく表示させると、ページが重たくなってしまいますし、小さいとよく見えません。

このページでは、greyboxプラグインという画像のポップアップ機能の使い方を説明します。

下の画像をクリックしてみてください。

クリックした画像がポップアップされ、上部の矢印を使って、その他の画像をページをめくるように閲覧する事ができます。
このプラグインを使うと、見栄えよく画像を拡大表示させることができ、フォトアルバム作成や、商品の詳細画像などにも最適です。

同じようにポップアップができるlightbox2プラグインもあります。
詳しくは画像をポップアップで表示するをご覧ください。

greyboxプラグインの基本タグ

&greybox(img/画像ファイル名,title,group){label};

編集の手順

1. プラグインダウンロード
2. プラグインアップロード
3. 画像のアップロード
4. 編集タグの設置
5. 動作確認

当サイトご利用の際は、ご利用方法をまずご覧ください。

プラグインダウンロード

このプラグインは無償版の方は、標準ファイルではありませんので、自分でダウンロードして、サーバーにアップロードする必要があります。
（有償版は、全てのプラグインがあらかじめインストールされているそうです。）

プラグインのダウンロードファイルはＱＨＭのホームページにありますが、このサイトでもご用意しましたので、必要な方は、下をクリックして、ＰＣに保存してください。

ダウンロードされたファイルを解凍すると、greybox というフォルダと greybox.inc.php というファイルが入っていますので、確認してください。

プラグインアップロード

ＦＴＰなどで、サーバーにアクセスします。
サーバー側の plugin フォルダに先ほどダウンロードしたファイルをアップロードします。

最初、プラグインフォルダには、php ファイルしか入っていないので、一瞬、戸惑ってしまいますが、
greyboxのフォルダもフォルダのまま同じ所（同じ階層）にアップロードしてください。

画像のアップロード

ポップアップで表示させたい画像ファイルを用意します。
画像の大きさがそのままポップアップ画面に表示される大きさになりますので、アップロードの前に好みの大きさに修正してください。

それを、サーバー側にアップロードするのですが、そのままトップ階層にアップロードすると、後々ファイル管理が大変ですので、画像用にフォルダを作るのをおすすめします。

ここでは、トップ階層（skinフォルダなどと同じ並び）にimgという名前のフォルダを作ったものとして、説明します。

トップ階層に用意したimgフォルダの中に、用意したimg画像をアップロードします。
画像が多い場合、分類する為にimgフォルダの中にさらにフォルダを作ってもいいと思います。

タグを作成する

ポップアップを設置したいページの編集画面を開けてください。

タグの書き方

&greybox(img/画像ファイル名,title,group){label};

• title : 画像のタイトル
  ポップアップページに表示されるタイトルになります
  お好きなタイトルを入れてください。
• group : グループ名。省略可。
  同じグループ名で設定したものは、ポップアップページのボタンで移動できます。
  同ページ内であれば、同じグループ名の画像は全てポップアップされます。
  グループ名を省略すれば、一つのリンクに一枚ずつのポップアップになります。
• label : リンクさせたい画像や文字。
  画像にリンクさせる場合は、QHM内に画像をアップロードしてください。

使い方ごとに分けた、タグの見本をいくつかご用意していますので、
詳しくはgreybox見本一覧をご覧ください。

動作確認

動作確認はかならずしましょう。
枚数が多い場合でも、全ての画像を開いて、正常にリンクが貼られているか、確認しましょう。
ファイル名を間違えると正常に機能しません。
ファイル名はコピー＆ペーストで入力する癖をつけることにより、誤入力を減らす事が出来ます。

長い説明文を入れたい場合

greyboxプラグインは、ページ上部にタイトルがつきます。
ポップアップページに、画像の説明文を長く入れたい場合は、タイトルに直接書き込むことが可能です。
しかし、あまり長くしてしまうと、ページ送り用のボタンの位置がずれたりする事があります。
そんな場合は、lightbox2プラグインの方が、キレイに長文を見せる事が可能なので、そちらをご利用ください。
タグの設定方法は全く同じですので、見た目と利便性だけで選んでいいと思います。

ボタンの変更

greyboxプラグインを作動させると、上部の送りボタンが左右で異なっている事に気づくと思います。
　　　

↑こんな感じですね。なぜ、左右で違うのかは、謎です・・・（笑）
どちらかの形のボタンで統一したい方は、以下をご覧ください。

左側のボタンを使いたい方

上記の画像を右クリックして、next.gifという名前でPCに保存してください。
もしくは、greybox フォルダ内にある、画像ファイル prev.gif を180度回転させて、next.gifという名前で別名保存してください。
その後、サーバーにアクセスしてplugin>greybox フォルダ内にある、next.gifに上書きアップロードしてください。

右側のボタンを使いたい方

上記の画像を右クリックして、prev.gifという名前でPCに保存してください。
もしくは、greybox フォルダ内にある、画像ファイル next.gif を180度回転させて、prev.gifという名前で別名保存してください。
その後、サーバーにアクセスしてplugin>greybox フォルダ内にある、prev.gifに上書きアップロードしてください。


－Special Thanks－
プロカメラマン撮影の無料写真素材・フリー画像素材のリンクスタイル

powered by Quick Homepage Maker 4.53