gistfile1.js

jQuery(function($) { 
   $(document).ready(function() {
      // settings
      var slider             = $('.full-images.jquery-load'); // class or id of carousel slider
      var slide              = 'li'; // could also use 'img' if you're not using a ul
      var transition_time     = 1000; // 1 second
      var time_between_slides = 500000; // 5 seconds
      var slides = slides();
   
      // set the first carousel item to active for styling
      $('.jcarousel-item-1').addClass('active-carousel-item');
   
      slides.fadeOut();
   
      resizeFullImage();

      // set active classes
      slides.first().addClass('active');
      slides.first().fadeIn(transition_time);
   
      // auto scroll 
      $interval = setInterval(
         function(){
            var $i = slider.find(slide + '.active').index();
   
            // Fade out & deactivate
            slides.eq($i).removeClass('active');
            slides.eq($i).fadeOut(transition_time);
   
            if (slides.length == $i + 1) {
               $i = -1; // loop to start
               //$('.jcarousel-container').jcarousel('scroll',position);
            }
   
            // Fade in & activate
            slideId = slides.eq($i + 1).attr('slideindex');
            preloadImages(slideId,1);
            slides.eq($i + 1).fadeIn(transition_time);
            slides.eq($i + 1).addClass('active');
         
            // We'll need the ID of the slide for the carousel
            // activation/deactivation based on now currently active main slide image
            var carouselItemId = $('.full-image.jquery-load.active').attr('slideindex');
   
            $('.jcarousel-item-' + carouselItemId).addClass('active-carousel-item').siblings().removeClass('active-carousel-item');
         }
         , transition_time +  time_between_slides 
      );
   
      // on click of a carousel item, we need to remove active state on other items & set clicked to active
      // then we fire the transition/activator for the full size slider to change the large image
      // $(".jcarousel-item img").click(function() {
      $(".jcarousel-container").on("click", ".jcarousel-item img", function(event){
         var itemId = $(this).parents('.jcarousel-item').attr('jcarouselindex');
         preloadImages(itemId,1);
         $(this).parents('.jcarousel-item').addClass('active-carousel-item').siblings().removeClass('active-carousel-item');
         var slideId = $(this).parents('.jcarousel-item').attr('jcarouselindex');
         switchSlide(slideId);
      });
   
      function slides(){
         return slider.find(slide);
      }
      
      function switchSlide(newId) {
         $('.full-image.jquery-load.active').fadeOut(transition_time).removeClass('active');
         $('.full-image.jquery-load.fullsize-item-' + newId).fadeIn(transition_time).addClass('active');
      }

      // Resize code to set the height of the main slider for position to work properly
      function resizeFullImage() {
         var h = $('.full-images.jquery-load .fullsize-item-1 img').height();
         console.log($('ul.full-images.jquery-load').height(h));
      }
   });

   function preloadImages(startId,loadLimit) {
      var end  = (parseInt(startId,10) + parseInt(loadLimit,10));
      for (var i=startId;i<=end;i++) { 
         var elem = '.full-image.jquery-load.fullsize-item-' + i;
         if ($(elem).html() == "") {
            // we need the full image path from the full slideshow
            var data = $(elem).data('full');
            $(elem).html('<img src="' + data + '" alt="" />');
         } else {
         }
      }
   }
});