cycleImages

cycleImages.js

timers = [];
var cycleImgs = function(imgs){
   for(var j=0;j<timers.length;j++){clearTimeout(timers[j]);}
   var selector = '#bgimg';
   var gonext = function(imgarray, idx){
      //console.log(imgarray[idx]);
      var nextImage = new Image();
      nextImage.onload = function(){
         $(selector).stop().animate({opacity : 0 },
            250,
            function(){
               $(selector).attr('src', imgarray[idx]);
               $(selector).animate({opacity : 1}, 250);
               if(++idx >= imgarray.length) idx = 0;
            });
         timers.push(setTimeout(function(){gonext(imgarray, idx)}, 5000));
         nextImage = nextImage.onload = nextImage.onabort = nextImage.onerror = null;
      }
      nextImage.src = imgarray[idx];
   }
   gonext(imgs, 0);
}

frontImgs = $('#wrapper').attr('data-bgimg').split('|');

$('h2').click(function(){
   $('.secondDirs').hide();
   $(this).parent().children('.secondDirs').show();
   cycleImgs(frontImgs);
});

$('h3').click(function(){
   $('.content').hide();
   $(this).next().show();
   
   var baseDir = 'content';
   var secondDir = $(this).text();
   var firstDir = $(this).parent().parent().children('h2').text();
   var bgImgs = $(this).next().attr('data-bgimg').split('|');
   var preloadimg = new Image();
   for(var i=0;i<bgImgs.length;i++){preloadimg.src=bgImgs[i];}
   cycleImgs(bgImgs);
});