PHOTO GALLERY WITH GRID AND LIST STYLE

PHOTO GALLERY WITH GRID AND LIST STYLE

Με τον παρακάτω κώδικα μπορείτε να εμφανίσετε μία photo gallery σε 2 διαφορετικές διατάξεις GRID και LIST. Μπορείτε να αλλάξετε τις διαστάσεις αλλάζοντας το width="160" height="100" που βρίσκεται αμέσως μετά το πράσινο link των εικόνων το οποίο link εννοείτε πως μπορείτε να το αλλάξετε με το δικό σας link. Δείτε πως είναι σε λειτουργία η photo gallery ακριβως κάτω από εδώ. ▼

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style>

a{-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}

.wrapper{width:100%;margin:0px;background:#333; color:#FFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

swmenu{text-align:center;padding:0px;margin:0px;background:none;color:#FFF;}

swmenu a{font:16px Arial;background:#105105;color:#FFF;width:150px;height:30px;line-height:30px;margin:0px;text-align:center;display:inline-block;}

swmenu a:hover, .list-mode swmenu a.hide-list:hover {background:#A11111; color:#FFF;}

swmenu a.hide-list{background-color:#115599; color:#FFF;}

.list-mode swmenu a.hide-list{background-color:#ff6600; color:#FFF;}

.list-mode swmenu a.show-list{background-color:#105105; color:#FFF;}

.container:after{content:"";clear:both; display:table;}

.container{content:""; padding:10px 0 10px 10px;}

.wrapper .box{float:left;width:160px;height:120px;margin:0 10px 10px 0;background:#400030; overflow:hidden; -webkit-transition:all 1.0s ease; -moz-transition:all 1.0s ease; transition:all 1.0s ease; transition:all 1.0s ease;}

.wrapper.list-mode .container{padding-right:10px;}

.wrapper.list-mode .box{ width:100%; height:auto;}

</style>

<div class="wrapper">

<swmenu>

<a href="javascript:void(0)" class="show-list"><i class="fa fa-th-list"></i>LIST STYLE</a>

<a href="javascript:void(0)" class="hide-list"><i class="fa fa-th"></i>GRID STYLE</a>

</swmenu>

<div class="container">

<div class="box"><img src="https://i.imgur.com/fiVofHI.jpg" alt="ZAKYNTHOS" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF;padding:5px;">1. ZAKYNTHOS <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/rcivwQJ.jpg" alt="LEYKADA" width="160" height="100"​ style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">2. LEYKADA <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/0nyxX2L.jpg" alt="KEFALONIA" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">3. KEFALONIA <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/7X4wjWS.jpg" alt="KERKYRA" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">4. KERKYRA <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/gptb8xn.jpg" alt="KRITI" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">5. KRITI <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/xHwALvD.jpg" alt="RODOS" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">6. RODOS <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/XZLp5MA.jpg" alt="SAMOS" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">7. SAMOS <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/n5IesXRt.jpg" alt="POROS" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">8. POROS <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/0M4jTZTt.jpg" alt="MYKONOS" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">9. MYKONOS <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/tZsqBn7t.jpg" alt="AMORGOS" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">10. AMORGOS <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/oSC4D7R.jpg" alt="SKIATHOS" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">11. SKIATHOS <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

<div class="box"><img src="https://i.imgur.com/9GqSG9a.jpg" alt="ALONNISOS" width="160" height="100" style="float:left;"/> <span style="font-size:16px; font-family: Arial;color:#FFF; padding:5px;">12. ALONNISOS <BR>Εδώ βαζετε την περιγραφή της εικόνας που βρίσκεται αριστερά.</span></div>

</div></div>

<script>

$('.show-list').click(function(){$('.wrapper').addClass('list-mode');});

$('.hide-list').click(function(){$('.wrapper').removeClass('list-mode');});

</script>