MovableTypeにLightboxを組み込むテストをしてみます。
運営サイトのルートディレクトリに新規にディレクトリ（例：script）を作成し、lightboxのファイルをアップロード。
ファイル構成
/script
/js
JavaScriptファイル
/images
画像ファイル
/css
CSSファイル
で、今回はテンプレートをいじらずにLightboxを使ってみるテスト。
（テンプレートにいじっておけば、もっと手っ取り早いのでしょうが、面倒くさいので・・・）
運営サイトのルートディレクトリに新規にディレクトリ（例：script）を作成し、lightboxのファイルをアップロード。
ファイル構成
/script
/js
JavaScriptファイル
/images
画像ファイル
/css
CSSファイル
で、今回はテンプレートをいじらずにLightboxを使ってみるテスト。
（テンプレートにいじっておけば、もっと手っ取り早いのでしょうが、面倒くさいので・・・）
ブログ記事の作成の際、リッチテキストなどは使わず、フォーマット「なし」で記述。
まずは、ScriptとCSSを組み込む。
上記を実際はそのまま記述。
で、リンクの設定。
画像を開く
しかしこのままでは、リンク画像は表示されるのですが、「CLOSE」ボタンが表示されてないみたいです。
どうやら、デフォルトでは相対パスで画像を呼び出しているみたいなので、リンク関係が正しくないため表示できないようです。
JavaScript等を修正しないとだめみたいですね。
ということで、まず「/script/css/lightbox.css」を修正。
「images」というところを「/script/images」に変更。（2箇所）
次に「/script/js/lightbox.js」を修正。
同様に「images」というところを「/script/images」に変更。（2箇所）
これだけでオッケーみたいです。
とりあえず、今日はここまで。
まずは、ScriptとCSSを組み込む。
<link rel="stylesheet" href="/script/css/lightbox.css" type="text/css" media="screen" /> <script src="/script/js/prototype.js" type="text/javascript"></script> <script src="/script/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="/script/js/lightbox.js" type="text/javascript"></script>
上記を実際はそのまま記述。
で、リンクの設定。
<a href="http://www.tomo-zone.com/notes/images/2008/09/lightbox_test.jpg" rel="lightbox" >画像を開く</a>
画像を開く
しかしこのままでは、リンク画像は表示されるのですが、「CLOSE」ボタンが表示されてないみたいです。
どうやら、デフォルトでは相対パスで画像を呼び出しているみたいなので、リンク関係が正しくないため表示できないようです。
JavaScript等を修正しないとだめみたいですね。
ということで、まず「/script/css/lightbox.css」を修正。
「images」というところを「/script/images」に変更。（2箇所）
次に「/script/js/lightbox.js」を修正。
同様に「images」というところを「/script/images」に変更。（2箇所）
これだけでオッケーみたいです。
とりあえず、今日はここまで。
コメントする