＞ ＞ ＞ Lightbox JS の Movable Type での不具合を修正する

Lightbox JS の Movable Type での不具合を修正する

Posted at January 15,2006 11:55 PM
Tag：[Customize, JavaScript, Lightbox, MovableType]

昨日エントリーしたLightbox JS で画像を表示するですが、Movable Type のアーカイブページ（カテゴリー・アーカイブ／月別アーカイブ／エントリー・アーカイブ）で正常に動作しないようでした。すいません。

下記に対処方法を記しておきます。

１．lightbox.css / lightbox.js の修正

カテゴリー・アーカイブ／月別アーカイブ（日別・週別も同じ）／エントリー・アーカイブの各ページのパスが loading.gif のパスと異なるため、lightbox.js の193行目で下記の JavaScript エラーが発生し、正常に読み込めないようです。

objLoadingImage has no properties

とりあえず loading.gif のパスにドメインを追加することでOKになりました。具体的には、当サイトの場合であれば、lightbox.js の36行目辺り

var loadingImage = 'loading.gif';
var closeButton = 'close.gif';

を

var loadingImage = 'http://www.koikikukan.com/loading.gif';
var closeButton = 'http://www.koikikukan.com/close.gif';

に変更します。なお試験サイトではドキュメントルートからのパス設定でも大丈夫でした。

またIEでは overlay.png のパスもきちんと設定しないと正常に読み込めないため、lightbox.css の14行目と20行目にある overlay.png にドメインを追加します。当サイトの例は下記の通りです。

#overlay{ background-image: url(http://www.koikikukan.com/overlay.png); }
 
    * html #overlay{
    background-color: #333;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.koikikukan.com/overlay.png", sizingMethod="scale");
    }

lightbox.css の内容を styles-site.css に転記している場合（かつ普通に再構築対象にしている場合）や、ligjtbox.css をインデックステンプレートとして登録している場合は、<$MTBlogURL$>overlay.png とすればOKです。こちらも試験サイトではドキュメントルートからの設定で正常に読み込めました。

２．エントリー・アーカイブの修正

エントリー・アーカイブは１項の他に、onloadイベントハンドラとの競合で正常に動作しないという報告を下記のサイトで頂いています。ありがとうございました。

CEFA::Blog：Lightbox JSを組み込んだのだけれど
caramel*vanilla：lightbox.jsでサムネイルをCOOLに拡大表示してみる

対処は、安直ですがエントリーアーカイブの onload イベントハンドラ（赤色部分）

<body class="…" onload="individualArchivesOnLoad(commenter_name);>

を一旦削除して、

<body class="…">

とし、エントリー・アーカイブの一番最後に

<script type="text/javascript">
<!--
individualArchivesOnLoad(commenter_name);
//-->
</script>

を追加しています。この individualArchivesOnLoad は、サイン・イン中であれば名前とメール欄を非表示にし、各フォームにCookie情報を埋め込む動作を行っているだけですので、この対処で問題ない筈です。

ちなみに onload イベントハンドラに2行書いたりしてみましたがNGでした。

３．ローディング画像・背景画像が表示されない場合

１項で修正した loading.gif のURL、および overlay.png のURLをブラウザのアドレス欄に直接入力してください。画像が表示されない場合、設定したURLが誤っていますので、１項で設定したURLを修正してください。

2006.03.21 追記
１項の close.gif の設定、および３項を追記しました。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ Lightbox JSを組み込んだのだけれど from CEFA::Blog
Lightbox JSを組み込んでみたけれど…残念無念。何とか上手い方法は無いものですかね。 [続きを読む]

Tracked on January 16, 2006 5:34 PM

≫ Lightbox JS~ポップアップさせずにサムネイル画像を表示 from 路上の風景~landscapes on the road
そこで巷では有名らしい「Lightbox JS」を実装してみました．とてもいいです．Lokesh Dhakarさんのサイトにも実装方法の説明がありますが，... [続きを読む]

Tracked on January 20, 2006 12:05 AM

≫ Lightboxで画像を演出 from Look at ...
サムネイル画像をクリックして、新規ウィンドウではなく同一ウィンドウ内でカッコ良く... [続きを読む]

