/**
* 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("");
$('#'+el.id).append("");
$('#ft-prev-'+el.id).css({
'position' : 'absolute',
'top' : params.height/2 - 15,
'left' : 0,
'z-index' : 1001,
'line-height': '30px',
'opacity' : 1
}).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' : 1
}).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: 900, // width of panel
height: 350, // 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: true, // prev next and buttons
links : true // show images as links
};
})(jQuery);