• 締切
  • 困ってます

jquery.bgSwitcherが設置できない

  • 質問No.7310401
  • 閲覧数4660
  • ありがとう数0
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 0% (0/2)

私は、いま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です。


どなたか、ご助力をお願い致します。

回答 (全2件)

  • 回答No.2

ベストアンサー率 51% (1060/2054)

こんにちは。

変わらずでしたか。
bgSwitcherのみ使うようにしたら動きますか?

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bgSwitcher.js"></script>

だけを読み込んだ状態で試してみてください。
  • 回答No.1

ベストアンサー率 51% (1060/2054)

こんにちは。

試していませんが、おそらくprototypeとjQueryの競合でエラーが出てるんだと思います。


<script>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('#fadeOut').bgSwitcher({
images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'],
interval: 2000
});
});
</script>

これで試してみてください。
それでもダメならjsの読み込み順とかを変更しなくてはいけない可能性があります。
補足コメント
inoaruyou

お礼率 0% (0/2)

ありがとうございます!
さっそく試させていただきましたが、ダメでしたので、
prototypeを削除して、順番を一番上に繰り上げて、以下のように
セットし直しましたが、動いてくれませんでした。

▼今の状態

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bgSwitcher.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('#fadeOut').bgSwitcher({
images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'],
interval: 2000
});
});
</script>
<script type="text/javascript" src="js/script.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">
</head>


状況は変わらずでした。。。
投稿日時:2012/02/17 13:04
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