$.fn.cycle.defaults.timeout = 6000;
$(function() {
    // run the code in the markup!
    $('table pre code').not('#skip,#skip2').each(function() {
        eval($(this).text());
    });
    
    $('#ss1').after('<div id="nav1" class="nav">').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 0, 
        pager:  '#nav1',
		before:  onBefore1, 
   		after:   onAfter1
		
    
    });
});

function onBefore1() {
    $('.output1').html('<p>' + this.alt + '</p>');
    //window.console.log(  $(this).parent().children().index(this) );
}
function onAfter1() {
    $('.output1').html('<p>' + this.alt + '</p>');
}

$.fn.cycle.defaults.timeout = 6000;
$(function() {
    // run the code in the markup!
    $('table pre code').not('#skip,#skip2').each(function() {
        eval($(this).text());
    });
    
    $('#ss2').after('<div id="nav2" class="nav">').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 0, 
        pager:  '#nav2',
		before:  onBefore2, 
   		after:   onAfter2
		
    
    });
});

function onBefore2() {
    $('.output2').html('<p>' + this.alt + '</p>');
    //window.console.log(  $(this).parent().children().index(this) );
}
function onAfter2() {
    $('.output2').html('<p>' + this.alt + '</p>');
}

$.fn.cycle.defaults.timeout = 6000;
$(function() {
    // run the code in the markup!
    $('table pre code').not('#skip,#skip2').each(function() {
        eval($(this).text());
    });
    
    $('#ss3').after('<div id="nav3" class="nav">').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 0, 
        pager:  '#nav3',
		before:  onBefore3, 
   		after:   onAfter3
		
    
    });
});

function onBefore3() {
    $('.output3').html('<p>' + this.alt + '</p>');
    //window.console.log(  $(this).parent().children().index(this) );
}
function onAfter3() {
    $('.output3').html('<p>' + this.alt + '</p>');
}

$.fn.cycle.defaults.timeout = 6000;
$(function() {
    // run the code in the markup!
    $('table pre code').not('#skip,#skip2').each(function() {
        eval($(this).text());
    });
    
    $('#ss4').after('<div id="nav4" class="nav">').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 0, 
        pager:  '#nav4',
		before:  onBefore4, 
   		after:   onAfter4
		
    
    });
});

function onBefore4() {
    $('.output4').html('<p>' + this.alt + '</p>');
    //window.console.log(  $(this).parent().children().index(this) );
}
function onAfter4() {
    $('.output4').html('<p>' + this.alt + '</p>');
}