$(document).ready(function() {	    
       $('#mycarousel').jcarousel({
            vertical: true,
            scroll: 3
        });
        
        $("#jcarousel-detail").before("<div id='contentLoader'></div>");
        $("#jcarousel-detail").hide();
        $('#mycarousel .jcarousel-item a.media_jpg').click(function(){
            var text = $(this).parent().children().filter('dt:first').html();
            $('#jcarousel-detail').addClass('loading');
            var toLoad = $(this).attr('href');
              var img = new Image();
              
              // wrap our new image in jQuery, then:
              $(img)
                // once the image has loaded, execute this code
                .load(function () {
                  // set the image hidden by default    
                  $(this).hide();
                
                  // with the holding div #loader, apply:
                  $('#jcarousel-detail')
                    // remove the loading class (so no background spinner), 
                    .removeClass('loading')
                    // then insert our image
                    .html('')
                    .append(this)
                    .append(text);
                
                  // fade our image in to create a nice effect
                  $(this).fadeIn();
                  $("#jcarousel-detail").show();
                })
                
                // if there was an error loading the image, react accordingly
                .error(function () {
                  // notify the user that the image could not be loaded
                })
                
                // *finally*, set the src attribute of the new image to our image
                .attr('src', toLoad).attr('width', '420');
            return false;
        });
        //$('#mycarousel .jcarousel-item a.media_jpg:first').click()
    
    });