<!-- control buttons --><div class="row"> <div class="small-12 columns small-centered"> <fieldset class="controls"> <div class="row"> <!-- filter buttons --> <div class="small-8 columns" id="controlsfilter"> <label>Filter:</label> <button class="filter tiny round active" data-filter="all">All</button> <button class="filter tiny round" data-filter=".newyork">New York</button> <button class="filter tiny round" data-filter=".california">California</button> <button class="filter tiny round" data-filter=".texas">Texas</button> </div> <!-- layout buttons --> <div class="small-4 columns" id="controlslayout"> <label>Layout:</label> <div class="controlslayout"> <input type="radio" class="grid" checked="checked" name="layout" id="grid"><label id="labelgrid" for="grid"><i class="fa fa-th"></i></label></input><input type="radio" class="list" name="layout" id="list"><label id="labellist" for="list"><i class="fa fa-bars"></i></label></input></div> </div> </div> </fieldset> </div></div><div class="row"> <!-- container for images --> <div class="small-12 columns small-centered"> <div class="container" id="Container"> <ul class="small-block-grid-3 medium-block-grid-4 large-block-grid-5"> <li class="mix newyork"><img border="0" src="http://placehold.it/1000x800"/></li> <li class="mix newyork"><img border="0" src="http://placehold.it/1000x800"/></li> <li class="mix california"><img border="0" src="http://placehold.it/1000x800"/></li> <li class="mix newyork"><img border="0" src="http://placehold.it/1000x800"/></li> <li class="mix texas"><img border="0" src="http://placehold.it/1000x800"/></li> <li class="mix newyork"><img border="0" src="http://placehold.it/1000x800"/></li> <li class="mix newyork"><img border="0" src="http://placehold.it/1000x800"/></li> <li class="mix california"><img border="0" src="http://placehold.it/1000x800"/></li> <li class="mix california"><img border="0" src="http://placehold.it/1000x800"/></li> <li class="gap"/> <li class="gap"/> </ul> </div> </div></div>/** Controls **/.controls { padding:0.5em 0.25em 0.5em 1em; box-shadow: 0 0 20px rgba(0, 0, 0, .2); ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2); box-shadow: 0 0 20px rgba(0, 0, 0, .2); border-radius: 0;}.filter, .controlslayout label{ background:#33cccc;}button, .button { margin-bottom:0.5em; outline:none;}.controls button.active, .controlslayout input[type="radio"]:checked + label{ background: #007295;}#controlslayout input[type="radio"]{ visibility:hidden; height: 0; width: 0;}#controlslayout input[type="radio"]+label { margin:0;}.controlslayout { display:block;}#controlslayout .fa { font-size:1.5em; color:#ffffff;}#labelgrid { border-radius: 1000px 0 0 1000px; padding-top: 0.5rem; padding-right: .75rem; padding-bottom: 0.3rem; padding-left: 1rem;}#labellist { border-radius: 0 1000px 1000px 0; padding-top: 0.5rem; padding-right: 1rem; padding-bottom: 0.3rem; padding-left: .75rem;}/** Container **/#Container .mix { display:none;}#Container .large-block-grid-5>li:nth-of-type(5n+1), #Container .large-block-grid-5>li:nth-of-type(1n){ clear:none;}xxxxxxxxxx$(function(){ $('#Container').mixItUp();});$('input').on('click',function() { if ($(this).hasClass('grid')) { $('#Container ul').removeClass('small-block-grid-1').addClass('small-block-grid-3 medium-block-grid-4 large-block-grid-5'); } else if($(this).hasClass('list')) { $('#Container ul').removeClass('small-block-grid-3 medium-block-grid-4 large-block-grid-5').addClass('small-block-grid-1'); }});