前回の記事「FC2ブログで「Lightbox 2」を導入する方法 」を基に今度は、「LightWindow」を導入した。

「LightWindow」は、「Lightbox 2」に比べて動画が扱える点や、タイトル以外に画像の説明文などの"Caption"、作者を表示する"Author"などのオプションがあり、「Lightbox 2」より用途が幅広い。

"Caption"に指定した説明文にリンクを含めたり、ポップアップ画面の中にwebサイトそのものを表示することができたりもする。 以下、このブログに導入したので表示サンプルをいくつか載せておく。

導入方法については、後日覚書する予定。
スポンサードリンク


LightWindowについて

LightWindowは、画像をクリックした際に画像をオシャレな別画面にポップアップ表示するLightBoxに似た特殊効果系のライブラリです。

画像だけでなく様々な形式(動画やFlashなど)に対応しています。

IE6で動作しない場合の対応について

IE6ではうまく動作しない場合があります。

ブログテンプレートのxml宣言が原因となっている場合は、テンプレートのxml宣言を修正、もしくは削除すれば動作するようになります。。

XML宣言はXHTMLで記述していく際に宣言が必要となりますが、HTMLの場合は宣言の必要がないのでXHTMLで記述していないのであれば単純に削除で良いです。

LightWindowデモサイト

「LightWindow」の詳細や動画の動作デモは、このサイトを参照してください。

FC2ブログでのデモ

以下に画像を使用したLightWindowのサンプルを紹介します。

画像1つのサンプル

ここをクリック!

複数の画像をスライドショーのように見せるギャラリーのサンプル

image #1
image #2
image #3
image #4

タイトルと説明欄にGoogleへのリンクを設定したサンプル

image #1
webサイトをポップアップウィンドウに直接表示するサンプル Google ホームの表示
スポンサードリンク

  

関連記事