mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2025-10-27 07:53:11 +01:00
158 lines
5.7 KiB
JavaScript
158 lines
5.7 KiB
JavaScript
/*
|
|
Kwicks for jQuery (version 1.5.1)
|
|
Copyright (c) 2008 Jeremy Martin
|
|
http://www.jeremymartin.name/projects.php?project=kwicks
|
|
|
|
Licensed under the MIT license:
|
|
http://www.opensource.org/licenses/mit-license.php
|
|
|
|
Any and all use of this script must be accompanied by this copyright/license notice in its present form.
|
|
*/
|
|
|
|
(function($){
|
|
$.fn.kwicks = function(options) {
|
|
var defaults = {
|
|
isVertical: false,
|
|
sticky: false,
|
|
defaultKwick: 0,
|
|
event: 'mouseover',
|
|
spacing: 0,
|
|
duration: 500
|
|
};
|
|
var o = $.extend(defaults, options);
|
|
var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
|
|
var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
|
|
|
|
return this.each(function() {
|
|
container = $(this);
|
|
var kwicks = container.children('li');
|
|
var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
|
|
if(!o.max) {
|
|
o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
|
|
} else {
|
|
o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
|
|
}
|
|
// set width of container ul
|
|
if(o.isVertical) {
|
|
container.css({
|
|
width : kwicks.eq(0).css('width'),
|
|
height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
|
|
});
|
|
} else {
|
|
container.css({
|
|
width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
|
|
height : kwicks.eq(0).css('height')
|
|
});
|
|
}
|
|
|
|
// pre calculate left or top values for all kwicks but the first and last
|
|
// i = index of currently hovered kwick, j = index of kwick we're calculating
|
|
var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
|
|
for(i = 0; i < kwicks.size(); i++) {
|
|
preCalcLoTs[i] = [];
|
|
// don't need to calculate values for first or last kwick
|
|
for(j = 1; j < kwicks.size() - 1; j++) {
|
|
if(i == j) {
|
|
preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
|
|
} else {
|
|
preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
|
|
}
|
|
}
|
|
}
|
|
|
|
// loop through all kwick elements
|
|
kwicks.each(function(i) {
|
|
var kwick = $(this);
|
|
// set initial width or height and left or top values
|
|
// set first kwick
|
|
if(i === 0) {
|
|
kwick.css(LoT, '0px');
|
|
}
|
|
// set last kwick
|
|
else if(i == kwicks.size() - 1) {
|
|
kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
|
|
}
|
|
// set all other kwicks
|
|
else {
|
|
if(o.sticky) {
|
|
kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
|
|
} else {
|
|
kwick.css(LoT, (i * normWoH) + (i * o.spacing));
|
|
}
|
|
}
|
|
// correct size in sticky mode
|
|
if(o.sticky) {
|
|
if(o.defaultKwick == i) {
|
|
kwick.css(WoH, o.max + 'px');
|
|
kwick.addClass('active');
|
|
} else {
|
|
kwick.css(WoH, o.min + 'px');
|
|
}
|
|
}
|
|
kwick.css({
|
|
margin: 0,
|
|
position: 'absolute'
|
|
});
|
|
|
|
kwick.bind(o.event, function() {
|
|
// calculate previous width or heights and left or top values
|
|
var prevWoHs = []; // prevWoHs = previous Widths or Heights
|
|
var prevLoTs = []; // prevLoTs = previous Left or Tops
|
|
kwicks.stop().removeClass('active');
|
|
for(j = 0; j < kwicks.size(); j++) {
|
|
prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
|
|
prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
|
|
}
|
|
var aniObj = {};
|
|
aniObj[WoH] = o.max;
|
|
var maxDif = o.max - prevWoHs[i];
|
|
var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
|
|
kwick.addClass('active').animate(aniObj, {
|
|
step: function(now) {
|
|
// calculate animation completeness as percentage
|
|
var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
|
|
// adjsut other elements based on percentage
|
|
kwicks.each(function(j) {
|
|
if(j != i) {
|
|
kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
|
|
}
|
|
if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
|
|
kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
|
|
}
|
|
});
|
|
},
|
|
duration: o.duration,
|
|
easing: o.easing
|
|
});
|
|
});
|
|
});
|
|
if(!o.sticky) {
|
|
container.bind("mouseleave", function() {
|
|
var prevWoHs = [];
|
|
var prevLoTs = [];
|
|
kwicks.removeClass('active').stop();
|
|
for(i = 0; i < kwicks.size(); i++) {
|
|
prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
|
|
prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
|
|
}
|
|
var aniObj = {};
|
|
aniObj[WoH] = normWoH;
|
|
var normDif = normWoH - prevWoHs[0];
|
|
kwicks.eq(0).animate(aniObj, {
|
|
step: function(now) {
|
|
var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
|
|
for(i = 1; i < kwicks.size(); i++) {
|
|
kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
|
|
if(i < kwicks.size() - 1) {
|
|
kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
|
|
}
|
|
}
|
|
},
|
|
duration: o.duration,
|
|
easing: o.easing
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
})(jQuery); |