Tracked on February 8, 2006 10:03 PM

≫ クールな画像表示の演出者 Lightbox JS from PANORAMA REview
ローディングアニメーションがまるでFlashような感覚。 どうやらjavascr... [続きを読む]

Tracked on February 14, 2006 11:09 PM

≫ MovableType3.2にLightbox Plusを入れてみる from おじさんの備忘録
画像をクールに見せるためのスクリプトLightboxに拡張機能が追加されたLightbox PLUSをMT3.2に組み込んでみた。 [続きを読む]

Tracked on February 24, 2006 7:02 PM

≫ ・・・なおった。 from RIT's photo-blob
Lightbox JS の Movable Type での不具合を修正する　?　... [続きを読む]

Tracked on March 6, 2006 10:26 AM

≫ Lightbox JS (2) from blog in a fog
Lightbox JSはなんか割と流行ってるらしいですね。 いいもの見つけたと思... [続きを読む]

Tracked on March 20, 2006 1:00 AM

≫ 画像に関するカスタマイズ。 from Cross-K
今まで苦戦してきたカスタマイズに終止符を打つことが出来ました♪ お陰でテンプレー... [続きを読む]

Tracked on March 28, 2006 3:43 PM

≫ Lightbox JS を利用して画像表示してみた from ツール・ド・もんち - Tour De MonChi -
先日、画像のポップアップで"Internal Server Error"が発生し... [続きを読む]

Tracked on April 10, 2006 11:53 PM

≫ Lightboxを使ってみる from Not Quick a Nine
最近よく見かけるようになったLightbox JSを導入してみた。 これは、サム... [続きを読む]

Tracked on May 11, 2006 6:48 AM

≫ Lightbox JS from Marrontic
写真の表示をお洒落にしてくれるスクリプト・Lightbox JSを使ってみました... [続きを読む]

Tracked on May 12, 2006 7:39 PM

≫ Litebox と Lightbox from Waviaei
以前、巷で評判のLightboxを入れていました。WordPressの場合、Lightboxの導入を簡単にしてくれるプラグインが幾つか有ります。見た目も... [続きを読む]

Tracked on July 8, 2006 3:51 PM

≫ Lightbox JS を 使ってみる♪ from ++Blog-MELL++
Lightbox JS を 使って 画像を 表示させてみます ▼ の 画像をクリ... [続きを読む]

Tracked on September 3, 2006 4:06 PM

≫ LightboxJSのエントリーアーカイブでの不具合について from magnet :..
　以前からちょっと気になってはいたのですがLightboxJSがエントリーアーカ... [続きを読む]

Tracked on September 24, 2006 7:23 PM

≫ Lightbox JS 2.0 設置 from trial and error ?試行錯誤?
僕のブログにもLightbox JS 2.0を入れてみることにしました。 Li... [続きを読む]

Tracked on October 8, 2006 5:40 AM
コメント

早速のご対応、ありがとうございます。

お願いしてなんですが、遅くまで起きてると、朝が起きれませんよー。（笑）

[1] Posted by Border. : January 16, 2006 3:24 AM

＞Border.さん
こんにちは。
早々の参照＆コメントありがとうございます。
無事に起きれてホッとしてます（笑）。

[2] Posted by yujiro : January 16, 2006 12:44 PM

いつも有益な情報有り難うございます。
とても助かります、感謝！

[3] Posted by keiji : February 15, 2006 11:21 AM

＞keijiさん
こんばんは。
コメント＆トラックバックありがとうございました。
トップページ、素敵なFlashですね！

[4] Posted by yujiro : February 17, 2006 12:56 AM

私はJUGEMのブログサービス利用者ですが、
MTと同じようにbodyのonLoadにある関数（クッキー初期化）が邪魔になってたのでで、
この方法で修正しました。
lightbox.js内の420?430行あたりにあるaddLoadEvent関数を使っています。
正しいかどうかは分かりませんが。間違っていればツッコミください。
<script type="text/javascript" src="lightbox.jsのURL"></script>
<script type="text/javascript">
<!--
addLoadEvent(initval);
//-->
</script>
</head>
<body>

