同じスライドショーで fancybox と jcarousellite を使用しようとしています。両方のスクリプトが独立して動作するようになりましたが、それらを一緒にするとどちらも動作しません。
競合しているのはスクリプトかもしれないと考えていますが、両方の機能を使用している他の Web サイトを見たことがあります。
これが私のページにあるものです：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fancy").fancybox();
});
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
$(function() {
$(".home").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 1,
speed: 1000,
auto: 2000,
easing: "easeinout"
});
});
</script>
次に、私の画像は次のようにレイアウトされます。
<div id="slider" class="home" style="margin-top:-30px;">
<ul>
<li ><a class="fancy" href="image"><img src="image" alt="Modern Wedding Photographer" style="padding:5px; border:0;"/></a></li>
<li ><a class="fancy" href="image"><img src="image" alt="Modern Wedding Photographer" style="padding:5px; border:0;"/></a></li>
<li ><a class="fancy" href="image"><img src="image" alt="Modern Wedding Photographer" style="padding:5px; border:0;"/></a></li>
</ul>
</div>
誰かが解決のために正しい方向に私を向けることができますか? ありがとう