jQueryプラグインのlightBoxをヤフートリプルに反映する。

ttp://shopping.geocities.jp/everydaycarry/special_st/st_xbwatch_01/face_00.html

ヤフーショッピングの店舗デザインで試行錯誤しています。

フォトギャラリーのプラグインLightBoxを使用したところ、
記載しているURLのページ内の通り、<a>タグでは動作せず、イメージマップにした場合は動作している状況です。

<a>タグにて動作しない理由や、動作させる方法にお心当たりのある方がいましたら、
ご教授いただければ幸いです。

よろしくお願いします。

6/12 13:04追記━━━━━━━━━━━
jQueryのバージョンをjquery-1.11.3.min.jsに変更したものの動作せず。

6/12 14:51追記━━━━━━━━━━━
ttp://shopping.geocities.jp/everydaycarry/special_st/1/test.html

が競合している可能性を考えて削除したものの動作せず。

行動規範の内容に同意します

回答3件

ベストアンサー

解決策は2つです。

①sc.jsによって追加されるイベントを削除する
②lightboxによって追加されるイベントを優先する

①sc.jsによって追加されるイベントを削除する
すでに追加されているイベントを削除するためには、対象の要素を複製し、元の要素と差し替える必要があります。そのために、sc.jsが読み込まれたあとに次のコードを適用します。

lang
1$('a[data-lightbox]').each(function(index, elem) {
2    var clone = elem.cloneNode(true);
3    elem.parentNode.insertBefore(clone, elem);
4    elem.parentNode.removeChild(elem);
5});

sc.jsが読み込まれたあととして妥当なイベントは、windowオブジェクトのloadイベントです。
最終的には次のようなコードになるでしょう。

lang
1window.addEventListener("load", function() {
2    $('a[data-lightbox]').each(function(index, elem) {
3        var clone = elem.cloneNode(true);
4        elem.parentNode.insertBefore(clone, elem);
5        elem.parentNode.removeChild(elem);
6    });
7}, false);

もしきちんと動作しなければすみません。

②lightboxによって追加されるイベントを優先する
解決策は2つと言っておきながら、僕にはイベントの優先順位を変える方法は見つけられませんでした。そんなわけで、解決策は1つです。

投稿2015/06/12 08:14

編集2015/06/12 12:23

anaprestoo

総合スコア199

zeele001

2015/06/12 09:38

ttp://shopping.geocities.jp/everydaycarry/special_st/1/light_box_01.html ttp://shopping.geocities.jp/everydaycarry/special_st/1/test.html 動きました！テラテイルが広報のために用意したスタッフなのではと疑うレベルで動きました！ありがとうございます、とてもスッキリしました。とてもとても感謝しています。

anaprestoo

2015/06/12 12:13

そう言っていただけると嬉しいです。

行動規範の内容に同意します

原因はsc.jsです。sc.jsは、ページ内のすべてのa要素にイベントを追加します。
動作させるための最もスマートな方法は、aタグの代わりにareaタグを使用することです。

投稿2015/06/12 06:49

anaprestoo

総合スコア199

zeele001

2015/06/12 07:03

ご回答ありがとうございます。なるほど。ヤフーではアップロードした際に</html>以下の要素が自動で追加されているため、その部分が悪さをしているだろうというのはなんとなく予想していたのですが…ふむ。 jsの内容を読んで把握するまでの知識がなく、解決策はないものかと模索していたところでした。おっしゃる通り、areaで代用していく方向で進めようと思います。ありがとうございました。 ECを運営しているとこういったシステム面で制約を受けることが非常に多く、その都度「なにくそ」と回避していくことに快感を覚えていたもので。もし、sc.jsを回避してaタグで実装する方法などにお心当たりがありましたら引き続き教えていただければかなり嬉しいです。失礼します。

行動規範の内容に同意します

jQueryのバージョンが古いかもしれません。
1.11.0以上が良いと思われます。

投稿2015/06/12 03:40