Как я могу приостановить дольше определенную категорию?

Question

Как я могу получить слайд-шоу для паузы в первой категории? Благодаря!

$(document).ready(function(){  

      var images = [ 
      { 
       id:0, 
       images: ['media/image0.jpg'], 
        dom: null 
      }, 
       { 
        id:1, 
       images: ['media/image1.jpg'], 
        dom: null 

       }, 
       { 
        id:2, 
       images: ['media/image2.jpg'], 
        dom: null 

       }, 
       { 
        id:3, 
        images: ['media/image3.jpg'], 
        dom: null 

       }, 
       { 
        id:4, 
            images: ['media/image4.jpg'], 
        dom: null 
       }, 
       { 
        id:5, 
             images: ['media/image5.jpg'], 
        dom: null 
       }, 
       { 
        id:6, 
             images: ['media/image6.jpg'], 
        dom: null 
       } 
      ]; 

      function preloadImages(images, func) {   
       var i = 0; 
       var cache = []; 
       var loaded = 0; 
       var num = images.length; 

       for (; i < num; i++) (function(i) { 

        var new_image = $('<img/>').attr('src', images[i]).load(function(){ 
         loaded++; 

         if(loaded == num) 
         {             
          func();     
         } 
        });      
        cache.push(new_image); 
       })(i); 

       return true; 
      }; 

      for (var i=0; i < images.length; i++) { 
       preloadImages(images[i].images, function() {}); 
      } 


      var category = 0; // the current tab group to display 
      var index = 0; // the current image in the tab group to display 
      var slider = $("#slider-container"); 
      var timer = null; 
      var speed = 1000; 

      initCategories = function() { 
       for (var i = 0; i < images.length; ++i) { 
        images[i].dom = $("<ul/>").addClass("holder"); 
        for (var j = 0; j < images[i].images.length; ++j) { 
         images[i].dom.append($("<li/>").addClass("slide").css("background", "url(" + images[i].images[j] + ") no-repeat")); 
        } 
       } 
      } 

      switchCategory = function(newCategory) { 
       //if (newCategory != category) { 
        category = newCategory; 
        $(".slideCat").removeClass("active"); 
        $(".slideCat[rel='" + category + "']").addClass("active"); 
        slider.empty().append(images[category].dom); 
       //} 
       index = 0; 
       $(".holder", slider).css("margin-left", 0); 
      } 

      switchSlide = function(newSlide, animate) { 
       //if (newSlide != index) { 
        index = newSlide; 
        var newMargin = $(".slide:first", slider).width() * -index; 
        if (animate) { 
         $(".holder", slider).animate({"margin-left": newMargin + "px"}, speed, null, null); 
        } else { 
         $(".holder", slider).css("margin-left", newMargin + "px"); 
        } 
       //} 
      } 

      doTransition = function() { 
       ++index; 
       if (index >= images[category].images.length) { 
        ++category; 
        if (category >= images.length) { 
         category = 0; 
        } 
        switchCategory(category); 
       } else { 
        switchSlide(index, true); 
       } 
      } 

      $(".slideCat").click(function (e) { 
       clearInterval(timer); 
       switchCategory(this.rel); 
       timer = setInterval(doTransition, 5000); 
       return false; 
      }); 

      $(".prev").click(function (e) { 
       clearInterval(timer); 
       --index; 
       if (index < 0) { 
        --category; 
        if (category < 0) { 
         category = images.length - 1; 
        } 
        switchCategory(category); 
        switchSlide(images[category].images.length - 1); 
       } else { 
        switchSlide(index); 
       } 
       timer = setInterval(doTransition, 5000); 
       return false; 
      }); 

      $(".next").click(function (e) { 
       clearInterval(timer); 
       ++index; 
       if (index >= images[category].images.length) { 
        ++category; 
        if (category >= images.length) { 
         category = 0; 
        } 
        switchCategory(category); 
       } else { 
        switchSlide(index, false); 
       } 
       timer = setInterval(doTransition, 15000); 
       return false; 
      }); 

      // this doesn't work! hover gets triggered like this, but we don't know which <li/> we're over. 
      // if we use e.g. $(".holder", slider) or $("li", slider), the event doesn't get triggered :(
      $(slider).hover(function() { 
       console.log("hover"); 
       clearInterval(timer); 
       $(this).find(".caption").stop().fadeTo(500, 0.8); 
      }, function() { 
       $(this).find(".caption").stop().fadeTo(500, 0); 
       timer = setInterval(doTransition, 15000); 
      }); 

      // load the categories 
      initCategories(); 
      switchCategory(0); 
      switchSlide(0, false); 
      timer = setInterval(doTransition, 15000); 
     }); 

Answer 1

Я вижу из ваших комментариев в коде, который вы также борется с обработчиком .hover() событий. Чтобы получить эту работу, попробуйте изменить переменную slider с объекта jQuery $('#slider-container') на строку '#slider-container' и изменить свои вызовы на переменную от до $(slider) соответственно. Наконец, для события .hover() измените значение $(slider).hover на $(slider+' li').hover. Это приложит обработчик события hover к каждому дочернему списку-элементу #slider-container.

EDIT: вот как достичь желаемого эффекта перехода:

Первый, в этом блоке кода:

// load the categories 
initCategories(); 
switchCategory(0); 
switchSlide(0, false); 
timer = setInterval(doTransition, 15000); 

изменения timer = setInterval(doTransition, 15000); к:

timer = setTimeout(doTransition, 20000); 

Это поместит 20 - вторая задержка, после загрузки самого первого изображения, перед заменой его вторым изображением.

Далее, измените все остальные экземпляры setInterval на setTimeout и clearInterval на clearTimeout. Это даст нам больше контроля над длиной каждого перехода (setInterval начинается бесконечный цикл действия задержки, в то время как setTimeout происходит только один раз.)

Наконец, в вашей doTransition() функции, после switchCategory(category); введите либо:

timer = setTimeout(doTransition, 20000); 

... если вы хотите, чтобы первое изображение в каждой категории, чтобы иметь 20-секундную задержку, или:

if (category == 0) 
{ 
    timer = setTimeout(doTransition, 20000); 
} 
else 
{ 
    timer = setTimeout(doTransition, 15000); 
} 

применить вторую задержку 20 с только первым изображением в вашем slidesh вл.

Последнее, но не в последнюю очередь, после switchSlide(index, true);, введите:

timer = setTimeout(doTransition, 15000); 

... применять стандартную 15-секундную задержку на остальных переходах между слайд. Это должно быть все, что вам нужно!