kanokolab blog

前回から悩みに悩んでいる、more以下の文章をAjaxで読み込むとLightboxが働かない、の第二回目でございます。
うまく行きかけたんですが、footnoteがはみ出す事態にお困りです、私。
しかしながら、どうにか解決した模様。Ajaxified Expand Post NOWでLightboxが動かないよ〜という方、必見でございます。

footnoteが無い方はLightboxとmoreのAjax(1)footnoteにコケっと。で紹介したAjax-Spoiler Plugin v0.8であっさり解決しますのでそれでもいいかと思いますが、個人的には以下の方法をおすすめします。なんせWPのデフォルト機能に乗っかっているのでやり方がスマート。
ですが、私は生まれたての子鹿のようにぷるぷる震えているようなどがつく素人ですので、以下の方法で何か起こっても保証やら対処は致しかねますm(_ _)m

さて前回の続きですが、Ajax-Spoiler+Lightboxでfootnoteがはみ出す事態に、色々と試してみては効果がなく、Ajax-Spoilerをどうにかしよういうことには限界を感じ始めた私。

といいますのも、要は
Ajax-Spoiler Plugin v0.8だと記事の折りたたみ制御が記事の編集画面からしか命令できないという事　=
footnoteを編集画面に取り入れる、又はそれに近い状況を作らなければならない

ということなんですよね...今の私にはあまりにもハードルが高すぎ晋作ます。出来たとしてもやり方が全然スマートじゃありません。

そもそもAjaxified Expand Post NOWのほうが、今私がやりたい事を達するにはスマートな方法でしょうから、こちらをいじってLightboxを使えるようにしたほうがいいんですよね。

でも、みんな投げている様子...相当難しい事なんだろうな...とハナから諦めていたんですが、ここまで来ますとその事を考えざるを得ません。
プラグイン関係で探った所では皆投げてたわけなので、「ajax,Lightbox」で検索検索ぐぐぐる...

するとblog@slightlyblueさんのところに記事が!

うお〜〜〜これだよ〜〜〜感謝感激です。

詳細は記事をどうぞ。

ということで、
initialize を呼びなおしてみました。

何かイニシャライズすればいいのね、わかったわかった。やり方わかんないけど(泣)

ということで今までゴリゴリPHPを無理矢理改変してきたわけですので、同じ勢いでっと。
Lightboxの中に「myLightbox」という何かしらの定義があるという事を確認して、Lightboxは基本的にJavaScriptなわけだから、Ajaxified Expand Post NOWのajaxified-expand-post-now.phpの中のJavaScriptっぽいところでひっかかってんのよねきっと、ということで

Ajaxified Expand Post NOWのajaxified-expand-post-now.phpを
変更前

変更後

とやってみます。

...どうよ動よ、動(どう)動くのよ？...

きゃ〜！出るやんけ〜〜〜！！！...でもLightboxの形がなんか変...(汗)
何度かやっていると正常動作しておりますね...うむ、さっきの形が変だったのは見なかったことにしよう。
お、しかもmore以下をAjaxで読み込んだ時はfootnoteに移動するスムーススクロール¹がスムースじゃないスクロールになってる...これって元々そうだったんだっけ...???まあここはいいか。

というわけであっさり解決でございます。まとめ。

・Lightboxは、ページが読み込まれた時に、ページ内の全部のアンカータグを探して、条件に合うもの（relタグだとか）があったら、onclick イベントを登録²するらしいので　Ajaxで後から読み込んだ画像には適用されない様子。
・その為、Ajaxで後から読み込んだ画像にLightboxを適用させるには 「myLightbox.initialize();」して、onclickイベントを登録しなおす的な事をしてあげないといけない。

要はLightboxがどういうふうに働くのかを解っていないとダメだったんですね。
はぁ〜とりあえず解決解決っと。

1. スムーススクロールの様子を見たい方は、脚注のありそうなエントリーのタイトルを押してエントリーごとの画面で見て頂くとスムーススクロール〜 [↩]
2. blog@slightlyblueさんの記事より引用 [↩]