mmalik15
asked on
how to filter images in un-ordered list as shown in example
on this template http://xiaothemes.staging.wpengine.com/architect/works/ there is a sub menu, ALL DESIGN, GRAPHIC PRINT WEB. When Clicked it filters the images in the DIVs below. I am creating a similar style using ul and li using code like this
<div id="ProjectsGrid">
<ul>
<li>
<img src="../images/thumb8.png" width="100%" height="200" />
Luctus ac sed libero<br />
</li>
<li>
<img src="../images/thumb9.png" width="100%" height="200" />Consectetur adipiscing<br />
</li>
<li>
<img src="../images/thumb9.png" width="100%" height="200" />Consectetur adipiscing<br />
</li>
<li>
<img src="../images/thumb8.png" width="100%" height="200" />
Luctus ac sed libero<br />
</li>
<li>block stuff</li>
<li>block stuff</li>
<li>block stuff</li>
</ul>
</div>
How can we acheive similar filter when my menu is like as
<div id="ProjectsGrid">
<ul>
<li>
<img src="../images/thumb8.png"
Luctus ac sed libero<br />
</li>
<li>
<img src="../images/thumb9.png"
</li>
<li>
<img src="../images/thumb9.png"
</li>
<li>
<img src="../images/thumb8.png"
Luctus ac sed libero<br />
</li>
<li>block stuff</li>
<li>block stuff</li>
<li>block stuff</li>
</ul>
</div>
How can we acheive similar filter when my menu is like as
<div id="portfolio-filter-wrapper">
<ul id="portfolio-filters" class="">
<li><a href="#all" class="all active" title="" data-filter="all">ALL</a></li>
<li><a href="#design" data-filter="design" class="design" title="" rel="design">Design</a></li><li>
<a href="#graphic" data-filter="graphic" class="graphic" title="" rel="graphic">Graphic</a></li><li>
<a href="#print" data-filter="print" class="print" title="" rel="print">Print</a></li><li>
<a href="#web" data-filter="web" class="web" title="" rel="web">Web</a></li>
</ul>
<div class='clearboth'>
</div>
</div>
ASKER
thanks for the comment
I want to filter records as on this page http://xiaothemes.staging.wpengine.com/architect/works/ don't want to just zoom the images.
Can you possibly give me an example of JQuery or in Javascript to create filter like this
I want to filter records as on this page http://xiaothemes.staging.wpengine.com/architect/works/ don't want to just zoom the images.
Can you possibly give me an example of JQuery or in Javascript to create filter like this
I think the key is giving the li's in the ProjectsGrid the correct classes, then select those for a jQuery animation. I've been playing around with it and my first stab at copying this functionality is:
<html>
<head>
<title> EE Q_27838060 </title>
<style type="text/css">
#portfolio-filter-wrapper {
/*float: left;*/
}
#portfolio-filter-wrapper li {
display: inline;
margin: 0 20px 10px 0;
}
.active {
background-color: orange;
}
#ProjectsGrid ul li {
float: left;
width: 250px;
height: 250px;
padding: 3px;
background-color: #eee;
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#portfolio-filter-wrapper li a").click(function(){
$('#portfolio-filter-wrapper li a').removeClass('active');
$(this).addClass('active');
var cls = this.href.substr(this.href.lastIndexOf('#')+1);
if (cls != 'all') $("#ProjectsGrid ul li:not(."+cls+")").animate({width: 0, height: 0}, 2000);
$("#ProjectsGrid ul li."+cls).animate({width: 250, height: 250}, 3000); // note different than above, gives a nice different effect
return false;
});
});
</script>
</head>
<body>
<div id="portfolio-filter-wrapper">
<ul id="portfolio-filters" class="">
<li><a href="#all" class="all active" title="" data-filter="all">ALL</a></li>
<li><a href="#design" data-filter="design" class="design" title="" rel="design">Design</a></li><li>
<a href="#graphic" data-filter="graphic" class="graphic" title="" rel="graphic">Graphic</a></li><li>
<a href="#print" data-filter="print" class="print" title="" rel="print">Print</a></li><li>
<a href="#web" data-filter="web" class="web" title="" rel="web">Web</a></li>
</ul>
<div class='clearboth'>
</div>
</div>
<div id="ProjectsGrid">
<ul>
<li class="all design">
<img src="../images/thumb8.png" width="100%" height="200" />
Luctus ac sed libero<br />
</li>
<li class="all graphic">
<img src="../images/thumb9.png" width="100%" height="200" />Consectetur adipiscing<br />
</li>
<li class="all print">
<img src="../images/thumb9.png" width="100%" height="200" />Consectetur adipiscing<br />
</li>
<li class="all web">
<img src="../images/thumb8.png" width="100%" height="200" />
Luctus ac sed libero<br />
</li>
<li class="all web">block 1 stuff</li>
<li class="all web">block 2 stuff</li>
<li class="all web">block 3 stuff</li>
<li class="all web">block 4 stuff</li>
<li class="all design">block 5 stuff</li>
<li class="all design">block 6 stuff</li>
<li class="all graphic">block 7 stuff</li>
<li class="all print">block 8 stuff</li>
</ul>
</div>
</body>
</html>
Note: I just use the href on the link, didn't use rel/class/filter and undoubtedly forgot some other stuff, but first let's see where you wanna take this ;-)
ASKER
thanks for the comment robert_schutt
I have tried your solution. it does show the animation but the whole block does not disappear. Can we not simply hide the unwanted blocks without using any animation.
I have tried your solution. it does show the animation but the whole block does not disappear. Can we not simply hide the unwanted blocks without using any animation.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Perfect thanks!
It's not just HTML! It contains JavaScript/jQuery too!!!
Similar jQuery plugin - http://lobsterpothtml5pv.codeplex.com/
Hope it helps u...