GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

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

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>



3 σχόλια:

  1. Καλημέρα!! Τι διαστάσεις πρέπει να έχουν οι φωτογραφίες για να εμφανίζονται ίδιες?

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Δεν έχει σημασία η διάσταση αλλά μόνο η αναλογία γιατί τις μικραίνει όλες αναλογικά. Πρέπει να είναι όλες 16:10 ή 16:9 ή 3:2 ή 4:3 ή 5:4 ή 1:1 κ.τ.λ.

      Διαγραφή
  2. Ευχαριστώ πολύ για την άμεση απάντηση. Στο imgur βρίσκω αυτή την επιλογή διαμόρφωσης στο crop για άμεση επέμβαση!

    ΑπάντησηΔιαγραφή

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".