Я пытаюсь использовать fancybox и jcarousellite в одном слайд-шоу. У меня оба сценария работают независимо, но когда я их соединяю, они не работают.
Я думаю, что это могут быть конфликтующие сценарии, но я видел другие сайты, которые используют обе функции.
Вот что у меня на странице:
<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>
Может кто-нибудь указать мне правильное направление для решения?
Спасибо