Der hier benutze Code

    <style>
    /*-------------------------
    Simple reset
--------------------------*/


*{
    margin:0;
	padding:0;
}


/*-------------------------
	General Styles
--------------------------*/


html{
	background: url('/javascript-beispiele/bilder/bg_tile.jpg') #18222b;
}

body{
	color:#fcfcfc;
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
	min-height: 930px;
	background:url('/javascript-beispiele/bilder/bg_center.jpg') center 240px no-repeat;
}

a, a:visited {
	text-decoration:none;
	outline:none;
	color:#54a6de;
}

a:hover{
	text-decoration:underline;
}


/*----------------------------
	Headers & Footers
-----------------------------*/


header{
	background:url('/javascript-beispiele/bilder/header.png') repeat-x;
	display: block;
	height: 220px;
	padding: 10px;
}

h1{
	background:url('/javascript-beispiele/bilder/logo.png') no-repeat center center;
	height: 80px;
	margin: 75px auto;
	overflow: hidden;
	text-align: center;
	text-indent: -99999px;
}



/*----------------------------
	Green filter bar
-----------------------------*/


#filter {
	background: url("/javascript-beispiele/bilder/bar.png") repeat-x 0 -94px;
	display: block;
	height: 39px;
	margin: 55px auto;
	position: relative;
	width: 600px;
	text-align:center;
	
	-moz-box-shadow:0 4px 4px #000;
	-webkit-box-shadow:0 4px 4px #000;
	box-shadow:0 4px 4px #000;
}

#filter:before, #filter:after {
	background: url("/javascript-beispiele/bilder/bar.png") no-repeat;
	height: 43px;
	position: absolute;
	top: 0;
	width: 78px;
	content: '';
	
	-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
	-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
	box-shadow:0 2px 0 rgba(0,0,0,0.4);
}

#filter:before {
	background-position: 0 -47px;
	left: -78px;
}

#filter:after {
	background-position: 0 0;
	right: -78px;
}

#filter a{
	color: #FFFFFF;
	display: inline-block;
	height: 39px;
	line-height: 37px;
	padding: 0 15px;
	text-shadow:1px 1px 1px #315218;
}

#filter a:hover{
	text-decoration:none;
}

#filter a.active{
	background: url("/javascript-beispiele/bilder/bar.png") repeat-x 0 -138px;
	box-shadow:	1px 0 0 rgba(255, 255, 255, 0.2),
				-1px 0 0 rgba(255, 255, 255, 0.2),
				1px 0 1px rgba(0,0,0,0.2) inset,
				-1px 0 1px rgba(0,0,0,0.2) inset;
}


/*----------------------------
	Content area
-----------------------------*/


#container{
	display:block;
	overflow:hidden;
	width: 830px;
	margin:0 auto;
}

#container li{

	float: left;
	height: 96px;
	list-style: none outside none;
	margin: 6px;
	position: relative;
	width: 125px;
	
	-moz-box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;
}

#container ul{
	overflow:hidden;
}

#container ul.hidden{
	display:none;
}


/*----------------------------
	The Footer
-----------------------------*/


footer{
	display:block;
	background-color:#13181d;
	position:fixed;
	width:100%;
	height:70px;
	bottom:0;
	left:0;
	z-index: 100000;
}

footer h2{
	font-size:20px;
	font-weight:normal;
	left:50%;
	margin-left:-400px;
	padding:22px 0;
	position:absolute;
	width:400px;
	color:#eee;
}

footer a.tzine,a.tzine:visited{
	background:url("/javascript-beispiele/bilder/tzine.png") no-repeat right top;
	border:none;
	text-decoration:none;
	color:#FCFCFC;
	font-size:12px;
	height:70px;
	left:50%;
	line-height:31px;
	margin:23px 0 0 110px;
	position:absolute;
	top:0;
	width:290px;
}
</style>
    <body>

        <header>
            

My Portfolio

</header> <nav id="filter"> <section id="container">
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
  • Illustration
</section> <script> (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); </script> <script> $(document).ready(function(){ var items = $('#stage li'), itemsByTags = {}; // Looping though all the li items: items.each(function(i){ var elem = $(this), tags = elem.data('tags').split(','); // Adding a data-id attribute. Required by the Quicksand plugin: elem.attr('data-id',i); $.each(tags,function(key,value){ // Removing extra whitespace: value = $.trim(value); if(!(value in itemsByTags)){ // Create an empty array to hold this item: itemsByTags[value] = []; } // Each item is added to one array per tag: itemsByTags[value].push(elem); }); }); // Creating the "Everything" option in the menu: createList('Everything',items); // Looping though the arrays in itemsByTags: $.each(itemsByTags,function(k,v){ createList(k,v); }); $('#filter a').live('click',function(e){ var link = $(this); link.addClass('active').siblings().removeClass('active'); // Using the Quicksand plugin to animate the li items. // It uses data('list') defined by our createList function: $('#stage').quicksand(link.data('list').find('li')); e.preventDefault(); }); $('#filter a:first').click(); function createList(text,items){ // This is a helper function that takes the // text of a menu button and array of li items // Creating an empty unordered list: var ul = $('

Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0