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

私の環境では、以下の通りで動きましたよ。－－－－－－－－－－－－－－－－－－－－ 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); } }); #main-img{ height: 250px; background-image: url(サンプル画像.jpg); } 画像表示－－－－－－－－－－－－－－－－－－－－たしかに、そのまんまでは競合していました。 //////////////////////////// jQuery.noConflict(); jQuery(document).ready(function($){ //////////////////////////// として、上記のソースで動きました。ご参考までに。参考URL：http://semooh.jp/jquery/ref/cont/with_prototype/

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

解決済

質問者：origami-enjoy
質問日時：2014/03/17 17:05
回答数：1件

初めまして。
HTML CSSを若干触れるものです。

サイトを制作していまして、
一部にlightboxをスクリプトタグで表示させていたのですが
新たに違うスクリプトタグ（トップ画像の上を画像がふらふら動くイメージのため）
によって打ち消されてしまい、lightboxの効果がなく、新しいタブで画像を開いてしまいます。
こちらがjugemで用意されたlightboxタグです。

<script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.j …
<script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scripta …
<script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js" …

ここからが後から入れたタグです。

<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>

これらは一緒に効果を出す事は可能でしょうか？
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： kao03
回答日時：2014/03/17 18:59

私の環境では、以下の通りで動きましたよ。

－－－－－－－－－－－－－－－－－－－－
<script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.j …
<script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scripta …
<script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js" …
<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. …
<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>

<div id="main-img"></div>

<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/