Hur skapa: Bildgalleri

Föregående sida Responsivt bildgalleri
Nästa sida Bildegalleri

Lär dig hur du skapar ett bildgalleri.

Bildgalleri

Lär dig hur du skapar ett bildgalleri, genom att klicka på knappen kan du växla mellan fyra, två eller breda bilder:

Skapa en bildgalleri

Första steget - Lägg till HTML:

<div class="row">
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
</div>

Steg 2 - Lägg till CSS:

Skapa layout med CSS Flexbox:

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* Skapa två sida vid sida lika kolumner */
.column {
  flex: 50%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
}

Pröva själv

Steg 3 - Lägg till JavaScript:

Skapa en kontrollerad rutnätsvy med JavaScript:

<button onclick="one()">1</button>
<button onclick="two()">2</button>
<button onclick="four()">4</button>
<script>
// Hämta element med class="column"
var elements = document.getElementsByClassName("column");
// Declarera en "loop" variabel
var i;
// Full bredd bild
function one() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "100%";
  }
}
// Två sida vid sida bilder
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "50%";
  }
}
// Fyra sida vid sida bilder
function four() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "25%";
  }
}
</script>

Pröva själv