JQuery ui Image cycler

Question

Я развиваю использование jquery ui. Сегодня я застрял на велосипеде. Код слайдера изображения по умолчанию предназначен для 3 изображений. У меня есть 30 фотографий на моем сайте, и мне нужно циклично его использовать с помощью ui-cycler, но это невозможно. Чтобы заставить его работать, я должен щелкнуть по статичному изображению X до того, как начнется воспроизведение велосипеда. Вот код велосипедист 3 изображений:

<script> 
    $(function() { 
     // TODO refactor into a widget and get rid of these plugin methods 
     $.fn.left = function(using) { 
      return this.position({ 
       my: "right middle", 
       at: "left+25 middle", 
       of: "#container", 
       collision: "none", 
       using: using 
      }); 
     }; 
     $.fn.right = function(using) { 
      return this.position({ 
       my: "left middle", 
       at: "right-25 middle", 
       of: "#container", 
       collision: "none", 
       using: using 
      }); 
     }; 
     $.fn.center = function(using) { 
      return this.position({ 
       my: "center middle", 
       at: "center middle", 
       of: "#container", 
       using: using 
      }); 
     }; 

     $("img:eq(0)").left(); 
     $("img:eq(1)").center(); 
     $("img:eq(2)").right(); 

     function animate(to) { 
      $(this).stop(true, false).animate(to); 
     } 
     function next(event) { 
      event.preventDefault(); 
      $("img:eq(2)").center(animate); 
      $("img:eq(1)").left(animate) 
      $("img:eq(0)").right().appendTo("#container"); 
     } 
     function previous(event) { 
      event.preventDefault(); 
      $("img:eq(0)").center(animate); 
      $("img:eq(1)").right(animate); 
      $("img:eq(2)").left().prependTo("#container"); 
     } 
     $("#previous").click(previous); 
     $("#next").click(next); 

     $("img").click(function(event) { 
      $("img").index(this) === 0 ? previous(event) : next(event); 
     }); 

     $(window).resize(function() { 
      $("img:eq(0)").left(animate); 
      $("img:eq(1)").center(animate); 
      $("img:eq(2)").right(animate); 
     }); 
    }); 
    </script> 

А вот моя картина ссылка HTML:

<div id="container"> 

     <img class = "slide" src="images/slide1.jpg" alt="Race2"/> 
     <img class="slide" src="images/slide2.jpg" alt="Akshay Kumar"/> 
     <img class = "slide" src = "images/slide_eng1.jpg" alt = "English Roller"/> 
     <img class = "slide" src = "images/slide_eng2.jpg" alt = "Bruce Willis"/> 
<!-- still many image --> 
    </div> 

, что я должен сделать, чтобы заставить его работать?

Answer 1

Сначала вы должны скрыть остальную часть изображений (индекс 3 и выше) с помощью функции ext_right, и вы должны изменить Append и PREPEND, как показано ниже:

<script> 
     $(function() { 
      // TODO refactor into a widget and get rid of these plugin methods 
      $.fn.left = function (using) { 
       return this.position({ 
        my: "right middle", 
        at: "left+25 middle", 
        of: "#image_container", 
        collision: "none", 
        using: using 
       }); 
      }; 
      $.fn.right = function (using) { 
       return this.position({ 
        my: "left middle", 
        at: "right-25 middle", 
        of: "#image_container", 
        collision: "none", 
        using: using 
       }); 
      }; 
      $.fn.center = function (using) { 
       return this.position({ 
        my: "center middle", 
        at: "center middle", 
        of: "#image_container", 
        using: using 
       }); 
      }; 

      $.fn.ext_right = function() { 
       return this.position({ 
        my: "left middle", 
        at: "right+30 middle", 
        of: "#image_container", 
        collision: "none", 
       }); 
      }; 

      $("img.cycler:eq(0)").left(); 
      $("img.cycler:eq(1)").center(); 
      $("img.cycler:eq(2)").right(); 

      /*Place the rest of the image_container images hidden to the right*/ 
      $("img.cycler:gt(2)").ext_right(); 

      function animate(to) { 
       $(this).stop(true, false).animate(to); 
      } 

      function next(event) { 
       event.preventDefault(); 
       $("img.cycler:eq(2)").center(animate); 
       $("img.cycler:eq(1)").left(animate) 
       //$("img.cycler:eq(0)").right().appendTo("#image_container");     
       $("img.cycler:eq(3)").right(); 
       $("img.cycler:eq(0)").ext_right().appendTo("#image_container"); 
      } 
      function previous(event) { 
       event.preventDefault(); 
       $("img.cycler:eq(0)").center(animate); 
       $("img.cycler:eq(1)").right(animate);         
       //$("img.cycler:eq(2)").left().prependTo("#image_container"); 
       $("img.cycler:eq(2)").ext_right(); 
       $("img.cycler:last").left().prependTo("#image_container");         
      } 

      $("#previous").click(previous); 
      $("#next").click(next); 

      $("img.cycler").click(function (event) { 
       $("img.cycler").index(this) === 0 ? previous(event) : next(event); 
      }); 

      $(window).resize(function() { 
       $("img.cycler:eq(0)").left(animate); 
       $("img.cycler:eq(1)").center(animate); 
       $("img.cycler:eq(2)").right(animate); 
      }); 
     }); 
    </script> 

Вот изображения:

<div id="image_container">      
        <img class="cycler" src="images/flight.jpg" width="512" height="307" alt="flight" /> 
        <img class="cycler" src="images/rocket.jpg" width="300" height="353" alt="rocket" /> 
        <img class="cycler" src="images/earth.jpg" width="458" height="308" alt="earth" /> 
        <img class="cycler" src="images/high_tatras.jpg" width="512" height="307" alt="flight" /> 
        <img class="cycler" src="images/high_tatras2.jpg" width="300" height="353" alt="rocket" /> 
        <img class="cycler" src="images/high_tatras3.jpg" width="458" height="308" alt="earth" />      
       <a id="previous" href="#">Previous</a> <a id="next" href="#">Next</a> 
</div>