/** * jqFancyTransitions - jQuery plugin * @version: 1.8 (2010/06/13) * @requires jQuery v1.2.2 or later * @author Ivan Lazarevic * Examples and documentation at: http://www.workshop.rs/projects/jqfancytransitions * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html **/ (function($) { var opts = new Array; var level = new Array; var img = new Array; var links = new Array; var titles = new Array; var order = new Array; var imgInc = new Array; var inc = new Array; var stripInt = new Array; var imgInt = new Array; $.fn.jqFancyTransitions = $.fn.jqfancytransitions = function(options){ init = function(el){ opts[el.id] = $.extend({}, $.fn.jqFancyTransitions.defaults, options); img[el.id] = new Array(); // images array links[el.id] = new Array(); // links array titles[el.id] = new Array(); // titles array order[el.id] = new Array(); // strips order array imgInc[el.id] = 0; inc[el.id] = 0; params = opts[el.id]; if(params.effect == 'zipper'){ params.direction = 'alternate'; params.position = 'alternate'; } if(params.effect == 'wave'){ params.direction = 'alternate'; params.position = 'top'; } if(params.effect == 'curtain'){ params.direction = 'alternate'; params.position = 'curtain'; } // width of strips stripWidth = parseInt(params.width / params.strips); gap = params.width - stripWidth*params.strips; // number of pixels stripLeft = 0; // create images and titles arrays $.each($('#'+el.id+' img'), function(i,item){ img[el.id][i] = $(item).attr('src'); links[el.id][i] = $(item).next().attr('href'); titles[el.id][i] = $(item).attr('alt') ? $(item).attr('alt') : ''; $(item).hide(); }); // set panel $('#'+el.id).css({ 'background-image':'url('+img[el.id][0]+')', 'width': params.width, 'height': params.height, 'position': 'relative', 'background-position': 'top left' }); // create title bar $('#'+el.id).append("
"+titles[el.id][0]+"
"); if(titles[el.id][imgInc[el.id]]) $('#ft-title-'+el.id).css('opacity',opts[el.id].titleOpacity); else $('#ft-title-'+el.id).css('opacity',0); if(params.navigation){ $.navigation(el); $('#ft-buttons-'+el.id).children().first().addClass('ft-button-'+el.id+'-active'); } odd = 1; // creating bars // and set their position for(j=1; j < params.strips+1; j++){ if( gap > 0){ tstripWidth = stripWidth + 1; gap--; } else { tstripWidth = stripWidth; } if(params.links) $('#'+el.id).append(""); else $('#'+el.id).append("
"); // positioning bars $("#ft-"+el.id+j).css({ 'background-position': -stripLeft +'px top', 'left' : stripLeft }); stripLeft += tstripWidth; if(params.position == 'bottom') $("#ft-"+el.id+j).css( 'bottom', 0 ); if (j%2 == 0 && params.position == 'alternate') $("#ft-"+el.id+j).css( 'bottom', 0 ); // bars order // fountain if(params.direction == 'fountain' || params.direction == 'fountainAlternate'){ order[el.id][j-1] = parseInt(params.strips/2) - (parseInt(j/2)*odd); order[el.id][params.strips-1] = params.strips; // fix for odd number of bars odd *= -1; } else { // linear order[el.id][j-1] = j; } } $('.ft-'+el.id).mouseover(function(){ opts[el.id].pause = true; }); $('.ft-'+el.id).mouseout(function(){ opts[el.id].pause = false; }); $('#ft-title-'+el.id).mouseover(function(){ opts[el.id].pause = true; }); $('#ft-title-'+el.id).mouseout(function(){ opts[el.id].pause = false; }); clearInterval(imgInt[el.id]); imgInt[el.id] = setInterval(function() { $.transition(el) }, params.delay+params.stripDelay*params.strips); }; // transition $.transition = function(el,direction){ if(opts[el.id].pause == true) return; stripInt[el.id] = setInterval(function() { $.strips(order[el.id][inc[el.id]], el) },opts[el.id].stripDelay); $('#'+el.id).css({ 'background-image': 'url('+img[el.id][imgInc[el.id]]+')' }); if(typeof(direction) == "undefined") imgInc[el.id]++; else if(direction == 'prev') imgInc[el.id]--; else imgInc[el.id] = direction; if (imgInc[el.id] == img[el.id].length) { imgInc[el.id] = 0; } if (imgInc[el.id] == -1){ imgInc[el.id] = img[el.id].length-1; } if(titles[el.id][imgInc[el.id]]!=''){ $('#ft-title-'+el.id).animate({ opacity: 0 }, opts[el.id].titleSpeed, function(){ $(this).html(titles[el.id][imgInc[el.id]]).animate({ opacity: opts[el.id].titleOpacity }, opts[el.id].titleSpeed); }); } else { $('#ft-title-'+el.id).animate({ opacity: 0}, opts[el.id].titleSpeed); } inc[el.id] = 0; buttons = $('#ft-buttons-'+el.id).children(); buttons.each(function(index){ if(index == imgInc[el.id]){ $(this).addClass('ft-button-'+el.id+'-active'); } else{ $(this).removeClass('ft-button-'+el.id+'-active'); } }); if(opts[el.id].direction == 'random') $.fisherYates (order[el.id]); if((opts[el.id].direction == 'right' && order[el.id][0] == 1) || opts[el.id].direction == 'alternate' || opts[el.id].direction == 'fountainAlternate') order[el.id].reverse(); }; // strips animations $.strips = function(itemId, el){ temp = opts[el.id].strips; if (inc[el.id] == temp) { clearInterval(stripInt[el.id]); return; } $('.ft-'+el.id).attr('href',links[el.id][imgInc[el.id]]); if(opts[el.id].position == 'curtain'){ currWidth = $('#ft-'+el.id+itemId).width(); $('#ft-'+el.id+itemId).css({ width: 0, opacity: 0, 'background-image': 'url('+img[el.id][imgInc[el.id]]+')' }); $('#ft-'+el.id+itemId).animate({ width: currWidth, opacity: 1 }, 1000); } else { $('#ft-'+el.id+itemId).css({ height: 0, opacity: 0, 'background-image': 'url('+img[el.id][imgInc[el.id]]+')' }); $('#ft-'+el.id+itemId).animate({ height: opts[el.id].height, opacity: 1 }, 1000); } inc[el.id]++; }; // navigation $.navigation = function(el){ // create prev and next $('#'+el.id).append("prev"); $('#'+el.id).append("next"); $('#ft-prev-'+el.id).css({ 'position' : 'absolute', 'top' : params.height/2 - 15, 'left' : 0, 'z-index' : 1001, 'line-height': '30px', 'opacity' : 0.7 }).click( function(e){ e.preventDefault(); $.transition(el,'prev'); clearInterval(imgInt[el.id]); imgInt[el.id] = setInterval(function() { $.transition(el) }, params.delay+params.stripDelay*params.strips); }); $('#ft-next-'+el.id).css({ 'position' : 'absolute', 'top' : params.height/2 - 15, 'right' : 0, 'z-index' : 1001, 'line-height': '30px', 'opacity' : 0.7 }).click( function(e){ e.preventDefault(); $.transition(el); clearInterval(imgInt[el.id]); imgInt[el.id] = setInterval(function() { $.transition(el) }, params.delay+params.stripDelay*params.strips); }); // image buttons $("
").insertAfter($('#'+el.id)); $('#ft-buttons-'+el.id).css({ 'text-align' : 'right', 'padding-top' : 5, 'width' : opts[el.id].width }); for(k=1;k"+k+""); } $('.ft-button-'+el.id).css({ 'padding' : 5 }); $.each($('.ft-button-'+el.id), function(i,item){ $(item).click( function(e){ e.preventDefault(); $.transition(el,i); clearInterval(imgInt[el.id]); imgInt[el.id] = setInterval(function() { $.transition(el) }, params.delay+params.stripDelay*params.strips); }) }); } // shuffle array function $.fisherYates = function(arr) { var i = arr.length; if ( i == 0 ) return false; while ( --i ) { var j = Math.floor( Math.random() * ( i + 1 ) ); var tempi = arr[i]; var tempj = arr[j]; arr[i] = tempj; arr[j] = tempi; } } this.each ( function(){ init(this); } ); }; // default values $.fn.jqFancyTransitions.defaults = { width: 500, // width of panel height: 332, // height of panel strips: 10, // number of strips delay: 5000, // delay between images in ms stripDelay: 50, // delay beetwen strips in ms titleOpacity: 0.7, // opacity of title titleSpeed: 1000, // speed of title appereance in ms position: 'alternate', // top, bottom, alternate, curtain direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate effect: '', // curtain, zipper, wave navigation: false, // prev next and buttons links : false // show images as links }; })(jQuery);