シャドウボックスとjQueryの共存方法

2011/06/22 13:20

このQ&Aのポイント

シャドウボックスとjQueryを共存させるためには、コードを適切に変更する必要があります。
まず、jquery-1.3.1.min.jsとshadowbox.jsの順番を入れ替えます。
さらに、$(document).ready(function(){ Shadowbox.init(); });の前に、jqueryのコードを移動させます。

25taku
お礼率85% (76/89)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2011/06/22 22:42 回答No.1

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"のときだけ処理されるようにする必要があるでしょう。

質問者