[5] Posted by noisygig : March 9, 2006 4:31 PM

ＪＵＧＥＭの場合
addLoadEvent(initval)
所を、MTの場合
addLoadEvent(individualArchivesOnLoad(commenter_name))
ですかね。自信ない。

[6] Posted by noisygig : March 9, 2006 4:40 PM

＞noisygigさん
こんばんは。
MTについてはまた機会をみて試してみたいと思います。
情報ありがとうございました！

[7] Posted by yujiro : March 9, 2006 10:22 PM

yujiroさん
初めてコメントを書いています。
貴兄のテンプレートやカスタマイズをいつも使わせて頂いています。私のような老人にもわかりやすい丁寧な説明にいつも感激です。　謝謝！
先日来、lightboxの設置に時間を割いております。（隠居の身なので時間は惜しくはありませんが）　いきがってタイトル・バナーにFlashを入れたのですが、手当をするまでは、Flashがoverlayの一番上の画面に表示され困りました。それは解決したのですが、「Lightbox JS の Movable Type での不具合を修正する」のとおり、アーカイブ・テンプレートを修正してもうまく表示されません。（他のテンプレートではうまく機能しています）　どのあたりを探れば良いか、何かアイデアがあれば、お願いします。IE6.0　MT3.2-jaです。
　

[8] Posted by n_shuhei : March 11, 2006 2:46 PM

＞yujiroさん
　何度もアーカイブ・テンプレートなどやソースコードを見ていますと、全く単純なミスをしておりました。（構文エラーです）　「JavaScript　エラーを解消する」が役に立ちました。ありがとうございました。
　64の半ばとなりますとアルツハイマーが進行しているようです。歳はとりたくないものです。
　恥ずかしいのでできれば、前のコメントとこのコメントを削除ください。
　Ｆｌａｓｈを隠す部分については、あまりそのようなコメントはないので、多少みなさんのおやくにたつかもしれません。
　お騒がせしました。

[9] Posted by n_shuhei : March 12, 2006 12:47 PM

＞n_shuheiさん
はじめまして。
テンプレートご利用＆ご連絡ありがとうございます。
不具合の方は無事に解消されてよかったです。
（差し支えなければ先のコメントは他に方にも役に立つと思われますのでこのままとさせてください）

あと勝手ながらBlogPeopleに登録させて頂きました。
それでは、今後ともどうぞよろしくお願い致します。

[10] Posted by yujiro : March 14, 2006 12:47 AM

＞yujiroさん
コメントへの返信ありがとうございました。
私のようなど素人のサイトをBlogPeopleに登録されるのは恥ずかしいですが、歳に免じて許して頂きます。
　ところで、このスレッドには、適していないかもしれませんが、あるときから「小粋空間」の画面が崩れてしまう現象が起きています。（下のURL）　家庭内LANの他のPC（同じように、XP　IE6.0）では、正常に出ています。また、画面崩れが起きたPCで、Netscapeで試してみると正常に表示されています。文字コードも確認しましたが、UTF-8になっています。知識が乏しく原因がつかめません。どのあたりをチェックすれば良いかご教示いただければありがたいです。
崩れた画面

[11] Posted by n_shuhei : March 14, 2006 10:16 AM

＞n_shuheiさん
こんばんは。
ご質問の件ですが、ブラウザのキャッシュ・一時ファイル・履歴をそれぞれ一旦クリアしてみて頂けますでしょうか。
メニューの[ツール]-[インターネットオプション]-[全般]タブの[インターネット一時ファイル]の「Coookieの削除」と「ファイルの削除」および[履歴]の「履歴のクリア」がそれに該当します。
履歴のクリア→ファイルの削除→Coookieの削除の順で順番にお試しください。

以上です。
それではどうぞよろしくお願い致します。

[12] Posted by yujiro : March 15, 2006 1:01 AM

