How was this done?

[Zola]

Hi

I have been looking for ideas on websites and the filter system on this page is exactly what I am looking for.
http://goldenworks.eu/demos/sl_wordp...r-best-works/#


I love the way it animates and changes according to the clickable button. 

Does anyone know what plugin was used or how I can implement this on a website that I wish to build? 

Any help is much appreciated.

[kicken]

Just gotta dig around in the source code for a few minutes. Then you would have been lead to the Isotope plugin

[Zola]

Thanks.

 

After I posted this I came across a plugin alternative that's perfect for what I need: http://mixitup.io/

 

However, I need help in the logical sense!

 

I have implemented this, splitting the products into 3 categories:

All products
Product type a
Product type b
Product type c

When clicked the products filter in by type...each product is called in by their category class name...

 

However, a few products fall into both categories.... what can I do to make a product from category A also appear in category C?

 

Here is a simplified piece of code that will explain my problem

			<div class="controls">	
				<ul>
					<li class="filter" data-filter="all">Show All Products</li>
					<li class="filter" data-filter="category_cat_a">Cat A</li>
					<li class="filter" data-filter="category_cat_b">Cat B</li>
					<li class="filter" data-filter="category_cat_c">Cat C</li>
				</ul>
			</div>
			
				
            
			<hr>
			
			<!-- GRID -->
			
	<ul id="Grid" style="">
            <li class="mix category_cat_a mix_all" data-cat="1" style="display: inline-block; opacity: 1;">
            <a href=#<img src="images/product_thumbs/1.jpg" width="270" height="270" class="border"></a></li>
             
        <li class="mix category_cat_b mix_all" data-cat="2" style=" display: inline-block; opacity: 1;">
        <a href="#"><img src="images/product_thumbs/2.jpg" height="270" width="270" class="border"> </a></li> 
        
        <li class="mix category_cat_c mix_all" data-cat="1" style=" "><a href="#">
        <img src="images/product_thumbs3.jpg" height="270" width="270" class="border"></a></li> 

        <li class="mix category_fault_location mix_all" data-cat="1" style=" "><a href="#"><img src="images/product_thumbs/4.jpg" height="270" width="270" class="border"></a></li> 

                              
        <li class="gap"></li> <!-- "gap" elements fill in the gaps in justified grid -->
 </ul>

Edited August 5, 2013 by Zola

[Zola]

got it sorted, didn't realise I could call two classes within one <li> !!