PHOTO GALLERY WITH HORIZONTAL MENU
.
.
.
.
.
<div id="selectionbar"></div>
<div id="dynaflex">
<figure data-group="ALONISOS"><img src="http://i.imgur.com/UMQ2IrD.jpg"/></figure>
<figure data-group="ALONISOS"><img src="http://i.imgur.com/9GqSG9a.jpg"/></figure>
<figure data-group="ALONISOS"><img src="http://i.imgur.com/1l2cZBC.jpg"/></figure>
<figure data-group="ALONISOS"><img src="http://i.imgur.com/l9hrZQQ.jpg"/></figure>
<figure data-group="ALONISOS"><img src="http://i.imgur.com/YezgGht.jpg"/></figure>
<figure data-group="ALONISOS"><img src="http://i.imgur.com/zamfiLB.jpg"/></figure>
<figure data-group="ALONISOS"><img src="http://i.imgur.com/5vRORG3.jpg"/></figure>
<figure data-group="ALONISOS"><img src="http://i.imgur.com/DpaNrpe.jpg"/></figure>
<figure data-group="SKIATHOS"><img src="http://i.imgur.com/oSC4D7R.jpg"/></figure>
<figure data-group="SKIATHOS"><img src="http://i.imgur.com/W8LjNt5.jpg"/></figure>
<figure data-group="SKIATHOS"><img src="http://i.imgur.com/0pOnQXw.jpg"/></figure>
<figure data-group="SKIATHOS"><img src="http://i.imgur.com/1Yul3Hv.jpg"/></figure>
<figure data-group="SKIATHOS"><img src="http://i.imgur.com/Nq06hwX.jpg"/></figure>
<figure data-group="SKIATHOS"><img src="http://i.imgur.com/Z7B3z0F.jpg"/></figure>
<figure data-group="SKIATHOS"><img src="http://i.imgur.com/kEVYdQx.jpg"/></figure>
<figure data-group="SKIATHOS"><img src="http://i.imgur.com/6FH58XE.jpg"/></figure>
<figure data-group="SKOPELOS"><img src="http://i.imgur.com/qjsulmJ.jpg"/></figure>
<figure data-group="SKOPELOS"><img src="http://i.imgur.com/KYaVrzi.jpg"/></figure>
<figure data-group="SKOPELOS"><img src="http://i.imgur.com/Nm3w4wd.jpg"/></figure>
<figure data-group="SKOPELOS"><img src="http://i.imgur.com/DgCJJQe.jpg"/></figure>
<figure data-group="SKOPELOS"><img src="http://i.imgur.com/Rh3e0w6.jpg"/></figure>
<figure data-group="SKOPELOS"><img src="http://i.imgur.com/CtBD8Op.jpg"/></figure>
<figure data-group="SKOPELOS"><img src="http://i.imgur.com/Nrn8YjM.jpg"/></figure>
<figure data-group="SKOPELOS"><img src="http://i.imgur.com/SaYjJxi.jpg"/></figure>
</div>
<style>
#selectionbar {max-width: 960px;margin: 0 auto;background: #333333;text-align:center;padding:5px;color: #FFF;}
#dynaflex {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 0;
-webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; max-width: 960px; margin: 0 auto;}
#dynaflex figure {margin: 0; min-width: 230px;
-webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-transition: .5s; transition: .5s;}
#dynaflex figure.diminish {min-width: 0; -webkit-box-flex: 0; -webkit-flex: 0; -ms-flex: 0; flex: 0;}
#dynaflex figure img {width: 100%; height: auto;}
</style>
<script>
function buildDropDown(name,index,array) {
var opt = document.createElement("option");
opt.value = name;
opt.innerHTML = name;
dropdown.appendChild(opt);}
var container = document.getElementById("dynaflex"),
array = container.getElementsByTagName("figure"),
selectionBar = document.getElementById("selectionbar"),
categories = [];
for (var i = 0; i < array.length ;i++) {categories[i] = array[i].dataset.group;}
var unique = categories.filter(function(item, i, ar){ return ar.indexOf(item) === i; });
unique.reverse();
unique.unshift("all");
var dropdown = document.createElement("select");
dropdown.id = "categories";
var dropdownLabel = document.createElement("label");
dropdownLabel.for = dropdown.id;
dropdownLabel.innerHTML = "Show : ";
unique.forEach(buildDropDown);
selectionBar.appendChild(dropdownLabel);
selectionBar.appendChild(dropdown);
dropdown.addEventListener("change", function() {console.log("Change");
if (this.value == "all") {for (var i = 0; i < array.length; ++i) {array[i].classList.remove("diminish");}
} else {
var hide = document.querySelectorAll('#dynaflex figure:not([data-group="'+this.value+'"])');
for (var j = 0; j < hide.length; ++j) {hide[j].classList.add("diminish");}
var show = document.querySelectorAll('#dynaflex figure[data-group="'+this.value+'"]');
for (var k = 0; k < show.length; ++k) {show[k].classList.remove("diminish");}}})
</script>
