Lightbox JS

先日、画像のポップアップで”Internal Server Error”が発生したので、もう一つの手法として”Lightbox JS”を試してみることにしました。
左の画像をクリックしてみて下さい、すると、こんな感じで表示されます。
このイメージ、個人的に気に入ったので、使ってみることにしました。


設置までの流れを備忘録も兼ねて下記に記述。
1.ファイルのダウンロード
ここ Lightbox JS から必要なファイルをダウンロードします。
ダウンロードするファイルはページなかほどにある

lightbox.js – the important stuff
lightbox.css lightbox.css – basic style and tricky PNG support
overlay.png overlay.png – 80% opacity, black tile used to create shadow
loading.gif loading.gif – mock status bar used in examples above
loading.gif close.gif – ‘X’ graphic placed in top-right corner

上記の5ファイルを任意の場所に保存して下さい。
2.ファイルのアップロード
ダウンロードした5ファイルをindex.php(index.html)と同じディレクトリへアップロードします。
3.スクリプトおよびスクリプト用スタイルシート(CSS)の組み込み
各テンプレートの<head>~</head>の間にスクリプトとスクリプト用スタイルシート(CSS)を組み込みます。

<script type="text/javascript" src="<$MTBlogURL$>lightbox.js"></script>

上記がスクリプトで下記がスクリプト用スタイルシート(CSS)です。

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" />

このスタールシート(lightbox.css)の中身をインデックス・テンプレートの中のstyles-site.cssにコピーしてもいけるようです。
4.リンク(rel属性の付与)の設定
Lightbox JS を適用したい画像へ、下記例のようにrel属性を与えます。

<a href="hogehoge.jpg" rel="lightbox"><img src="thumbnail.jpg" alt="hogehoge.jpg" ></a>

これで、大まかな設定は終了です。
詳細な設定方法が下記サイトで紹介されていますので、設置作業にはいる前に一読することを強くお勧めします。
▼参考サイト
小粋空間:Lightbox JS で画像を表示する
小粋空間:Lightbox JS の Movable Type での不具合を修正する
小粋空間:Lightbox JS の rel 属性を自動付与する
追記 2006.04.11
Lightbox JS の rel 属性を自動付与する“の3項で紹介されている、”我楽:coolに画像を表示する”でrel属性の自動付与を実施する場合、プラグイン”Better File Uploader“が設定(利用)されているとCMS.pmで追加・修正した部分がファイルのアップロードに反映されません。
ちなみにこの現象は、ウェブログシステム(CMS.pm)よりプラグインで生成・出力されるタグ等が優先されるためで設定方法の問題ではありません。

関連記事

  1. NO IMAGE
  2. NO IMAGE
  3. NO IMAGE
  4. NO IMAGE
  5. NO IMAGE
  6. NO IMAGE

    2009.12.21

    MySQLを4から5へ
  1. ioka 2006.04.09 7:39am

    これは、イイ?。使いやすい(見やすい?)です。

  2. もんち 2006.04.10 6:02pm

    iokaさん、お久しぶりです。
    なかなか良い感じなので、ちょくちょく画像の表示に使っていきたいと思います。

2006年4月
« 3月   5月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30