jlyu
10/29/2012 - 7:05 AM

Learning jQuery -7

Learning jQuery -7

//$.fn.cycle.defaults.random = true;

$(document).ready(function(){
   
    $('#books').cycle({
            timeout: 1000,
            delay:  -1000, // (1)
            speed: 1500,
            pause: true,
            before: function(){
                $('#slider').slider({animate:true}); // (4)
                $('#slider').slider({range:"min"});
                $('#slider').slider('value', $('#books li').index(this));
            },
            after: function(){ // (5)
                var maxSliderPage = $('#books li').length - 1;
                var currSliderPage = $('#books li').index(this);
                
                if (currSliderPage == maxSliderPage) {
                     $('#books').cycle('stop');
                     $('#slider').slider('disable');
                     $('button').button("option", "disabled", true);
                }
            }
    });
        
    $('<div id="books-controls"></div>').insertAfter('#books');
    
    $('<div id="slider"></div>').slider({
        min : 0,
        max : $('#books li').length - 1,
        slide: function(event, ui){
            $('#books').cycle(ui.value);
        }
    }).appendTo('#books-controls');
    
    $('<button>Pause</button>').click(function(){
        $('#books').cycle('pause');
        $.cookie('cyclePaused', 'y', {expires: 30}); // (2)
        return false;
    }).button({
        icons: {primary: 'ui-icon-pause'}
    }).appendTo('#books-controls');
    
    $('<button>Resume</button>').click(function(){
        var $paused = $('ul:paused');
        if ($paused.length) {
            $paused.cycle('resume');
            $.cookie('cyclePaused', null);
        }
        else {
            $(this).effect('shake', {
                distance: 10,
                duration: 80
            });
        }
        return false;
    }).button({
        icons: {primary: 'ui-icon-play'}
    }).appendTo('#books-controls');
    
    if($.cookie('cyclePaused')) {
        $('#books').cycle('pause');
    }
    
    $('#books .title').resizable({grid : 10}); // (3)
    
    $('#books').hover(function(){
        $('#books .title').animate({
            backgroundColor: '#eee',
            color: '#000'
        }, 1000);
    }, function(){
        $('#books .title').animate({
            backgroundColor: '#000',
            color: '#fff'
        }, 1000);
    });
    
    $('h1').click(function(){
        $(this).toggleClass('highlighted', 'slow', 'easeInExpo');
    });
    

});