• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 399
  • Last Modified:

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

0
mmalik15
Asked:
mmalik15
  • 3
  • 2
1 Solution
 
Roopesh ReddyIT AnalystCommented:
Hi,

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

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

Hope it helps u...
0
 
mmalik15Author Commented:
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
0
 
Robert SchuttSoftware EngineerCommented:
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 ;-)
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
mmalik15Author Commented:
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.
0
 
Robert SchuttSoftware EngineerCommented:
That's strange, the blocks do disappear for me after the animation. Note that it may have something to do with other markup/css you're using. I would need to see more of your page.

In general you can switch off animation in jQuery with
$.fx.off = true;

Open in new window

But if you want the functionality out altogether replace those 2 lines in the click function with this:
		if (cls != 'all') $("#ProjectsGrid ul li:not(."+cls+")").hide();
		$("#ProjectsGrid ul li."+cls).show();

Open in new window

0
 
mmalik15Author Commented:
Perfect thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now