• Home
• How to use
• Contact

lightbox2プラグイン

HOME > プラグイン > lightbox2プラグイン

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

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

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

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

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

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

lightbox2プラグインの基本タグ

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

編集の手順

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

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

プラグインダウンロード

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

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

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

プラグインアップロード

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

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

画像のアップロード

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

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

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

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

タグを作成する

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

タグの書き方

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

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

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

動作確認

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

タイトルを目立たせたい場合

lightbox2プラグインは、ページ下部にタイトルがつきます。
すっきりしたデザインですが、文字が小さくて、あまり目立ちません。
また、画像が複数あることが分かりにくいのも、欠点です。
用途によっては、greyboxプラグインの方が、使い勝手がいいこともありますので、そちらも参考にしてください。
タグの設定方法は全く同じですので、見た目と利便性だけで選んでいいと思います。


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

powered by Quick Homepage Maker 4.53