123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- jQuery.fn.timelinr = function(options){
-
- settings = jQuery.extend({
- orientation: 'horizontal',
- containerDiv: '#timeline',
- datesDiv: '#dates',
- datesSelectedClass: 'selected',
- datesSpeed: 'normal',
- issuesDiv: '#issues',
- issuesSelectedClass: 'selected',
- issuesSpeed: 'fast',
- issuesTransparency: 0.2,
- issuesTransparencySpeed: 500,
- prevButton: '#prev',
- nextButton: '#next',
- arrowKeys: 'false',
- startAt: 1,
- autoPlay: 'false',
- autoPlayDirection: 'forward',
- autoPlayPause: 2000
- }, options);
- $(function(){
-
- var howManyDates = $(settings.datesDiv+' li').length;
- var howManyIssues = $(settings.issuesDiv+' li').length;
- var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
- var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
- var widthContainer = $(settings.containerDiv).width();
- var heightContainer = $(settings.containerDiv).height();
- var widthIssues = $(settings.issuesDiv).width();
- var heightIssues = $(settings.issuesDiv).height();
- var widthIssue = $(settings.issuesDiv+' li').width();
- var heightIssue = $(settings.issuesDiv+' li').height();
- var widthDates = $(settings.datesDiv).width();
- var heightDates = $(settings.datesDiv).height();
- var widthDate = $(settings.datesDiv+' li').width();
- var heightDate = $(settings.datesDiv+' li').height();
-
- if(settings.orientation == 'horizontal') {
- $(settings.issuesDiv).width(widthIssue*howManyIssues);
- $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
- var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
- } else if(settings.orientation == 'vertical') {
- $(settings.issuesDiv).height(heightIssue*howManyIssues);
- $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
- var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
- }
-
- $(settings.datesDiv+' a').click(function(event){
- event.preventDefault();
-
- var whichIssue = $(this).text();
- var currentIndex = $(this).parent().prevAll().length;
-
- if(settings.orientation == 'horizontal') {
- $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
- } else if(settings.orientation == 'vertical') {
- $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
- }
- $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
-
- if(howManyDates == 1) {
- $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
- } else if(howManyDates == 2) {
- if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
- $(settings.prevButton).fadeOut('fast');
- $(settings.nextButton).fadeIn('fast');
- }
- else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
- $(settings.nextButton).fadeOut('fast');
- $(settings.prevButton).fadeIn('fast');
- }
- } else {
- if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
- $(settings.nextButton).fadeIn('fast');
- $(settings.prevButton).fadeOut('fast');
- }
- else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
- $(settings.prevButton).fadeIn('fast');
- $(settings.nextButton).fadeOut('fast');
- }
- else {
- $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
- }
- }
-
- $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
- $(this).addClass(settings.datesSelectedClass);
- if(settings.orientation == 'horizontal') {
- $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
- } else if(settings.orientation == 'vertical') {
- $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
- }
- });
- $(settings.nextButton).bind('click', function(event){
- event.preventDefault();
-
- var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
- if(settings.orientation == 'horizontal') {
- var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
- var currentIssueIndex = currentPositionIssues/widthIssue;
- var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
- var currentIssueDate = currentPositionDates-widthDate;
- if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) {
- $(settings.issuesDiv).stop();
- $(settings.datesDiv+' li:last-child a').click();
- } else {
- if (!$(settings.issuesDiv).is(':animated')) {
-
- $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
- }
- }
- } else if(settings.orientation == 'vertical') {
- var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
- var currentIssueIndex = currentPositionIssues/heightIssue;
- var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
- var currentIssueDate = currentPositionDates-heightDate;
- if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) {
- $(settings.issuesDiv).stop();
- $(settings.datesDiv+' li:last-child a').click();
- } else {
- if (!$(settings.issuesDiv).is(':animated')) {
-
- $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
- }
- }
- }
-
- if(howManyDates == 1) {
- $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
- } else if(howManyDates == 2) {
- if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
- $(settings.prevButton).fadeOut('fast');
- $(settings.nextButton).fadeIn('fast');
- }
- else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
- $(settings.nextButton).fadeOut('fast');
- $(settings.prevButton).fadeIn('fast');
- }
- } else {
- if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
- $(settings.prevButton).fadeOut('fast');
- }
- else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
- $(settings.nextButton).fadeOut('fast');
- }
- else {
- $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
- }
- }
- });
- $(settings.prevButton).click(function(event){
- event.preventDefault();
-
- var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
- if(settings.orientation == 'horizontal') {
- var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
- var currentIssueIndex = currentPositionIssues/widthIssue;
- var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
- var currentIssueDate = currentPositionDates+widthDate;
- if(currentPositionIssues >= 0) {
- $(settings.issuesDiv).stop();
- $(settings.datesDiv+' li:first-child a').click();
- } else {
- if (!$(settings.issuesDiv).is(':animated')) {
-
- $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
- }
- }
- } else if(settings.orientation == 'vertical') {
- var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
- var currentIssueIndex = currentPositionIssues/heightIssue;
- var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
- var currentIssueDate = currentPositionDates+heightDate;
- if(currentPositionIssues >= 0) {
- $(settings.issuesDiv).stop();
- $(settings.datesDiv+' li:first-child a').click();
- } else {
- if (!$(settings.issuesDiv).is(':animated')) {
-
- $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
- }
- }
- }
-
- if(howManyDates == 1) {
- $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
- } else if(howManyDates == 2) {
- if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
- $(settings.prevButton).fadeOut('fast');
- $(settings.nextButton).fadeIn('fast');
- }
- else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
- $(settings.nextButton).fadeOut('fast');
- $(settings.prevButton).fadeIn('fast');
- }
- } else {
- if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
- $(settings.prevButton).fadeOut('fast');
- }
- else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
- $(settings.nextButton).fadeOut('fast');
- }
- else {
- $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
- }
- }
- });
-
- if(settings.arrowKeys=='true') {
- if(settings.orientation=='horizontal') {
- $(document).keydown(function(event){
- if (event.keyCode == 39) {
- $(settings.nextButton).click();
- }
- if (event.keyCode == 37) {
- $(settings.prevButton).click();
- }
- });
- } else if(settings.orientation=='vertical') {
- $(document).keydown(function(event){
- if (event.keyCode == 40) {
- $(settings.nextButton).click();
- }
- if (event.keyCode == 38) {
- $(settings.prevButton).click();
- }
- });
- }
- }
-
- $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
-
- if(settings.autoPlay == 'true') {
- setInterval("autoPlay()", settings.autoPlayPause);
- }
- });
- };
- function autoPlay(){
- var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
- if(settings.autoPlayDirection == 'forward') {
- if(currentDate.parent().is('li:last-child')) {
- $(settings.datesDiv+' li:first-child').find('a').trigger('click');
- } else {
- currentDate.parent().next().find('a').trigger('click');
- }
- } else if(settings.autoPlayDirection == 'backward') {
- if(currentDate.parent().is('li:first-child')) {
- $(settings.datesDiv+' li:last-child').find('a').trigger('click');
- } else {
- currentDate.parent().prev().find('a').trigger('click');
- }
- }
- }
|