＞yujiroさん
早速のご回答ありがとうございます。
ご教示頂きましたように、すべて実施し、再起動までいたしましたが、改善されないようです。？？？
　文字コードをEUCにしますと３カラムはOKなんですが、文字化けを起こしています。Shift-JISですと何も表示されません。
　貴兄のテンプレートを使った他のMT　blog（例えば、H．Fujimotoさんの３カラムや私の２カラムなど）は、正常に表示されます。
　今のところ、Netscapeで正常に表示されていますので急ぎませんが、他に探索すべき事項があればご教示ください。いつもお願いばかりですみません。

[13] Posted by n_shuhei : March 15, 2006 9:23 AM

＞yujiroさん
何度も済みません。　あるときから「小粋空間」の画面が崩れてしまう現象のある時というのが特定できました。IEで画面が崩れているPCとは異なるPC（それまでは、IEで「小粋空間」が正常に表示されていた。）で、「サイドメニューの折りたたみ」→「ゆっくり折りたたむ」をクリックしたときに起きました。その後、ご教示の方法で履歴などのキャッシュなどをクリアしても元に戻りません。最初に起きた現象も、それが起因していることを思い出しました。
　Netscapeでは、元に戻らなくなると困りますので、試していませんが。
　原因が「サイドメニューの折りたたみ」にあるように思いますので、そこのコメントにした方がよかったかもしれませんが、前の続きですので、このスレッドにコメントしました。
　私だけが起こっている現象でしょうか。
　

[14] Posted by n_shuhei : March 15, 2006 12:48 PM

　何度も、なんどもすみません。
画面が崩れる件で、ご教示の方法では上手くいかなかったことを報告させてもらいましたが、エクスプローラでTemporary Internet Filesの中身を削除しますと上手くいきました。誠に申し訳ありませんでした。
　また、「サイドメニュー折りたたみ」→「折りたたみ」のコメントを閲覧していますと同じ現象が起きた方（てるてるさん）がおられた用です。てるてるさんの対処法はよく分かりませんでしたが、上記の方法で治りました。お騒がせばっかりしている年寄りで申し訳ありません。このコメントは、回復したIEから送信しました。

[15] Posted by n_shuhei : March 15, 2006 1:43 PM

＞n_shuheiさん
こんばんは。
何度もコメントいただき恐縮です。
ご指摘のリンクをクリックしたところ私も同様の事象が発生しました。
リンク先のスタイルシートの設定に不具合がありましたので修正しておきました。

ご迷惑おかけして申し訳ありませんでした。

[16] Posted by yujiro : March 16, 2006 1:08 AM

初めまして。全く予備知識も無くMTに挑戦している不届き者です。
こちら様のお陰で何となく形に出来るブログが出来始めており、感謝しております。

さっそくですが、lightboxを設置してみようと思い何度か挑戦しているのですが、何故だか『loading』と『overlay』の画像が出ません。
どのようにしたらいいのでしょうか？
皆さん、設置は簡単だと仰ってるのにこんな事を伺うのは非常にお恥ずかしいのですが、どうかご教示下さいませ。宜しくお願い致します。

[17] Posted by type_63 : March 20, 2006 1:57 PM

