I'm trying to build a gallery where i want to place of all photos, CSS3, HTML5, jquery code snippets etc. Wanted to know to do the filtering part using plain jquery? here's my code:
<!-- Filter Starts -->
<div class="container">
<div class="row safezone">
<ul class="filters">
<li><a href="#" title="All">All</a></li>
<li><a href="#" title="CSS3">CSS3</a></li>
<li><a href="#" title="jQuery">jQuery</a></li>
<li><a href="#" title="Mobile">Mobile</a></li>
<li><a href="#" title="Photos">Photos</a></li>
<li><a href="#" title="UI">User Interfaces</a></li>
<li><a href="#" title="Wireframes">Wireframes</a></li>
<li><a href="#" title="Others">Others</a></li>
</ul>
</div>
</div>
<!-- Filter Ends -->
<div class="container">
<div class="row">
<!-- gal cont-->
<div id="masonry">
<div class="mitem">
<h3>CSS3 Animation</h3>
<p>Text underline animation on mouse hover.</p>
<p class="textanim">“<a href="javascript:void();"><strong>True love is born</strong></a> from understanding.”</p>
</div>
<div class="mitem box">
<h3>CSS3 Circles</h3>
<div class="circle-text"><p>Circles with pure CSS3</p></div>
</div>
<div class="mitem box">jQuery</div>
<div class="mitem box">Mobile</div>
<div class="mitem box">jQuery</div>
<div class="mitem box">Wireframes</div>
<div class="mitem box">Other</div>
<div class="mitem box">UI</div>
<div class="mitem box">UI</div>
<div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200/sports" /></div>
<div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200/sports/Dummy-Text" /></div>
<div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200" /></div>
</div>
<!-- /gal cont -->
</div>
</div>
var container = document.querySelector('#masonry');
var msnry = new Masonry( container, {
columnWidth: 220,
itemSelector: '.mitem'
});
@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Satisfy');
@import url('http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100');
/* Syntaxes for quick reference
transition: <property> <duration> <timing-function> <delay>;
=============================== */
/** Basic Page CSS **/
body {
font-family: 'Roboto Slab', serif;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 2em;
}
body.playground { background-color: #EAEDF1; }
h1, h2, h3, h4, h5, h6 {
font-family: 'Cinzel', serif, sans-serif;
font-weight: 400;
margin: 0;
}
.safezone { padding-top: 80px; }
.borders { border:1px solid red; }
/* Masonry */
.mitem {
width: 200px;
float: left;
font-size: .85em;
background: #fff;
padding: 1em;
/*box-shadow: 1px 1px 2px 1px #e3e3e3;*/
margin-bottom: 2em;
border-radius: 2px;
}
.mitem img { border:none; padding: 0; margin: 0; border-radius: 2px; }
#masonry h3 { font-size: 0.9em; font-weight: 600; color: #2C77F8; text-align: center; border-bottom: 0px dotted #78A8FF; margin: 0 0 10px 0; }
/* /Masonry */
/* CSS3 Circles */
.circle-text {
width:150px;
}
.circle-text:after {
content: "";
display: block;
width: 100%;
height:0;
padding-bottom: 100%;
background: #4679BD;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
/*background-image: linear-gradient(to right bottom, #22B009 0%, #4679BD 100%);*/
box-shadow: 3px 4px 3px #ccc;
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.circle-text p {
float:left;
width:100%;
padding-top:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:white;
}
/* ===================== */
/* text underline animation on hover
======================================*/
p.textanim > a {
position: relative;
color: #f00;
text-decoration: none;
}
p.textanim > a:hover {
color: #f00;
text-decoration: none;
}
p.textanim > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #f00;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
p.textanim > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* ========================================== */
/* CSS3 Box enlarge on hover
==============================*/
.box:hover {
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
transform: scale(1);
border-radius: 4px;
color: #111;
transition: all 0.2s ease-in-out 0s;
}
/* =================================== */
/* Filters
==============================*/
ul.filters { list-style: none; margin: 0 auto 2em auto; }
ul.filters li { display: inline-block; border-right: 1px dotted #aaa; padding-right: 1em; margin-right: 1em; }
ul.filters li:last-child { border-right: none; }
ul.filters li a { text-decoration: none; font-size: 0.8em; padding: 5px 10px; border-radius: 20px; }
ul.filters li a:hover { text-decoration: none; background-color: #0095DD; color: #fff; transition: all 0.2s ease-in-out 0s; }
/* =================================== */ }
}
}
}
here's the link for jsfiddle: https://jsfiddle.net/tosrisri/thqL2Lf1/2/
