PHOTO GALLERY ΜΕ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ

PHOTO GALLERY ΜΕ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ

Με τον παρακάτω κώδικα μπορείτε να βάλετε μέσα στην ανάρτησή σας μια photo gallery με οριζόντιο αναπτυσόμενο μενού που θα περιέχει τις κατηγορίες των εικόνων. Το πλάτος της photo gallery ρυθμίζεται σύμφωνα με το πλάτος ανάρτησης που διαθέτετε. Στον συγκεκριμένο κώδικα το έχω βάλει στα 960px. Αν έχετε μικρότερο πρέπει να το μειώσετε.

Υπάρχει σε δύο σημεία μέσα στον κώδικα εκεί που γράφει max-width: 960px; Για να εμφανίσετε περισσότερες από 4 εικόνες σε κάθε γραμμή μειώστε το min-width: 230px; ή αυξήστε το αν θέλετε λιγότερες από 4 εικόνες ανα γραμμή. Καλό είναι να φροντίσετε οι εικόνες να είναι πολλαπλάσιες των εικόνων που περιόχονται στην πρώτη γραμμή δηλαδή 4 ή 8 ή 12 ή 16 αν έχει η πρώτη γραμμή 3 εικόνες βάλτε 6 ή 9 ή 12 στο σύνολο. Αυτό γιατί όποι εικόνα περισεύει θα εμφανιστεί μεγαλύτερη πιάνοντας ακόμα και το 100% του πλάτους της ανάρτησης σας. Δείτε στο τέλος αυτής της ανάρτησης πώς είναι σε λειτουργία η photo gallery με το οριζόντιο αναπτυσόμενο μενού.

<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>