すみません、間違えてホームページのURLを・・・(汗
マイド、こんな感じなので、レベルが分かるってもんです。

すみませんでした。。。。

[18] Posted by type_63 : March 20, 2006 2:03 PM

ちゃんと読んでいなかったようで申し訳ありませんでした。
焦って気が急いていましたすみません。
きちんと読んでもう一度挑戦してみます。

失礼します。

[19] Posted by type_63 : March 21, 2006 5:33 PM

＞type_63さん
こんばんは。
ご質問の件ですが、overlay.png と loading.gif に設定されたURLを再度ご確認ください。URLが正しければブラウザにURLを直接入力すれば画像が表示されます。

以上です。
それではよろしくお願い致します。

[20] Posted by yujiro : March 22, 2006 12:51 AM

こちらのサイトを参考にLightbox JSをMT3.171-jaに導入してみました。

無事に動作したのですが、毎回「rel="lightbox"」を入れるのが面倒臭いですね。。。
これをデフォルトで挿入させるにはどうしたら良いのでしょうか？

ご存知でしたら教えて頂けませんか？

[21] Posted by shigeru : March 22, 2006 1:33 PM

＞shigeruさん
こんにちは。
Lightbox JS の rel 属性を自動付与するをエントリーしましたので参考になれば幸いです。
それではどうぞよろしくお願い致します。

[22] Posted by yujiro : March 23, 2006 1:33 PM

＞yujiroさん
いつもお世話になっております。
lightbox.jsが2.02へバージョンアップされているのでインストールを試みました。テストサイトでは、ほぼ上手くいったので、本番でそれと同様なインストールを試みましたが上手くいきません。サイトでご覧の通りです。
　Lightbox.js 2.02にupgradeされる予定はありませんか？prototype.jsなどが出てきて1.0とは様相が異なるようです。yujiroさんの開設は丁寧なので期待しています。

[23] Posted by n_shuhei : May 11, 2006 2:43 PM

＞n_shuheiさん
こんばんは。
2.02についてはいずれエントリーしたいと思います。
申し訳ございませんがお待ちください。

[24] Posted by yujiro : May 12, 2006 12:37 AM

報告！

3.32 から 3.33 に アップデートしたら 動かなくなりました(^-^;

[25] Posted by ＭＥＬＬ : September 26, 2006 11:04 PM

＞ＭＥＬＬさん
こんにちは。
情報ありがとうございました！

[26] Posted by yujiro : September 27, 2006 1:57 PM

　MELLさんのところでは3.33にアップデートしたら動かなくなったとの事ですが、うちでは変わりなく動作してくれています。
　Litebox のバージョンは1.0です。

[27] Posted by 路子 : September 28, 2006 5:33 PM

＞路子さん
こんばんは。
こちらも情報提供、ありがとうございました！

[28] Posted by yujiro : September 29, 2006 12:40 AM

n_shuhei です。

いつもお世話になっております。

このエントリーと直接的に関係していないのですが、相談する適当なサイト（エントリー）がなく、ここにコメントを置かせてもらいました。

問題は、ＭＴメインページで起こっています。
IE7.0 でＭＴメインページのみ、背景の overlay が黒くなりません。
http://n-shuhei.net/atelier/

環境は、
　lightbox2.03.3
　MT4.1
　テンプレート：two-column-liquid-right　(小粋空間）
　WindowsXP　SP2
　IE7.0

WindowsVista、Mozilla　では、このような現象は起こりません。
CSS　の問題ではないかと思いますが、対処法がよくわかりません。
どのあたりをチェックすればよいかご教示頂ければ幸いです。

[29] Posted by n_shuhei logo : September 11, 2008 9:06 AM

＞n_shuheiさん
こんばんは。
ご返事遅くなってすいません。
事象は確認できましたが、現在のところ原因不明です。

もし何か分かりましたら別途エントリーしたいと思います。
それではよろしくお願い致します。

[30] Posted by yujiro logo : September 16, 2008 1:35 AM

＞yujiro　さん

お返事ありがとうございます。

いろいろいじっているうちに、運営している　３つのブログの内　１つのブログで上の条件でも、背景の overlay が黒くなっているのに気づきました。
それで、テンプレートモジュールの「ヘッダー」をよくよく比較してみると、<div> タグを閉じるのがひとつ多すぎたようです。
<div id="box" class="clearfix"> タグは、　テンプレートモジュールの「フッター」で閉じられているのですね。
いつもながら、初歩的なミスでご迷惑をおかけしました。

[31] Posted by n_shuhei logo : September 21, 2008 9:41 AM

n_shuhei 追記です。

先に書いた　divタグの件で再現性があるか確認しましたところ、再現性がありません。<div>タグの　closeが多くても　overlay　は黒くなるようです。
ということで、原因不明ですが、とりあえず修復しております。
なんとなくすっきりしないのですが。
お騒がせしました。

[32] Posted by n_shuhei logo : September 21, 2008 1:04 PM

＞n_shuheiさん
こんばんは。
ご連絡＆情報ありがとうございました。
同じ事象で質問があったときの参考にさせて頂きたいと思います。

[33] Posted by yujiro logo : September 23, 2008 12:15 AM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）