Asien Reiseprofi Wookmark

by Patrick Ludewig

HTML

<script src="http://web68.srv4.cccc.de/www.asien-reiseprofi.de/html/js/plugins.min.js"></script>
<link rel="stylesheet" href="http://web68.srv4.cccc.de/www.asien-reiseprofi.de/html/css/screen.css">
<button>Test</button>
<!-- Flexible Content -->
	<div class="row">
		<div class="small-12 twelve columns">

			<!-- Category Primary Filter Group -->
			<section class="modul-category-filter">

				<div class="modul-category-filter--primary">
					<ul>
						<li class="modul-category-filter-tag" data-filter="rundreisen">
							<a href="">Rundreisen</a>
						</li>
						<li class="modul-category-filter-tag" data-filter="badeurlaub">
							<a href="">Badeurlaub</a>
						</li>
						<li class="modul-category-filter-tag" data-filter="private_rundreisen">
							<a href="">Private Rundreisen</a>
						</li>
					</ul>
				</div>
			</section>
			<!-- / Category Primary Filter Group End -->

		</div>
	</div>
	<div class="small-12 twelve">
		<!-- Category Secondary Filter Group -->
		<section class="modul-category-filter">

			<div class="modul-category-filter--secondary">
				<ul>
					<li class="modul-category-filter-tag" data-filter="wellness">
						<a href="">Wellness</a>
					</li>
					<li class="modul-category-filter-tag" data-filter="design">
						<a href="">Design</a>
					</li>
					<li class="modul-category-filter-tag" data-filter="oeko">
						<a href="">Öko</a>
					</li>
				</ul>
			</div>
		</section>
		<!-- / Category Secondary Filter Group End -->
	</div>


	<div class="row">
		<div class="small-12 twelve columns">

			<!-- Category Teaser Block Grid -->
			<section class="modul modul-teaser-grid modul-category-teaser-grid">
				<ul class="row">
					<li class="medium-4 large-3 three column" data-filter-class='["rundreise", "wellness", "oeko"]'>
						<div class="modul-teaser-grid-block">
							<a href="">
								<figure>
									<img src="http://placehold.it/270x150" height="150" width="270" alt=""/>
								</figure>
							</a>
							<div...

JavaScript

$('.modul-category-filter li a').on("click", function(e){
			e.preventDefault();
		});

		$(window).on("resize",function(){
			$('.modul-category-teaser-grid ul').trigger('refreshWookmark');
		});

		$('.modul-category-teaser-grid ul').imagesLoaded(function() {
			// Prepare layout options.
			var options = {
				autoResize: true, // This will auto-update the layout when the browser window is resized.
				resizeDelay: 400,
				container: $('.modul-category-teaser-grid'), // Optional, used for some extra CSS styling
				offset: 0, // Optional, the distance between grid items
				align: 'left',
				flexibleWidth: false,
				fillEmptySpace: false // Optional, fill the bottom of each column with widths of flexible height
			};

			// Get a reference to your grid items.
			var handler = $('.modul-category-teaser-grid ul li'),
				filters = $('.modul-category-filter--primary li'),
                globalFilters,
				andFilters = $('.modul-category-filter--secondary li');

			// Call the layout function.
			handler.wookmark(options);

			/**
			 * When a filter is clicked, toggle it's active state and refresh.
			 */
			var onClickFilter = function(event) {
                
                $('.modul-category-filter--secondary li').show();
                
				var item = $(event.currentTarget),
					activeFilters = [];
				if (!item.hasClass('active')) {
					filters.removeClass('active');
                    andFilters.removeClass('active');
				}
				item.toggleClass('active');
                
				// Filter by the currently selected filter
				if (item.hasClass('active')) {
					activeFilters.push(item.data('filter'));
				}
                globalFilters = activeFilters;
				handler.wookmarkInstance.filter(activeFilters);
                
                checkTags();

			}
            
            function checkTags(){
                $('.modul-category-filter--secondary li').each(function(){
                    var filter = $(this).data('filter');
                   ...