シャドウボックスとjQueryを共存させるには

Question

シャドウボックス3.0.3を利用しています。チェックボックスを複数選択するjQueryをシャドウボックス内で利用したいのですが、シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。共存させるにはどのように記述を変えれば良いでしょうか？シャドウボックス

fujillin · Accepted Answer

shadowboxってこれでしょうか？
http://shadowbox-js.com/

ちゃんとみてませんが、フレームワークを選択できるようになっているのみたいなので、jquery版を利用すればコンフリクトはおこらないと思いますが…？　（ご質問文にないものを他に何か使っているのでしょうか？）

（試しに、jquery版でinlineHTMLのものをＤＬするとエラーで動作しなかったので、以下はstandalone版でテストしました）

＞シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。
上記のようにコンフリクトを避けていれば、動作はしているはずですが、ご提示の例だと動作しているようには見えないと思います。
理由は、shadowboxが表示しているのは、もともとHTMLに記述されている要素ではなく表示用のレイヤーに都度コピー生成されたソースだからです。
それなので、最初に設定したイベントはそのまま有効ですが、実際に表示している要素には設定されていないことになります。
（display:noneを消してみれば、動作していることが確認できることでしょう）

表示中に同じidの要素がコピーされているので一時的に文法違反になってしまいますが、それは置いておくとして、ご希望のように動作するためには、jqueryのliveでイベントを設定するか、または、documentなどにイベントを設定しておいて都度判断をするかということになるでしょう。

◇後者の例
$(document).ready(function(){
　Shadowbox.init(); //shadowboxの設定

$(document).click(function(evt){
　　var t = $(evt.target);
　　if(t.attr("id")=="toggle")
　　　$('#toggle, .chkbox').attr('checked', t.attr('checked'));
　});
});

2つ存在するidで要素を特定しているのがとても気持ち悪いですが、とりあえず見かけ上は動作するようになります。（スクリプトでの処理はdisplay:noneの要素にも反映されます）
但し、個々のチェックボックス（toggleでないinput要素）をクリックした際の状態は元の要素には反映されませんので、shadowboxの表示を消すとその状態はどこにも残りません。

さらには、shadowboxは表示のために要素を生成する際に、チェックボックスのチェック状態まではコピーしてくれないようですので、元のソースに動的にチェックが入っていてもそれは無視されてしまい、表示する度に常に初期状となり、チェックの状態が保持されているようには見えないでしょう。

もしも、これらを解消しようとするのであれば、一時的に表示されるshdowboxの状態を常に元のHTMLに反映しておくようにするのがよろしいかと思われます。
幸いにも、shaowboxではいろいろなイベントフックが可能なようになっているようですので、
　onFinishで元ソースからチェック状態をコピーし
　onCloseでshadowboxの表示要素からチェック状態を元の要素にコピー
みたいなことで可能になると思われます。
http://shadowbox-js.com/options.html

HTML全体がどうなっているか不明ですが、shadowboxでの表示対象が他にもある場合は、上記の処理を無条件で行なうわけにはいかないので、対象となるid="toggle"のときだけ処理されるようにする必要があるでしょう。

シャドウボックスとjQueryを共存させるには

shadowboxってこれでしょうか？

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング