買ってきたjQueryの本を元に複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを同じHTML内に入れたいのですが両方ともうまくいきません。いろいろ自分なりに調べたのですが、わからないです。うまくいく方法をどうか教えてもらえないでしょうか？宜しくお願いします。細かなCSS設定なしに、画像をロールオーバーさせる jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); });

idはHTML内でユニークでなければなりません。従っては、 1回しか指定できません。

同HTML内で複数のjQueryを設置したいです

解決済

質問者：sinto58167
質問日時：2013/11/18 20:29
回答数：2件

買ってきたjQueryの本を元に複数のjQueryを使用し、
タブメニュータイプのものと自動スライドショータイプのを
同じHTML内に入れたいのですが両方ともうまくいきません。
いろいろ自分なりに調べたのですが、わからないです。
うまくいく方法をどうか教えてもらえないでしょうか？
宜しくお願いします。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>細かなCSS設定なしに、画像をロールオーバーさせる</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="all" />
<script src="js/jquery.rollover.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. … type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script>

<script type="text/javascript">
jquery(function() {
jquery('div#gallery').slideView({
easeFunc: 'easeInOutBack',//少しバックするアニメーション
easeTime: 1200,//アニメーションの時間
toolTip: true,//ツールチップの表示
ttOpacity: 0.5//ツールチップの透明度
});
});
</script>
</head>

<body>
<div id="wrap">
<div id="gnav">
<ul>
<li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li>
<li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li>
<li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li>
<li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li>
<li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li>
</ul>
</div>


<div id="wrap">
<h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1>
<div id="gallery" class="svw">
<ul>
<li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li>
<li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li>
<li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li>
<li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li>
<li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li>
<li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li>
<li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li>
</ul>
</div>
</div>
<img src="images/arimura_ocean3.jpg" class="ocean">

<img src="images/arimura_ocean3.jpg">

<p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p>

</div>

</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

No.1

回答者： hirotn
回答日時：2013/11/19 16:53

<script src="

http://ajax.googleapis.com/ajax/libs/jquery/1.9. … type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …

どちらもjQueryそのもののロードなので一回でいいはずです。
同じ宣言を二度すると混乱しそうなので、こういうところから潰していきたいという思いがあります。

解決策としては、上記script要素はどちらか一つでよいです。