Использование Image ротатора с jcarousel - PullRequest
Новая
       32

Использование Image ротатора с jcarousel

0 голосов
/ 03 мая 2011

Я пытаюсь объединить два плагина jquery вместе, но безуспешно. Два плагина, которые я использую: simple 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 = новичок.Что касается материала, который я ищу на сайте, это просто вращатель изображения, и внутри этого изображения должны быть подстраницы с кнопками со стрелками, такими как jcarousel.

1 Ответ

0 голосов
/ 04 мая 2011

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

...