オートページングだとライトボックスが開かない

質問

大量の写真を表示するために、jquery.masonry + infinitescroll を使用しています。
http://masonry.desandro.com/demos/infinite-scroll.html

写真をクリックしたときにライトボックス風にページを表示できるよう↓このようにthickbox.jsを入れているのですが、
<a href="foophp?fileName=filename.png&keepThis=true&TB_iframe=true&height=500" title="" class="thickbox"><img src="filepath/filename.png" width="210" border="0" /></a>

オートページングで読み込んできた部分は、写真をクリックしてもthickboxが開かずにそのまま画面が遷移してしまいます。

■現在の状況
・masonryで写真を敷き詰めるのはできています
・infinitescrollで、スクロールダウンしていくと自動的に次の写真を読み込んで敷き詰めます。これもできています。
・最初に表示されるページ（オートページングではないページ）では、写真をクリックすればthickboxが開きます。
・最初に表示されるページをスクロールダウンして自動的に読み込まれた写真達は、クリックするとthickboxではなく画面遷移します（ブラウザのアドレス欄がその画像のパスになってしまう）

■やってみたこと
・infinitescroll で <div id="container">～</div>を読み込むように指定しているので、２ページ目以降のファイルで、#container　の中でthickbox.js, thickbox.cssを宣言してみました。
<div id="container">
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="all" />
<script type="text/javascript" src="js/thickbox.js"></script>

<a href="foophp?fileName=filename.png&keepThis=true&TB_iframe=true&height=500" title="" class="thickbox"><img src="filepath/filename.png" width="210" border="0" /></a>

</div>
のようにcontainer内に表示してみましたが状況は変わらず、オートページングで読んだページでは写真をクリックしても画面遷移してしまいました。

■解決したいこと
オートページングで読み込まれた写真をクリックしても、画面遷移せずにthickboxを開きたい。

何卒ご教示の程、お願い申し上げます。

回答No.2

fujillin · ベストアンサー

#1です。

＞colorboxを入れてみまして、試しに
＞　　・・・・・・
＞２ページ目以降を読み込み、その画像をクリックするとalertも出ず、
＞ライトボックス風の窓が出ず画面遷移してしまいました

その現象は、多分、thickboxの時と同じ状態ですよね？
初期設定で、
＞$('img').click(function(){ ～～
とした時に存在しているimg要素しか対象にならないというのが原因と思われます。
（多分、thickboxの時もこれが原因であろうと推測します。）

しかし、colorboxの場合は初期設定をユーザが行なえるようになっているのと、表示したい要素を指定して渡せるようになっているので、ライブラリを修正することなく違った設定がをすることが可能になります。

◆まず、#1での回答の方法。
colorboxを読み込んで、通常行なう初期設定を行なう代わりに以下のようなコードを実行。

$(document).click(function(e){
var t = e.target;
if(t.nodeName != "IMG") return;
var a = $(t).closest("a");
var url = a.length?a.attr("href"):$(t).attr("src");
$.colorbox({href:url});
return false;
});

内容は、ドキュメント全体を監視してクリックされた要素がimg要素だったら、直近のリンク要素を調べcolorboxに渡す。
というものですが、ついでにおまけでつけた機能として、祖先にリンク要素がない場合は自分自身をcolorboxに渡すようになっています。
（画像をそのまま縮小表示してサムネイル化している場合などに使えるかと…）

◆jQueryのlive()を利用する方法
（ほとんど同じですが、live()は後から追加された要素も対象にしてイベントをセットできる機能で、これを利用すれば少しだけ簡単になります）
$(function(){
$("a img").live("click", function(){
$.colorbox({href:$(this).closest("a").attr("href")});
return false;
});
});

内容はリンク要素の子要素になっているimg要素がクリックされたら、リンク要素のリンク先をcolorboxに渡す。というものですが、単にimg要素がクリックされたら～として、最初の例と同じような処理をすることも可能です。

キャプションを付けたり、その他のオプションも利用できると思いますので、お試しください。

お礼

live(); を使用して、無事、オートページングで読み込んだ画像からもライトボックス風表示をすることが出来ました。

大変なお手数をおかけしてしまいましたが、おかげさまで処理が前に進みます。
本当にありがとうございました。

回答No.1

fujillin

実際に、確かめてはいませんが…

thickboxは読み込んだときに、初期設定でbody内を走査して対象となるイベントをセットしているのではないでしょうか？
それなので、後から追加されたものには（イベントがセットされていないので）、通常のリンクとして動作しているという現象では？

回避するには、動的に後から追加した時にも対象となるようにthickbox用のイベントをセットしてあげるか、あるいはイベントをいちいちセットせずにdocument（やbody）でクリックイベントを監視して、対象とする要素だったら拡大表示するといったような方法が思いつきます。

前者は、画像の追加がライブラリで行なわれていて、thickboxの初期設定も内部で行なわれているので、どちらかあるいは両方を解析して修正する必要があります。
後者の方法ではイベントをセットする必要はありませんが、thickboxに受け渡す必要があるので、thickboxを解析する必要があります。（場合によっては修正も）

thickboxの配布元を見てみると、「メンテしないから他のを使ってね」みたいなことが書いてありませんか？
（英語はさっぱりわからないので、雰囲気だけで見てますが…）
http://jquery.com/demo/thickbox/

試しに、一番上にあるcolorboxを見てみると、APIが公開されていますので、監視のイベント処理内からcoloroboxを起動することができるので、このようなAPIが公開されているライブラリを利用すればよいのではないでしょうか？（そうすればいじる必要はなくなる）

仮に、表示されている画像が全て拡大対象であると仮定してよければ、classなどの識別子も不要になりますね。

大雑把な方法としては、
・documentなどで全体のクリックイベントを監視する
・そのなかで画像要素がクリックされたら、その親のリンク要素のhref属性をcolorbox（←仮にこれとして）に引き渡す
みたいなことで、ご質問の内容が実現できると思います。

お礼

ご丁寧なご回答ありがとうございます。
ただ、もともとjQueryは素人で、fujillin様のおっしゃる処理が分からず申し訳ありません。
colorboxを入れてみまして、試しに

$(document).ready(function(){

$('img').click(function(){
alert('clicked');
$(this).closest('a').colorbox();
});

～ここにmasonry+Infinitescrollの処理～

)};

としてみたところ、

・１ページ目の画像はクリックするとalertが出てライトボックス風の窓が出ました
・スクロールダウンして２ページ目以降を読み込み、その画像をクリックするとalertも出ず、ライトボックス風の窓が出ず画面遷移してしまいました。

根本的に私のjQueryの書き方が間違えているようでしたら、お手数ですが再度ご教示願えますでしょうか。