(function($){ $.fn.extend({ infiniteCarousel: function(options) { var defaults = { transitionSpeed : 1500, displayTime : 6000, textholderHeight : .1, displayProgressBar : 0 }; var options = $.extend(defaults, options); return this.each(function() { var randID = Math.round(Math.random()*100000000); var o=options; var obj = $(this); var numImages = $('img', obj).length; // Number of images var imgHeight = $('img:first', obj).height(); var imgWidth = $('img:first', obj).width(); var autopilot = 1; $('p', obj).hide(); // Hide any text paragraphs in the carousel $(obj).width(imgWidth).height(imgHeight); // Build progress bar if(o.displayProgressBar) { $(obj).append('
'); $('#progress'+randID).width(imgWidth).height(5).css('opacity','.5'); } // Move last image and stick it on the front $(obj).css({'overflow':'hidden','position':'relative'}); $('li:last', obj).prependTo($('ul', obj)); $('ul', obj).css('left',-imgWidth+'px'); // Build textholder div thats as wide as the carousel and 20%-25% of the height $(obj).append('
'); var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop')); var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight')); $('#textholder'+randID).width(imgWidth-(correctTHWidth * 2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#FFF','opacity':'0.5'}); showtext($('li:eq(1) p', obj).html()); // Prev/next button(img) html = '
'; html += '
'; $(obj).append(html); // Pause/play button(img) html = 'Pause'; html += ''; $(obj).append(html); $('#pause_btn'+randID).css('opacity','.5').hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)}); $('#pause_btn'+randID).click(function(){ autopilot = 0; $('#progress'+randID).stop().fadeOut(); clearTimeout(clearInt); $('#pause_btn'+randID).fadeOut(250); $('#play_btn'+randID).fadeIn(250); showminmax(); }); $('#play_btn'+randID).css('opacity','.5').hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)}); $('#play_btn'+randID).click(function(){ autopilot = 1; anim('next'); $('#play_btn'+randID).hide(); clearInt=setInterval(function(){anim('next');},o.displayTime+o.transitionSpeed); setTimeout(function(){$('#pause_btn'+randID).show();$('#progress'+randID).fadeIn().width(imgWidth).height(5);},o.transitionSpeed); }); // Left and right arrow image button actions $('#btn_rt'+randID).css('opacity','.75').click(function(){ autopilot = 0; $('#progress'+randID).stop().fadeOut(); anim('next'); setTimeout(function(){$('#play_btn'+randID).fadeIn(250);},o.transitionSpeed); clearTimeout(clearInt); }).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.75'},250)}); $('#btn_lt'+randID).css('opacity','.75').click(function(){ autopilot = 0; $('#progress'+randID).stop().fadeOut(); anim('prev'); setTimeout(function(){$('#play_btn'+randID).fadeIn(250);},o.transitionSpeed); clearTimeout(clearInt); }).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.75'},250)}); function showtext(t) { // the text will always be the text of the second list item (if it exists) if(t != null) { $('#textholder'+randID).html(t).animate({marginBottom:'0px'},500); // Raise textholder showminmax(); } } function showminmax() { if(!autopilot) { html = ''; html += ''; $('#textholder'+randID).append(html); $('#min').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+24+'px'},500,function(){$("#min,#max").toggle();});}); $('#max').click(function(){$('#textholder'+randID).animate({marginBottom:'0px'},500,function(){$("#min,#max").toggle();});}); $('#close').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);}); } } function anim(direction) { // Fade left/right arrows out when transitioning $('#btn_rt'+randID).fadeOut(500); $('#btn_lt'+randID).fadeOut(500); // animate textholder out of frame $('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500); //?? Fade out play/pause? $('#pause_btn'+randID).fadeOut(250); $('#play_btn'+randID).fadeOut(250); if(direction == "next") { // Copy leftmost (first) li and insert it after the last li $('li:first', obj).clone().insertAfter($('li:last', obj)); // Update width and left position of ul and animate ul to the left $('ul', obj) .width(imgWidth*(numImages+1)) .animate({left:-imgWidth*2},o.transitionSpeed,function(){ $('li:first', obj).remove(); $('ul', obj).css('left',-imgWidth+'px').width(imgWidth*numImages); $('#btn_rt'+randID).fadeIn(500); $('#btn_lt'+randID).fadeIn(500); if(autopilot) $('#pause_btn'+randID).fadeIn(250); showtext($('li:eq(1) p', obj).html()); if(autopilot) { $('#progress'+randID).width(imgWidth).height(5); $('#progress'+randID).animate({'width':0},o.displayTime,function(){ $('#pause_btn'+randID).fadeOut(50); setTimeout(function(){$('#pause_btn'+randID).fadeIn(250)},o.transitionSpeed) }); } }); } if(direction == "prev") { // Copy rightmost (last) li and insert it after the first li $('li:last', obj).clone().insertBefore($('li:first', obj)); // Update width and left position of ul and animate ul to the right $('ul', obj) .width(imgWidth*(numImages+1)) .css('left',-imgWidth*2+'px') .animate({left:-imgWidth},o.transitionSpeed,function(){ $('li:last', obj).remove(); $('ul', obj).width(imgWidth*numImages); $('#btn_rt'+randID).fadeIn(500); $('#btn_lt'+randID).fadeIn(500); if(autopilot) $('#pause_btn'+randID).fadeIn(250); showtext($('li:eq(1) p', obj).html()); }); } } var clearInt = setInterval(function(){anim('next');},o.displayTime+o.transitionSpeed); $('#progress'+randID).animate({'width':0},o.displayTime+o.transitionSpeed,function(){ $('#pause_btn'+randID).fadeOut(100); setTimeout(function(){$('#pause_btn'+randID).fadeIn(250)},o.transitionSpeed) }); }); } }); })(jQuery);