Lightbox in Movable Type
lightbox2.0を入れました。
最初は立ち上げるとトップのフラッシュ:flashが優先して表示されてしまっていろいろ調べ
やっと解決できまいした。
lightboxを提供してくれている場所
http://www.huddletogether.com/projects/lightbox2/
インストール♪
ファイルをダウンロードして普通のサイトならイメージ画像、lightbox.css、と４つくらいのjavaファイルをアップロードし、連携させて終了だけど今回はMTなのでで相対パスでスクリプトやcssのリンクを関連付けしてしまうとリンク切れが発生・・・ ここは絶対パスで対応。
もしかしたらMTにすでにプラグインがあったりして。。anyway
修正が必要な箇所
lightbox.js
60行目のConfiguration
var fileLoadingImage = "http://hogehoge.com/images/loading.gif";
var fileBottomNavCloseImage = "hogehoge.com/images/closelabel.gif";
lightbox.css
47行目～54行目
height: 100%;
background: transparent url(http://d-skate.xsrv.jp/img/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://hogehoge.com/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://hogehoge.com/images/nextlabel.gif) right 15% no-repeat; }
done
これで各テンプレート、又は、htmlに関連ずけてあげればOK!
ちなみに
フラッシュを載せた時の例をご紹介します。
ブラウザのせいなのかなぜかはわかりませんがlightboxを使うとflashが優先的に手前に表示されてしまいます。
ここでオブジェクト要素がhtml上にある場合
<object>
<param name="…" value="…" />
<param name="…" value="…" />
<param name="wmode" value="transparent">
<embed src="…" wmode="transparent" />
</object>
pramのvalueに"transparent"（透明）
といれてあげてればflashよりlightboxの方が優先的に表示されます。
僕はjavascriptでフラッシュを読み出すようにしているので同様にjavascriptに記述するだけでした。
楽しいね！下記に参考サイトを載せます。
沢山の知識人の人！ありがとう
