1 kuva
3 kuvaa
2 kuvaa
Sivun alkuun head-tagien sisään:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
CSS-määrittelyihin:
.kuvagalleria {
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
overflow:hidden;
}
/*Näistä voit muutella korkeuksia ja marginia oman maun mukaan.*/
.kuva {height:200px;text-align:center;margin:.5em;}
.kuva.kaksikuvaa {height:300px;}
.kuva.yksikuva {height:400px;}
.kuva img {height:100%;flex-basis:25%;flex-grow:1; flex-shrink:1;}
Siihen kohtaan html-sivua johon haluat gallerian:
<div class="kuvagalleria" id="gallu1">
<div class="kuva"><a href="linkkikuvaan"><img src="kuvanosoite.jpg" alt=""></a></div>
</div>
Sivun loppuun ennen </body>-tagia
<script>
var funktio = function kuvienKoko(){
var kuvia = document.getElementById("gallu1").children.length;
if (kuvia<=1){
$('#gallu1 > .kuva').addClass("yksikuva");
} else if (kuvia>1 && kuvia<=2) {
$('#gallu1 > .kuva').addClass("kaksikuvaa");
} else {
return false;
}
};
funktio();
</script>