「迷える子羊」さんでLightbox設置が紹介されていましたので、
少し捻って（？）SlimboxをWDPに設置する方法を紹介。
※2007/10/27 IE6対策について追記
【SAMPLE】 ※Photo from BurningWell
【参考サイト】
・Slimbox - mootoolsベースのLightboxライブラリ。（buena suerte!）
・slimboxを使ってみたい（m・fami）
Slimboxとは
Slimboxとはmootoolsというjavascriptフレームワークをベースとした
Lightboxクローンです。
Lightboxと同じ動作や機能がありながら軽量で、設置が簡単です。
動作に同じ rel="lightbox"を仕様しているため
lightboxからslimboxに移行しても、記事の書き換えが必要ありません。
Lightboxでは prototype.js + lightbox.js と組み合わせていましたが、
Slimboxでは mootools.js + slimbox.js のように組み合わせます。
mootoolsを使用して他にも様々な表現・機能が追加できます。
このサイトでも使用中の別窓表示(XHTMLでのtarget="_blank"代用)も
続いて紹介する予定です。
mootools & Slimboxの設置
必要なファイルをダウンロード
１．Slimbox - Downloadより、slimbox.zipをダウンロード。
２．mootoolsを以下にチェックを入れてダウンロード。
- Core: Moo, Utility
- Native: Array, String, Function, Element
- Window: Window.Base, Window.Size
- Effects: Fx.Style, Fx.Styles (optionally Fx.Transitions)
面倒くさい、よく分からない、今後もmootoolsを使い倒すという方は
全部にチェックを入れてしまっても問題ありません。
最後のほうにあるCompression（ファイルの圧縮率）は
- Packer Compression(圧縮レベル・高)
＝ ファイルサイズが小さいがソースが見難い - No Documentation
- No Compression(圧縮レベル：低)
のうち、お好きなものを選んでください。
特にこだわりがない場合、
初期チェックのPacker Compressionのままで問題ありません。
ちなみに全部にチェックを入れた場合、
mootools.jsは高圧縮で40KBほどですので、prototype.jsと
ほぼサイズは変わりません。
３．ダウンロードしたmootools-release-1.xx.jsを、
名前が長いのでmootools.jsにファイル名変更。
ファイルのアップロード
１．slimbox.zipを解凍。
slimbox
├ js ─ slimbox.js
└ css ┬ slimbox.css
├ closelabel.gif
├ loading.gif
├ nextlabel.gif
└ prevlabel.gif
上記のようなフォルダ構成で解凍されます。
「js」フォルダからはslimbox.jsを取り出しておきます。
２．slimbox.jsとmootools.js、
「css」フォルダ丸ごとを「diarypro/skin」フォルダに入れる。
skin
├ slimbox.js
├ mootools.js
└ css ┬ slimbox.css
├ closelabel.gif
├ loading.gif
├ nextlabel.gif
└ prevlabel.gif
のように配置できればＯＫ。
３．「diarypro/skin」フォルダ内、header.htmlをエディタで開き、
<head>～</head>内に次のタグを挿入。
<script type="text/javascript" src="${INFO_URL}skin/mootools.js.gz"></script>
<script type="text/javascript" src="${INFO_URL}skin/slimbox.js"></script>
<link rel="stylesheet" href="${INFO_URL}css/slimbox.css" type="text/css" />
「css」フォルダ名を変えた場合は、css/slimbox.cssのURLを
それにあわせて変えてください。
４．HTMLの書き出しを行っている場合、index.htmlを使用中の方は
Web Diary Proにログインし、「サイトの再構築」を行ってください。
slimboxを使ってみよう
使い方は簡単、画像へのリンクに rel="lightbox"を加えるだけです。
例）ファイル１：サムネイル、ファイル２：表示したい画像のとき
<a href="＄FILE2_path" rel="lightbox">＄FILE1</a>
とすると、ファイル２が記事最初のサンプルのように表示されます。
例２）ファイル１：サムネイルＡ ファイル２：画像Ａ
ファイル３：サムネイルＢ ファイル４：画像Ｂ
<a href="＄FILE2_path" rel="lightbox[cg1]">＄FILE1</a>
<a href="＄FILE4_path" rel="lightbox[cg1]">＄FILE3</a>
のように書くと、lightbox[cg1]とついた画像（Ａ～Ｂ）が連続で見れるようになります。（slimbox本サイトのデモ IMAGE SET 参照）
SlimboxのIE6対策
SlimboxはIE6では正常に動作しません。（メインの画像表示はできるが、
背景の半透明黒ゾーンがハンパにしか表示されないバグ）
解決するには２通りのパターンがあります。
<?xml version="1.0" encoding="utf-8"?>の削除
header.html最上部にある<?xml version="1.0" encoding="utf-8"?>を削除すると、IE6でも完全に動くようになります。
この記述はIEと相性が悪いときがあり、これを記述していない
XHTMLはちょくちょく見かけます。
DOCTYPEの前にXML宣言があるとバグが生じる仕様のようです。
綺麗なソースにこだわるのでなければ、一番てっとり早い解決法…
なのですが、折角WDPは綺麗なソースを書いてくれるので、少々
もったいなくあります。
【参考】
・標準準拠モードと後方互換モード・DOCTYPE宣言について（小粋空間）
IE6のみSlimboxを起動させない
header.htmlに追加したjsファイル、cssファイルのリンクをIE6では
読み込まないようにします。
<head>～</head>内の記述を次のように変えます。
<![if ! IE 6]>
<script type="text/javascript" src="${INFO_URL}skin/slimbox.js"></script>
<link rel="stylesheet" href="${INFO_URL}skin/slimbox.css" type="text/css" />
<![endif]>
こうすると、FirefoxやOperaではSlimboxが起動しますが、IE6では起動せず、設置前の状態で画像が表示されます。
ソースの正しさは保持できますが、いまだ使用ブラウザの半数以上を占めるIE6ユーザーを切り捨てるのは辛いですね
■陽子 [H] ... 2007/10/29（月） edit・delete
こんにちは、自サイトで設置の際にはこちらのTipsにかなりお世話になっています。
ええと、このページのサンプルですと、MacOSX10.4・Safari2の環境でSlimboxが起動しません（普通の画像リンクになります）。同じ環境でもFirefoxはちゃんと起動します。で、Slimbox配布元のサンプルは上記Safariでも起動します。未導入で何もわかっていないのですが、とりあえず状況のみお知らせします。