Using MixItUp Plugin in image gallery

Question

I am very new to this so I am sorry if it is obvious!

What I have is: A series of square divs with images inside forming a 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 is for one of the 12 images that form a gallery of square thumbnails At the top I am trying have it sortable into 3 categories: ALL|Category-1|Category-2

At the moment this is what happens: Page loads with "ALL" button highlighted and all no images shown When I click another button a seemingly random selection of images is shown (i.e in the case of the image above, it is ignoring the 'category-1" class).

I hope this makes sense! Thanks

Answer 1

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 was missing the filtering controls (very important!), and the "gap" div(s) and javascript that makes the whole thing run was strangely absent.

Javascript (jQuery):

<script type="text/javascript">
    $(function(){
        $('.your-container').mixItUp();
    });
</script>

Also, you need to wrap your items to be filtered in another container and set it to be hidden using "display:none"; this will be the wrapper MixItUp uses to animate and layout items. Finally, remove your box classes (I commented all your styles out, the absolute positioning was breaking MixItUp) and let the plugin rearrange everything automatically using "inline-block":

Stylesheet (CSS):

<style type="text/css">
    .your-container .mix {display:none;}
</style>

Hope this helps you somewhat. Read the MixItUp documentation carefully: https://mixitup.kunkalabs.com/learn/tutorial/get-started/

I'm a big fan of MixItUp and found it magically easy to use out of the box. So much better than Isotope if you just need something lean and simple.

Answer 2

You can even use the popup for your gallery:

html

<div id="Container" class="container>
<li class="mix category-1"><img src="/image/1.jpg" longdesc="#1" onclick="jQuery_modal(this)" alt=""></li>
<li class="mix category-1"><img src="/image/2.jpg" longdesc="#2" onclick="jQuery_modal(this)" alt=""></li>
.….
</ul>
</div>

jQuery_modal.js

function jQuery_modal(obj){
if ( 0 == jQuery(obj).attr('longdesc').indexOf('#') ){
jQuery(jQuery(obj).attr('longdesc')).dialog({ height: 600, width: 700, modal: true });
}
else{
jQuery("#dialog-modal").text(jQuery(obj).attr('longdesc'));
jQuery("#dialog-modal").dialog({ height: 240, modal: true });
}
}

Demo, take a look