Embedded Files
MovableTypeでLightBoxを使いたいです。
■LightBoxとは
Ajaxを利用して画像を表示するライブラリ。だそうです。
サムネイル画像の拡大表示によく利用されます。
画像をクリックすると、小窓が開き、背面はブラックスクリーンに。
ex.>アームス
http://www.arms-net.com/arms_beta/takanoyu/
■ソースの設定
LightBoxだけど、SlimBox2です。
Slimbox2はjQuery版のLightBoxだそうで。
Lightboxと同じ動作や機能がありながら軽量で、設置が簡単です。って誰かが言ってた。
[ 1 ]ダウンロードする。
http://www.digitalia.be/software/slimbox2#download
[ 2 ]ファイルをアップロード
以下のファイルのみをアップロード
mt
└ mt-static
└ slimbox2
├ css ┬ closelabel.gif
│ ├ loading.gif
│ ├ nextlabel.gif
│ ├ prevlabel.gif
│ └ slimbox2.css
│
└ js ─ slimbox2.js
「mt/mt-static/」に「slimbox2」フォルダを作った。
どこでもいいけど、たぶんこれが妥当
[ 3 ]ヘッダー内に追記
<!-- Slimbox2 -->
<script type="text/javascript" src="<$mt:StaticWebPath$>jquery/jquery.js"></script>
<script type="text/javascript" src="<$mt:StaticWebPath$>slimbox2/js/slimbox2.js" ></script>
<link rel="stylesheet" type="text/css" href="<$mt:StaticWebPath$>slimbox2/css/slimbox2.css" media="screen" />
<!-- Slimbox2 -->
MT5デフォルトjquery.jsがあるらしいので使ってみた。
まぁ、パスはアップロードした場所によって、かえてくれ。
[ 4 ]htmlに記述
rel="lightbox" を追記するだけでOK。
<a rel="lightbox" href="<$MTBlogURL$>img/takanoyu/takanoyu600_01.jpg"><img alt="外観" src="<$MTBlogURL$>img/takanoyu/takanoyu_01.jpg" width="110" height="83" /></a>
[ 4 - 1 ]グループにして、NEXTとPREV表示
rel="lightbox-number"
rel="lightbox[number]"
numberは共通wordであれば何でもいいらしい。
こうすると、画像マウスhoverでNEXTとPREVを勝手に表示してくれる。便利。
/* !!!!全体に適用するとLightBoxに影響するので注意!!!! */
このCSSを使うと、NEXTが挙動不審になるので、全適用はやめよう。
マウスhoverでリンクをちょっとずらすCSS。
a:hover {
position:relative; top:1px; left:1px;
}
[ 4 - 2 ]画像の説明文(タイトル)を表示
<a rel="lightbox[number]" href="***.jpg" title="ここに説明文を入力">
文字の大きさとかは、slimbox2.cssで変更してくれ。
JavaScriptのオプションはこちらを参考。
http://shanabrian.com/web/library/slimbox.php
■MT 画像の挿入にオプションを追加
メニューに「LightBoxで表示する」を追加するプラグイン。
Junnama Online様
Page updated
Google Sites
Report abuse