2011-05-03 5 views
0

Я пытаюсь объединить два Jquery плагины вместе без успеха, два плагинов, которые я использую: simple jcarousel & image rotator, ниже фрагмент кода:Использование изображения ротатор с jcarousel

<script type="text/javascript"> 
$(document).ready(function() { 

    //Show Banner 
    $(".main_image .desc").show(); //Show Banner 
    $(".main_image .block").animate({ opacity: 0.85 }, 1); //Set Opacity 

    //Click and Hover events for thumbnail list 
    $(".image_thumb ul li:first").addClass('active'); 
    $(".image_thumb ul li").click(function() { 
     //Set Variables 
     var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image 
     var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL 
     var imgDesc = $(this).find('.block').html(); //Get HTML of block 
     var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block 

     if ($(this).is(".active")) { //If it's already active, then... 
      return false; // Don't click through 
     } else { 
      //Animate the Teaser     
      $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() { 
       $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250); 
       //$(".main_image img").attr({ src: imgTitle, alt: imgAlt }); 
       //     
      }); 
     } 

     $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists 
     $(this).addClass('active'); //add class of 'active' on this list only 
     return false; 

    }).hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    }); 

    //Toggle Teaser 
    $("a.collapse").click(function() { 
     $(".main_image .block").slideToggle(); 
     $("a.collapse").toggleClass("show"); 
    }); 

}); //Close Function 
</script> 

    <script type="text/javascript"> jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel(); 
}); 

</script> 
</head> 
<body> 
<form id="form1" runat="server"> 

<div id="main" class="container"> 
<div class="main_image"> 


    <div class="desc"> 
     <a href="#" class="collapse">Close Me!</a> 
     <div class="block"> 
      <h2>Slowing Down</h2> 
      <small>04/10/09</small> 

      <p> </p> 
     </div> 
    </div> 
</div> 
<div class="image_thumb"> 
    <ul> 
     <li> 
      <a href="#"><img src="images/nav2a.png" alt="Slowing Dow" /></a> 
      <div class="block"> 



       <ul id="mycarousel" class="jcarousel-skin-tango"> 
       <li>a</li> 
       <li>b</li> 
       <li>c</li> 
       <li>d</li> 
       <li>e</li> 


       </ul> 

       </div> 


     </li> 
    </ul> 
</div> 
</div> 

Изображение ротатор отлично работает, но jcarousel не работает в ротаторе изображения, он отлично работает за пределами ротатора изображения. Любая помощь или совет или любая другая альтернатива будут оценены, мой опыт jquery = beginner. Что касается вещей, которые я ищу на веб-сайте, это просто ротатор изображений, и внутри этого изображения должны быть подстраницы со стрелочными кнопками, такими как jcarousel.

ответ

-1

Вы не можете смешивать два плагина напрямую, для этого вам нужно изменить код.

Смежные вопросы