$(document).ready(function () {
    $('#slider1').s3Slider({
        timeOut: 5000
    });
    $('.eff').hover(
	            function () {

	                value = $(this).find('img').outerHeight() * -1;
	                //for left/right if you have different width and height, 
	                //commented out because we are using up/down in this example
	                //value = $(this).find('img').outerWidth() * -1); 

	                //animate the image
	                // you can change the sliding direction by changing bottom to left, right or top
	                // if you changed this, you will have to change the position of the hover out as well
	                $(this).find('img').stop().animate({ bottom: value }, { duration: 500, easing: 'easeInCubic' });

	            },
	        function () {

	            //reset the image
	            // the position property (bottom), it must be same with the on in the mouseover
	            $(this).find('img').stop().animate({ bottom: 0 }, { duration: 500, easing: 'easeOutQuad' });
	        });

    //if user clicked on the thumbnail
    $('.eff').click(function () {
        //grab and execute the first link in the thumbnail
        window.location = $(this).find('a:first').attr('href');
    });
});