Template:TCU Taiwan/mainpage crotator/Javascript
(function($) { jQuery.fn.reverse = Array.prototype.reverse;
var config = {}, aux = { setup : function( $thumbs ) { aux.saveInitialPosition( $thumbs ); // set the thumbs to absolute and assign top & left $thumbs.each(function(i) { var $item = $(this), set = Math.ceil( (i + 1) / 4 );
$item.css({ position : 'absolute', left : $item.data('left') + 'px', top : ( i < 4 && config.thumbsNav ) ? $item.data('top') + 'px' : $item.data('height') + 5 + 'px' }).addClass('cr-set-' + set).data( 'set', set );
}); }, // saves the initial left / top and height of each thumb saveInitialPosition : function( $thumbs ) { $thumbs.each(function(i) { var $item = $(this);
$item.data({ left : $item.position().left, top : $item.position().top, height : $item.height() }); }); }, // used when the thumbs are shown, and we click next / previous navigateThumbs : function( $el, dir ) { // maximum possible set var maxSet = Math.ceil( ( config.totalThumbs ) / 4 ); // hide current set of thumbs $el.find('div.cr-set-' + config.currentSet).each( function(i){ $(this).stop().animate({ top : $(this).height() + 5 + 'px' }, 100, function(){ if( i === 0 ) { // show next set of thumbs ( dir === 1 ) ? config.currentSet++ : config.currentSet--;
// circular movement if( config.currentSet < 1 ) config.currentSet = maxSet; else if( config.currentSet > maxSet ) config.currentSet = 1;
// next thumbs to show var $nextItems = $el.find('div.cr-set-' + config.currentSet);
// the animation effect will be different if we click the "previous" button if( dir === -1 ) $nextItems = $nextItems.reverse();
$nextItems.each( function(i){ var $item = $(this);
setTimeout(function() {
$item.stop().animate({ top : '0px' }, 150 );
}, 50 * i); }); } }); }); }, // used when the thumbs are hidden, and we click next / previous navigateContent : function( $thumbs, $contentItems, dir ) { ( dir === 1 ) ? config.current++ : config.current--; // circular movement if( config.current === config.totalThumbs ) config.current = 0; else if( config.current < 0 ) config.current = config.totalThumbs - 1;
var $item = $thumbs.eq( config.current ), set = $item.data('set');
config.currentSet = set;
aux.selectItem( $item, $thumbs, $contentItems ); }, // triggered when clicking a thumb selectItem : function( $thumb, $thumbs, $contentItems ) { $thumb.siblings().removeClass('cr-selected').end().addClass('cr-selected'); $contentItems.hide(); var $item = $('#' + $thumb.data( 'content' ) );
$item.show();
config.current = $thumb.index(); aux.toggleText( $thumbs ); }, // shows / hides the main text of each content item toggleText : function( $thumbs ) {
var $thumb = $thumbs.eq( config.current ), $contentItem = $('#' + $thumb.data( 'content' ) ), $itemHeadline = $contentItem.find('div.cr-content-headline'), $itemText = $contentItem.find('div.cr-content-text');
$itemText.hide();
if( !config.thumbsNav ) { var somemargin = 30; $itemText.fadeIn(500).css( 'height', config.elH - $itemHeadline.outerHeight( true ) - somemargin ).jScrollPane('destroy').jScrollPane({ verticalDragMinHeight: 40, verticalDragMaxHeight: 40 }).bind('scroll.crotator', function(e) { if(config.slideshow) config.slideshow = false; }); } else { $itemText.hide(); $thumbs.parent().show(); } }, // slideshow function (recursive) slideshow : function( $el, $thumbs, $contentItems, opts ) { if( config.slideshow ) {
if( !config.thumbsNav ) aux.navigateContent( $thumbs, $contentItems, 1 ); else { var idx = config.current + 1; if( config.current === config.totalThumbs - 1 ) idx = 0;
var $item = $thumbs.eq( idx ), set = $item.data( 'set' );
if( config.slideshowCursor !== set ) { config.slideshowCursor = set; aux.navigateThumbs( $el, 1 ); }
aux.selectItem( $item, $thumbs, $contentItems ); } clearTimeout( config.slideshow_time );
config.slideshow_time = setTimeout(function() { aux.slideshow( $el, $thumbs, $contentItems, opts ); }, opts.slideshow_interval ); } }, // show / hide thumbs toggleThumbs : function( $el, $thumbs, $navNext, $navPrev, dir, speed ) { var navCSS, thumbsCSS;
if( dir === 1 ) { config.thumbsNav = true; navCSS = { bottom : '55px' }; thumbsCSS = { top : '0px' }; } else { config.thumbsNav = false; navCSS = { bottom : config.elH / 2 + 'px' }; thumbsCSS = { top : config.thumbH + 5 + 'px' }; }
$navNext.stop().animate( navCSS, speed ); $navPrev.stop().animate( navCSS, speed );
$el.find('div.cr-set-' + config.currentSet).stop().animate( thumbsCSS, speed, function() { if( dir === -1 ) $thumbs.parent().hide(); });
// if hiding the thumbs show current's text otherwise hide it aux.toggleText( $thumbs ); } }, methods = { init : function( options ) {
if( this.length ) {
var settings = { // slideshow on autoplay : false, // slideshow interval slideshow_interval : 3000, // if true the thumbs will be show initially openThumbs : true, // speed that the thumbs are shown / hidden toggleThumbsSpeed : 300 };
return this.each(function() {
// if options exist, lets merge them with our default settings if ( options ) { $.extend( settings, options ); }
var $el = $(this), // the thumb elements $thumbs = $el.find('div.cr-thumbs > div').show(), // the main content elements $contentItems = $el.find('div.cr-content-wrapper > div'), $more = $contentItems.find('a.cr-more-link');
/* * save some values in the config variable */ // index of the current item config.current = 0; // thumbsNav indicates if we are currently navigating the thumbs or the main content items // (if the thumbs are shown or not) ( settings.openThumbs ) ? config.thumbsNav = true : config.thumbsNav = false; // current set of thumbs being shown: // first 4 thumbs will have set = 1 // next 4 set = 2 and so on config.currentSet = 1; // total number of thumbs config.totalThumbs = $thumbs.length; // the height of a thumb. We will need this later config.thumbH = $thumbs.height(); // the height of the main container. We will need this later config.elH = $el.height(); // indicates if the slideshow is on. config.slideshow = settings.autoplay;
// add "hide thumbs" or "show thumbs" button to the DOM var thumbsClass; ( config.thumbsNav ) ? thumbsClass = 'cr-hide' : thumbsClass = 'cr-show'; var $toggleThumbs = $('<span/>').addClass( thumbsClass ).appendTo( $el );
// add navigation buttons
var $navigation = $('$navNext = $el.find('span.cr-nav-next'), $navPrev = $el.find('span.cr-nav-prev'), navCSS;
// the navigation buttons will change the position depending on config.thumbsNav ( config.thumbsNav ) ? navCSS = { bottom : '55px' } : navCSS = { bottom : config.elH / 2 + 'px' };
$navNext.css( navCSS ); $navPrev.css( navCSS );
// setup. Organize the thumbs.. aux.setup( $thumbs );
// if we don't want the thumbs to be shown, // then show the text of the current item if( !settings.openThumbs ) { $thumbs.parent().hide(); aux.toggleText( $thumbs ); }
// navigation events $navNext.bind('click.crotator', function(e) { if( $thumbs.is(':animated') ) return false; config.slideshow = false; ( config.thumbsNav ) ? aux.navigateThumbs( $el, 1 ) : aux.navigateContent( $thumbs, $contentItems, 1 ); }); $navPrev.bind('click.crotator', function(e) { if( $thumbs.is(':animated') ) return false; config.slideshow = false; ( config.thumbsNav ) ? aux.navigateThumbs( $el, -1 ) : aux.navigateContent( $thumbs, $contentItems, -1 ); });
// thumb click event $thumbs.bind('click.crotator', function(e) { config.slideshow = false; aux.selectItem( $(this), $thumbs, $contentItems ); });
// show / hide thumbs event $toggleThumbs.bind('click.crotator', function(e) { config.slideshow = false; if( config.thumbsNav ) { $(this).removeClass('cr-hide').addClass('cr-show'); aux.toggleThumbs( $el, $thumbs, $navNext, $navPrev, -1, settings.toggleThumbsSpeed ); } else { $(this).removeClass('cr-show').addClass('cr-hide'); aux.toggleThumbs( $el, $thumbs, $navNext, $navPrev, 1, settings.toggleThumbsSpeed ); } });
// cliking more hides the thumbs to reveal the text $more.bind('click.crotator', function(e){ if( config.thumbsNav ) { $toggleThumbs.click(); } });
// slideshow if( settings.autoplay ) { config.slideshowCursor = 1;
config.slideshow_time = setTimeout(function() { aux.slideshow( $el, $thumbs, $contentItems, settings ); }, settings.slideshow_interval ); }
}); } } };
$.fn.crotator = function(method) { if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Method ' + method + ' does not exist on jQuery.crotator' ); } };
})(jQuery);