Link to home
Start Free TrialLog in
Avatar of mmalik15
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="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>

Open in new window

Avatar of Roopesh Reddy
Roopesh Reddy
Flag of India image

Hi,

It's not just HTML! It contains JavaScript/jQuery too!!!

Similar jQuery plugin - http://lobsterpothtml5pv.codeplex.com/

Hope it helps u...
Avatar of mmalik15
mmalik15

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
Avatar of Robert Schutt
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>

Open in new window

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 ;-)
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.
ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Perfect thanks!