javascript - How do I add filtering to a Phanes template? -
a year ago bought template html5 , wanted add filtering part portfolio is, unfortunately can not deal it.
i searched many scripts in google, have problems template.
link template want add filtering: http://ivang-design.com/phanes/slidermp/work.html
i tried add mixitup , close success:
html
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.9"></script> <div class="controls"> <label>filter:</label> <button class="filter" data-filter="all">all</button> <button class="filter" data-filter=".category-1">category 1</button> <button class="filter" data-filter=".category-2">category 2</button> <label>sort:</label> <button class="sort" data-sort="myorder:asc">asc</button> <button class="sort" data-sort="myorder:desc">desc</button> </div> <div id="container" class="container"> <div class="mix category-1" data-myorder="1"></div> <div class="mix category-1" data-myorder="2"></div> <div class="mix category-1" data-myorder="3"></div> <div class="mix category-2" data-myorder="4"></div> <div class="mix category-1" data-myorder="5"></div> <div class="mix category-1" data-myorder="6"></div> <div class="mix category-2" data-myorder="7"></div> <div class="mix category-2" data-myorder="8"></div> <div class="gap"></div> <div class="gap"></div> </div>
css
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, button{ font-family: 'helvetica neue', arial, sans-serif; } .controls{ padding: 2%; background: #333; color: #eee; } label{ font-weight: 300; margin: 0 .4em 0 0; } button{ display: inline-block; padding: .4em .8em; background: #666; border: 0; color: #ddd; font-size: 16px; font-weight: 300; border-radius: 4px; cursor: pointer; } button.active{ background: #68b8c4; } button:focus{ outline: 0 none; } button + label{ margin-left: 1em; } .container{ padding: 2% 2% 0; text-align: justify; font-size: 0.1px; background: #68b8c4; -webkit-backface-visibility: hidden; } .container:after{ content: ''; display: inline-block; width: 100%; } .container .mix, .container .gap{ display: inline-block; width: 49%; } .container .mix{ text-align: left; background: #03899c; margin-bottom: 2%; display: none; } .container .mix.category-1{ border-top: 2px solid limegreen; } .container .mix.category-2{ border-top: 2px solid yellow; } .container .mix:after{ content: attr(data-myorder); color: white; font-size: 16px; display: inline-block; vertical-align: top; padding: 4% 6%; font-weight: 700; } .container .mix:before{ content: ''; display: inline-block; padding-top: 60%; } @media , (min-width: 420px){ .container .mix, .container .gap{ width: 32%; } } @media , (min-width: 640px){ .container .mix, .container .gap{ width: 23.5%; } }
js
$(function(){ $('#container').mixitup(); });
but during filtering filtered elements disappear , after second elements disappear, , no longer appear.
additionally, when tried use mixitup, elements not move in example.
is there simple way make few categories filtering in template?
thank in advance help
i solved this: http://isotope.metafizzy.co/filtering.html
i'm sorry impatience , writing post
Comments
Post a Comment