- ベストアンサー
スクリプト同士がケンカ？
- スクリプトタグ同士が干渉し、lightboxの効果がなくなる問題が発生しています。どのように解決すれば両方の効果を出すことができるでしょうか？
- 新たに追加したスクリプトタグが既存のlightboxタグと干渉し、画像を新しいタブで開いてしまう問題が発生しています。どのようにして両方の機能を同時に使えるようにすることができるのでしょうか？
- Webサイト制作中に、既存のlightboxタグと新たに追加したスクリプトタグが競合し、lightboxの効果がなくなってしまいます。この問題を解決する方法について教えてください。
- origami-enjoy
- お礼率63% (21/33)
- HTML
- 回答数1
- ありがとう数10
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
私の環境では、以下の通りで動きましたよ。 －－－－－－－－－－－－－－－－－－－－ <script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.js"></script> <script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js"></script> <link rel="stylesheet" href="http://js.jugem.jp/Lightbox/2.04/css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ var bg1 = $('#main-img'); var speed = 3000; cloudMove(); setInterval(cloudMove, 6000); function cloudMove(){ bg1 .animate({backgroundPosition:'30px'}, speed) .animate({backgroundPosition:'0'}, speed); } }); </script> <style type="text/css"> #main-img{ height: 250px; background-image: url(サンプル画像.jpg); } </style> </head> <body> <!-- cloudMove --> <div id="main-img"></div> <!--lightbox --> <a href="(画像へのパス)" rel="lightbox" title="(画像タイトル)">画像表示</a> －－－－－－－－－－－－－－－－－－－－ たしかに、そのまんまでは競合していました。 //////////////////////////// <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ //////////////////////////// として、上記のソースで動きました。 ご参考までに。
お礼
kao03さん ありがとうございます！ できました！ぱっとみてすぐに理解出来るんですね。 すごい、、。 精進します。また何かありましたら よろしくお願いします！