html - Using MixItUp Plugin in image gallery -
i new sorry if obvious!
what have is: series of square divs images inside forming thumbnail gallery.
<div class="category-1" data-myorder="1"> <div class="box"> <div class="boxinner"> <a href="y1p1t.jpg" data-lightbox="y1p1t.jpg" title="y1p1"> <img src="y1p1t.jpg" /></a> <div class="titlebox">y1p1</a><br> <p id="workcat">design</p></div> </div>
the code above 1 of 12 images form gallery of square thumbnails @ top trying have sortable 3 categories: all|category-1|category-2
at moment happens: page loads "all" button highlighted , no images shown when click button seemingly random selection of images shown (i.e in case of image above, ignoring 'category-1" class).
i hope makes sense!
markup (html):
<div class="controls"> <div class="control-group"> <div class="control-label">filter:</div> <button class="filter" data-filter="all">all</button> <button class="filter" data-filter=".cat-1">category 1</button> <button class="filter" data-filter=".cat-2">category 2</button> </div> </div> </div> <div class="your-container"> <div class="box mix cat-1"> <div class="boxinner"> <a href="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" data-lightbox="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" title="category-1"><img src="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" /></a> <div class="titlebox">category-1</div> </div> </div> <div class="box mix cat-1"> <div class="boxinner"> <a href="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" data-lightbox="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" title="category-1"><img src="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" /></a> <div class="titlebox">category-1</div> </div> </div> <div class="box mix cat-1"> <div class="boxinner"> <a href="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" data-lightbox="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" title="category-1"><img src="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" /></a> <div class="titlebox">category-1</div> </div> </div> <div class="box mix cat-2"> <div class="boxinner"> <a http://4.bp.blogspot.com/-snnxpfdra8g/t45gdd72dti/aaaaaaaerqc/w1f0-_gsqgw/s400/7021992339_67f71d698e_z.jpg" data-lightbox="http://4.bp.blogspot.com/-snnxpfdra8g/t45gdd72dti/aaaaaaaerqc/w1f0-_gsqgw/s400/7021992339_67f71d698e_z.jpg" title="category-2"><img src="http://4.bp.blogspot.com/-snnxpfdra8g/t45gdd72dti/aaaaaaaerqc/w1f0-_gsqgw/s400/7021992339_67f71d698e_z.jpg" /></a> <div class="titlebox">category-2</div> </div> </div> <div class="box mix cat-2"> <div class="boxinner"> <a http://4.bp.blogspot.com/-snnxpfdra8g/t45gdd72dti/aaaaaaaerqc/w1f0-_gsqgw/s400/7021992339_67f71d698e_z.jpg" data-lightbox="http://4.bp.blogspot.com/-snnxpfdra8g/t45gdd72dti/aaaaaaaerqc/w1f0-_gsqgw/s400/7021992339_67f71d698e_z.jpg" title="category-2"><img src="http://4.bp.blogspot.com/-snnxpfdra8g/t45gdd72dti/aaaaaaaerqc/w1f0-_gsqgw/s400/7021992339_67f71d698e_z.jpg" /></a> <div class="titlebox">category-2</div> </div> </div> <div class="box mix cat-2"> <div class="boxinner"> <a http://4.bp.blogspot.com/-snnxpfdra8g/t45gdd72dti/aaaaaaaerqc/w1f0-_gsqgw/s400/7021992339_67f71d698e_z.jpg" data-lightbox="http://4.bp.blogspot.com/-snnxpfdra8g/t45gdd72dti/aaaaaaaerqc/w1f0-_gsqgw/s400/7021992339_67f71d698e_z.jpg" title="category-2"><img src="http://4.bp.blogspot.com/-snnxpfdra8g/t45gdd72dti/aaaaaaaerqc/w1f0-_gsqgw/s400/7021992339_67f71d698e_z.jpg" /></a> <div class="titlebox">category-2</div> </div> </div> <div class="box mix cat-3"> <div class="boxinner"> <a href="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" data-lightbox="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" title="category-3"><img src="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" /></a> <div class="titlebox">category-3</div> </div> </div> <div class="box mix cat-3"> <div class="boxinner"> <a href="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" data-lightbox="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" title="category-3"><img src="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" /></a> <div class="titlebox">category-3</div> </div> </div> <div class="box mix cat-3"> <div class="boxinner"> <a href="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" data-lightbox="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" title="category-3"><img src="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" /></a> <div class="titlebox">category-3</div> </div> </div> <div class="gap"></div> </div> your fiddle missing filtering controls (very important!), , "gap" div(s) , javascript makes whole thing run strangely absent.
javascript (jquery):
<script type="text/javascript"> $(function(){ $('.your-container').mixitup(); }); </script> also, need wrap items filtered in container , set hidden using "display:none"; wrapper mixitup uses animate , layout items. finally, remove box classes (i commented styles out, absolute positioning breaking mixitup) , let plugin rearrange automatically using "inline-block":
stylesheet (css):
<style type="text/css"> .your-container .mix {display:none;} </style> hope helps somewhat. read mixitup documentation carefully: https://mixitup.kunkalabs.com/learn/tutorial/get-started/
i'm big fan of mixitup , found magically easy use out of box. better isotope if need lean , simple.
Comments
Post a Comment