?
Solved

how to filter images in un-ordered list as shown in example

Posted on 2012-08-22
6
Medium Priority
?
395 Views
Last Modified: 2012-08-26
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
Comment
Question by:mmalik15
  • 3
  • 2
6 Comments
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38321460
Hi,

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

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

Hope it helps u...
0
 

Author Comment

by:mmalik15
ID: 38325098
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
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38325897
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mmalik15
ID: 38331569
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
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 total points
ID: 38332026
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
 

Author Closing Comment

by:mmalik15
ID: 38334920
Perfect thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question