スクリプト同士がケンカ？

前へ 次へ
このQ&Aのポイント
  • スクリプトタグ同士が干渉し、lightboxの効果がなくなる問題が発生しています。どのように解決すれば両方の効果を出すことができるでしょうか？
  • 新たに追加したスクリプトタグが既存のlightboxタグと干渉し、画像を新しいタブで開いてしまう問題が発生しています。どのようにして両方の機能を同時に使えるようにすることができるのでしょうか？
  • Webサイト制作中に、既存のlightboxタグと新たに追加したスクリプトタグが競合し、lightboxの効果がなくなってしまいます。この問題を解決する方法について教えてください。
回答を見る
  • ベストアンサー

スクリプト同士がケンカ？

初めまして。 HTML CSSを若干触れるものです。 サイトを制作していまして、 一部にlightboxをスクリプトタグで表示させていたのですが 新たに違うスクリプトタグ（トップ画像の上を画像がふらふら動くイメージのため） によって打ち消されてしまい、lightboxの効果がなく、新しいタブで画像を開いてしまいます。 こちらがjugemで用意されたlightboxタグです。 <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> ここからが後から入れたタグです。 <script type="text/javascript"> $(function() { var bg1 = $('#main-img'); var speed = 3000; cloudMove(); setInterval(cloudMove, 6000); function cloudMove(){ bg1 .animate({backgroundPosition:'30px'}, speed) .animate({backgroundPosition:'0'}, speed); } }); </script> これらは一緒に効果を出す事は可能でしょうか？ よろしくお願い致します。

  • HTML
  • 回答数1
  • ありがとう数10

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

  • ベストアンサー
  • kao03
  • ベストアンサー率87% (7/8)
回答No.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($){ //////////////////////////// として、上記のソースで動きました。 ご参考までに。

参考URL：
http://semooh.jp/jquery/ref/cont/with_prototype/
origami-enjoy
質問者

お礼

kao03さん ありがとうございます！ できました！ぱっとみてすぐに理解出来るんですね。 すごい、、。 精進します。また何かありましたら よろしくお願いします！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 二つのJava Scriptを使うと動かない

    現在ウェブサイトを制作中ですがJavascriptについては配布されている物を設置すること位しかできません。 ウェブサイトの特徴として、横スクロールサイトであり、どうしてもギャラリーを設置したいのです。 横スクロールの為に <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); //easeInOutExpoはeasingプラグインから選べます event.preventDefault(); }); }); </script> とし、 マウスの上下スクロールで左右の動きをさせるために <script type="text/javascript" src="vscroll.js"></script> を置いてました。 この時点で動作は正常だったのですが、 ギャラリーが必要なため、lightbox <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> を置くと横スクロールとlightboxの動きができなくなり、レイアウトも崩れました。 どなたか詳しい方がいらっしゃいましたら、ご教授いただけませんでしょうか。 またlightboxにはこだわらないので、横スクロールサイトでギャラリーを設置できる方法がありましたら、教えてください。 ちなみにCSSでモーダルウィンドウを設置してみたのですが、横スクロールということもあり、Firefoxで正常に見る事ができませんでした。（サムネイル画像をクリックすると一番左に戻る） よろしくお願いします

  • 複数スクリプトの読み込みでlightboxが動作しません

    MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示（lightbox）をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示（lightbox（最新版））のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示（lightbox）が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示（lightbox）のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。

  • prototype+jquery+プラグイン

    prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>

  • ジャバスクリプトが作動しません。

    初めまして、素人なので的外れな質問だったら恐縮です。 以下のようにジャバスクリプトを2つ記述しましたが、後ろに記述した１つしか作動しません。 記述の順番を入れ替えても、やはり後ろに記述した方しか作動しません。 何が悪いのか、どなたか教えて頂けますでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページテンプレート</title> <meta name="description" content="説明を入れます" /> <meta name="keywords" content="キーワード" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> <link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/glider.js"></script> <script type="text/javascript"><!-- Event.observe(window, "load", function(){ new Glider("album1", { duration:1.0 } ); }); // --></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head>

  • 教えてください!　lightboxとskitter

    javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>

  • 複数のjavascriptが作動しない

    http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！

  • scriptを2つ動かすために

    ライトボックスと、時間が経つとNEWマークが自動で消えるスクリプトを2ついれました。 すると、NEWマークの方だけが稼動して、ライトボックスが動きません。 自分で調べた結果、統合しないといけないというのはわかったのですが、やり方が…。。。 お力ください！(>_<) <!-- NEWマーク▼ --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.newmark.js"></script> <script type="text/javascript"> /* <![CDATA[ */ $(document).ready(function(){ $(".newmark").newmark({ past: 240, icon: "<img src='images/new.gif' alt='new'>" }); }); $(document).ready(function(){ $(".newmark2").newmark({ past: 240, icon: "<img src='img/new2.gif' alt='new'>" }); }); /* ]]> */ </script> <!-- NEWマーク▲ --> <!-- #header ライトボックス --> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <style type="text/css"><!-- #outerImageContainer { -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; } #imageDataContainer { -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; } --></style> <style type="text/css"> a:link {text-decoration:none;} a:visited {text-decoration:none;} a:active {text-decoration:none;} a:hover {text-decoration:none;} </style> <!-- #header ライトボックス -->

  • liteboxと滑らかスクロールが同時処理出来ない

    javascriptのliteboxと滑らかスクロールを１ページ内で行うことができません。 head内スクリプトタブ <!--滑らかスクロール--> <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.page-scroller.js" charset="utf-8"></script> <!--litebox--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js2/prototype.js"></script> <script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js2/lightbox.js"></script> イメージタグ <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a> ライトボックスのバージョンはlitebox2.0 滑らかスクロールは下記サイトからダウンロードさせて頂いたものを使ってます。 http://coliss.com/articles/build-websites/operation/javascript/296.html 一方のスクリプトタグをコメントで囲むと囲んでいない方のスクリプトが機能します。 また、下の方に記述したスクリプトが機能します。なので上記の場合、liteboxは機能し、滑らかスクロールの方は機能しません。 両方機能させるにはどうしたらよいのでしょうか？ ジャバスクリプトは初めて使うのであまり詳しくありません。 ご教授お願い致します。

  • 複数のjQueryを導入するには…？

    見てくださってありがとうございます。 サイトにスムーススクロールとフォトギャラリーのjQueryを入れたのですが片方が動きません。 ------------------------- <!-- スムーススクロール↓ --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <!-- フォトギャラリー↓ --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。 スクロールはhttp://klutche.org/archives/536/様のを使用、、 フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。 片方消すと正常に動くのでコードは間違っていないと思いますが なぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますが この場合本体は一個しか呼び出していないですよね・・・？ プログラムさっぱりでとても困っています。 解決策よろしくお願いします。

  • jquery.bgSwitcherが設置できない

    私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg { 　width: 640px; 　height: 415px; 　margin: 0; 　padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？ このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？ 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する