みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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です。


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

投稿日時 - 2012-02-17 12:14:59

QNo.7310401

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

こんにちは。

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

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

だけを読み込んだ状態で試してみてください。

投稿日時 - 2012-02-17 13:27:47

ANo.1

こんにちは。

試していませんが、おそらく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の読み込み順とかを変更しなくてはいけない可能性があります。

投稿日時 - 2012-02-17 12:34:26

補足

ありがとうございます!
さっそく試させていただきましたが、ダメでしたので、
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:38

あなたにオススメの質問