<!-- flower pictures are under a free license found from https://www.pexels.com -->
<div class="container gallery">
  
  <!-- Header -->
  <div class="row">
    <div class="col-5">
      <h1 class="display-5 mr-3">Gallery</h1>
    </div>
    <div class="col-7">
      <h3>Show Category</h3>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" checked id="children" onchange="handleChange(this)">
        <label class="custom-control-label" for="children">Children</label>
      </div>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" checked id="groups" onchange="handleChange(this)">
        <label class="custom-control-label" for="groups">Groups</label>
      </div>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" checked id="events" onchange="handleChange(this)">
        <label class="custom-control-label" for="events">Events</label>
      </div>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" checked id="portraits" onchange="handleChange(this)">
        <label class="custom-control-label" for="portraits">Portraits</label>
      </div>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" checked id="landscapes" onchange="handleChange(this)">
        <label class="custom-control-label" for="landscapes">Landscapes</label>
      </div>
    </div>
  </div>
  
  <!-- Images -->
  <div class="row">
    <div class="col-6 cont">
      <img src="" id="img-0">
    </div>
    <div class="col-6 cont">
      <img src="" id="img-1">
    </div>
  </div>
  <div class="row">
    <div class="col-6 cont">
      <img src="" id="img-2">
    </div>
    <div class="col-6 cont">
      <img src="" id="img-3">
    </div>
  </div>
  <div class="row">
    <div class="col-6 cont">
      <img src="" id="img-4">
    </div>
    <div class="col-6 cont">
      <img src="" id="img-5">
    </div>
  </div>
  <div class="row">
    <div class="col-6 cont">
      <img src="" id="img-6">
    </div>
    <div class="col-6 cont">
      <img src="" id="img-7">
    </div>
  </div>
  <div class="row">
    <div class="col-6 cont">
      <img src="" id="img-8">
    </div>
    <div class="col-6 cont">
      <img src="" id="img-9">
    </div>
  </div>
  <div class="row">
    <div class="col-6 cont">
      <img src="" id="img-10">
    </div>
    <div class="col-6 cont">
      <img src="" id="img-11">
    </div>
  </div>
  
</div>
.gallery img {
  max-width: 100%;
  max-height: 100%;
  margin: 10px 0 10px 0;
  box-shadow: 0 0 6px 1px grey;
}
const gallery = {children: [
  'https://images.pexels.com/photos/789786/pexels-photo-789786.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  'https://images.pexels.com/photos/50692/brothers-family-siblings-boys-50692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
], groups: [
  'https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  'https://images.pexels.com/photos/697243/pexels-photo-697243.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
], events: [
  'https://images.pexels.com/photos/1190297/pexels-photo-1190297.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  'https://images.pexels.com/photos/59884/pexels-photo-59884.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
], portraits: [
  'https://images.pexels.com/photos/53487/james-stewart-man-person-actor-53487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  'https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
], landscapes: [
  'https://images.pexels.com/photos/917494/pexels-photo-917494.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  'https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  'https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
]}

var filters = []

function handleChange(event) {
  console.log(event.id)
  if (filters.indexOf(event.id) === -1) {
    filters.push(event.id)
  } else {
    filters.splice(filters.indexOf(event.id), 1)
  }
  resetImgages()
  applyFilters()
}

function applyFilters() {
  var position = 0
  for (var category in gallery) {
    if (filters.indexOf(category) === -1) {
      for (const url of gallery[category]) {
        const img = document.querySelector(`#img-${position}`)
        img.style.display = "block"    
        img.src = url  
        position++
      }
    }
  }
}

function addImages() {
  var position = 0
  for (var category in gallery) {
    if (filters.indexOf(category) === -1) {
      for (const url of gallery[category]) {
        const img = document.querySelector(`#img-${position}`)
        img.src = url    
        position++
      }
    }
  }
}

function resetImgages() {
  for (let i = 0; i < 12; i++) {
    const img = document.querySelector(`#img-${i}`)
    img.style.display = "none"
  }
}

addImages()
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.