mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2026-02-04 09:30:05 +00:00
Website templates
This commit is contained in:
Dawid Olko
@@ -0,0 +1,307 @@
|
||||
/*
|
||||
|
||||
Quicksand 1.2.2
|
||||
|
||||
Reorder and filter items with a nice shuffling animation.
|
||||
|
||||
Copyright (c) 2010 Jacek Galanciak (razorjack.net) and agilope.com
|
||||
Big thanks for Piotr Petrus (riddle.pl) for deep code review and wonderful docs & demos.
|
||||
|
||||
Dual licensed under the MIT and GPL version 2 licenses.
|
||||
http://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt
|
||||
http://github.com/jquery/jquery/blob/master/GPL-LICENSE.txt
|
||||
|
||||
Project site: http://razorjack.net/quicksand
|
||||
Github site: http://github.com/razorjack/quicksand
|
||||
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
$.fn.quicksand = function (collection, customOptions) {
|
||||
var options = {
|
||||
duration: 750,
|
||||
easing: 'swing',
|
||||
attribute: 'data-id', // attribute to recognize same items within source and dest
|
||||
adjustHeight: 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant
|
||||
useScaling: true, // disable it if you're not using scaling effect or want to improve performance
|
||||
enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
|
||||
selector: '> *',
|
||||
dx: 0,
|
||||
dy: 0
|
||||
};
|
||||
$.extend(options, customOptions);
|
||||
|
||||
if ($.browser.msie || (typeof($.fn.scale) == 'undefined')) {
|
||||
// Got IE and want scaling effect? Kiss my ass.
|
||||
options.useScaling = false;
|
||||
}
|
||||
|
||||
var callbackFunction;
|
||||
if (typeof(arguments[1]) == 'function') {
|
||||
var callbackFunction = arguments[1];
|
||||
} else if (typeof(arguments[2] == 'function')) {
|
||||
var callbackFunction = arguments[2];
|
||||
}
|
||||
|
||||
|
||||
return this.each(function (i) {
|
||||
var val;
|
||||
var animationQueue = []; // used to store all the animation params before starting the animation; solves initial animation slowdowns
|
||||
var $collection = $(collection).clone(); // destination (target) collection
|
||||
var $sourceParent = $(this); // source, the visible container of source collection
|
||||
var sourceHeight = $(this).css('height'); // used to keep height and document flow during the animation
|
||||
|
||||
var destHeight;
|
||||
var adjustHeightOnCallback = false;
|
||||
|
||||
var offset = $($sourceParent).offset(); // offset of visible container, used in animation calculations
|
||||
var offsets = []; // coordinates of every source collection item
|
||||
|
||||
var $source = $(this).find(options.selector); // source collection items
|
||||
|
||||
// Replace the collection and quit if IE6
|
||||
if ($.browser.msie && $.browser.version.substr(0,1)<7) {
|
||||
$sourceParent.html('').append($collection);
|
||||
return;
|
||||
}
|
||||
|
||||
// Gets called when any animation is finished
|
||||
var postCallbackPerformed = 0; // prevents the function from being called more than one time
|
||||
var postCallback = function () {
|
||||
|
||||
if (!postCallbackPerformed) {
|
||||
postCallbackPerformed = 1;
|
||||
|
||||
// hack:
|
||||
// used to be: $sourceParent.html($dest.html()); // put target HTML into visible source container
|
||||
// but new webkit builds cause flickering when replacing the collections
|
||||
$toDelete = $sourceParent.find('> *');
|
||||
$sourceParent.prepend($dest.find('> *'));
|
||||
$toDelete.remove();
|
||||
|
||||
if (adjustHeightOnCallback) {
|
||||
$sourceParent.css('height', destHeight);
|
||||
}
|
||||
options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection
|
||||
if (typeof callbackFunction == 'function') {
|
||||
callbackFunction.call(this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Position: relative situations
|
||||
var $correctionParent = $sourceParent.offsetParent();
|
||||
var correctionOffset = $correctionParent.offset();
|
||||
if ($correctionParent.css('position') == 'relative') {
|
||||
if ($correctionParent.get(0).nodeName.toLowerCase() == 'body') {
|
||||
|
||||
} else {
|
||||
correctionOffset.top += (parseFloat($correctionParent.css('border-top-width')) || 0);
|
||||
correctionOffset.left +=( parseFloat($correctionParent.css('border-left-width')) || 0);
|
||||
}
|
||||
} else {
|
||||
correctionOffset.top -= (parseFloat($correctionParent.css('border-top-width')) || 0);
|
||||
correctionOffset.left -= (parseFloat($correctionParent.css('border-left-width')) || 0);
|
||||
correctionOffset.top -= (parseFloat($correctionParent.css('margin-top')) || 0);
|
||||
correctionOffset.left -= (parseFloat($correctionParent.css('margin-left')) || 0);
|
||||
}
|
||||
|
||||
// perform custom corrections from options (use when Quicksand fails to detect proper correction)
|
||||
if (isNaN(correctionOffset.left)) {
|
||||
correctionOffset.left = 0;
|
||||
}
|
||||
if (isNaN(correctionOffset.top)) {
|
||||
correctionOffset.top = 0;
|
||||
}
|
||||
|
||||
correctionOffset.left -= options.dx;
|
||||
correctionOffset.top -= options.dy;
|
||||
|
||||
// keeps nodes after source container, holding their position
|
||||
$sourceParent.css('height', $(this).height());
|
||||
|
||||
// get positions of source collections
|
||||
$source.each(function (i) {
|
||||
offsets[i] = $(this).offset();
|
||||
});
|
||||
|
||||
// stops previous animations on source container
|
||||
$(this).stop();
|
||||
var dx = 0; var dy = 0;
|
||||
$source.each(function (i) {
|
||||
$(this).stop(); // stop animation of collection items
|
||||
var rawObj = $(this).get(0);
|
||||
if (rawObj.style.position == 'absolute') {
|
||||
dx = -options.dx;
|
||||
dy = -options.dy;
|
||||
} else {
|
||||
dx = options.dx;
|
||||
dy = options.dy;
|
||||
}
|
||||
|
||||
rawObj.style.position = 'absolute';
|
||||
rawObj.style.margin = '0';
|
||||
|
||||
rawObj.style.top = (offsets[i].top - parseFloat(rawObj.style.marginTop) - correctionOffset.top + dy) + 'px';
|
||||
rawObj.style.left = (offsets[i].left - parseFloat(rawObj.style.marginLeft) - correctionOffset.left + dx) + 'px';
|
||||
});
|
||||
|
||||
// create temporary container with destination collection
|
||||
var $dest = $($sourceParent).clone();
|
||||
var rawDest = $dest.get(0);
|
||||
rawDest.innerHTML = '';
|
||||
rawDest.setAttribute('id', '');
|
||||
rawDest.style.height = 'auto';
|
||||
rawDest.style.width = $sourceParent.width() + 'px';
|
||||
$dest.append($collection);
|
||||
// insert node into HTML
|
||||
// Note that the node is under visible source container in the exactly same position
|
||||
// The browser render all the items without showing them (opacity: 0.0)
|
||||
// No offset calculations are needed, the browser just extracts position from underlayered destination items
|
||||
// and sets animation to destination positions.
|
||||
$dest.insertBefore($sourceParent);
|
||||
$dest.css('opacity', 0.0);
|
||||
rawDest.style.zIndex = -1;
|
||||
|
||||
rawDest.style.margin = '0';
|
||||
rawDest.style.position = 'absolute';
|
||||
rawDest.style.top = offset.top - correctionOffset.top + 'px';
|
||||
rawDest.style.left = offset.left - correctionOffset.left + 'px';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (options.adjustHeight === 'dynamic') {
|
||||
// If destination container has different height than source container
|
||||
// the height can be animated, adjusting it to destination height
|
||||
$sourceParent.animate({height: $dest.height()}, options.duration, options.easing);
|
||||
} else if (options.adjustHeight === 'auto') {
|
||||
destHeight = $dest.height();
|
||||
if (parseFloat(sourceHeight) < parseFloat(destHeight)) {
|
||||
// Adjust the height now so that the items don't move out of the container
|
||||
$sourceParent.css('height', destHeight);
|
||||
} else {
|
||||
// Adjust later, on callback
|
||||
adjustHeightOnCallback = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Now it's time to do shuffling animation
|
||||
// First of all, we need to identify same elements within source and destination collections
|
||||
$source.each(function (i) {
|
||||
var destElement = [];
|
||||
if (typeof(options.attribute) == 'function') {
|
||||
|
||||
val = options.attribute($(this));
|
||||
$collection.each(function() {
|
||||
if (options.attribute(this) == val) {
|
||||
destElement = $(this);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
|
||||
}
|
||||
if (destElement.length) {
|
||||
// The item is both in source and destination collections
|
||||
// It it's under different position, let's move it
|
||||
if (!options.useScaling) {
|
||||
animationQueue.push(
|
||||
{
|
||||
element: $(this),
|
||||
animation:
|
||||
{top: destElement.offset().top - correctionOffset.top,
|
||||
left: destElement.offset().left - correctionOffset.left,
|
||||
opacity: 1.0
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
animationQueue.push({
|
||||
element: $(this),
|
||||
animation: {top: destElement.offset().top - correctionOffset.top,
|
||||
left: destElement.offset().left - correctionOffset.left,
|
||||
opacity: 1.0,
|
||||
scale: '1.0'
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
} else {
|
||||
// The item from source collection is not present in destination collections
|
||||
// Let's remove it
|
||||
if (!options.useScaling) {
|
||||
animationQueue.push({element: $(this),
|
||||
animation: {opacity: '0.0'}});
|
||||
} else {
|
||||
animationQueue.push({element: $(this), animation: {opacity: '0.0',
|
||||
scale: '0.0'}});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$collection.each(function (i) {
|
||||
// Grab all items from target collection not present in visible source collection
|
||||
|
||||
var sourceElement = [];
|
||||
var destElement = [];
|
||||
if (typeof(options.attribute) == 'function') {
|
||||
val = options.attribute($(this));
|
||||
$source.each(function() {
|
||||
if (options.attribute(this) == val) {
|
||||
sourceElement = $(this);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$collection.each(function() {
|
||||
if (options.attribute(this) == val) {
|
||||
destElement = $(this);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
sourceElement = $source.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
|
||||
destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
|
||||
}
|
||||
|
||||
var animationOptions;
|
||||
if (sourceElement.length === 0) {
|
||||
// No such element in source collection...
|
||||
if (!options.useScaling) {
|
||||
animationOptions = {
|
||||
opacity: '1.0'
|
||||
};
|
||||
} else {
|
||||
animationOptions = {
|
||||
opacity: '1.0',
|
||||
scale: '1.0'
|
||||
};
|
||||
}
|
||||
// Let's create it
|
||||
d = destElement.clone();
|
||||
var rawDestElement = d.get(0);
|
||||
rawDestElement.style.position = 'absolute';
|
||||
rawDestElement.style.margin = '0';
|
||||
rawDestElement.style.top = destElement.offset().top - correctionOffset.top + 'px';
|
||||
rawDestElement.style.left = destElement.offset().left - correctionOffset.left + 'px';
|
||||
d.css('opacity', 0.0); // IE
|
||||
if (options.useScaling) {
|
||||
d.css('transform', 'scale(0.0)');
|
||||
}
|
||||
d.appendTo($sourceParent);
|
||||
|
||||
animationQueue.push({element: $(d),
|
||||
animation: animationOptions});
|
||||
}
|
||||
});
|
||||
|
||||
$dest.remove();
|
||||
options.enhancement($sourceParent); // Perform custom visual enhancements during the animation
|
||||
for (i = 0; i < animationQueue.length; i++) {
|
||||
animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing, postCallback);
|
||||
}
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,45 @@
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
|
||||
if (jQuery().quicksand) {
|
||||
|
||||
// Clone applications to get a second collection
|
||||
var $data = $(".portfolio").clone();
|
||||
|
||||
//NOTE: Only filter on the main portfolio page, not on the subcategory pages
|
||||
$('.filter li').click(function(e) {
|
||||
$(".filter li").removeClass("active");
|
||||
// Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
|
||||
var filterClass=$(this).attr('class').split(' ').slice(-1)[0];
|
||||
|
||||
if (filterClass == 'all') {
|
||||
var $filteredData = $data.find('.item-thumbs');
|
||||
} else {
|
||||
var $filteredData = $data.find('.item-thumbs[data-type=' + filterClass + ']');
|
||||
}
|
||||
$(".portfolio").quicksand($filteredData, {
|
||||
duration: 600,
|
||||
adjustHeight: 'auto'
|
||||
}, function () {
|
||||
|
||||
// Portfolio fancybox
|
||||
$(".fancybox").fancybox({
|
||||
padding : 0,
|
||||
beforeShow: function () {
|
||||
this.title = $(this.element).attr('title');
|
||||
this.title = '<h4>' + this.title + '</h4>' + '<p>' + $(this.element).parent().find('img').attr('alt') + '</p>';
|
||||
},
|
||||
helpers : {
|
||||
title : { type: 'inside' },
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
$(this).addClass("active");
|
||||
return false;
|
||||
});
|
||||
|
||||
}//if quicksand
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user