Building a gallery that hides images when buttons are selected. It works but does not display all images on page load

Question

When you click the "Show All" button the images appear but I need them to display on page load. When I remove "display: none" from my css it breaks and the buttons no longer function. I've tried removing the active button class and the "show" class. This code was grabbed from w3 school and I've tried to replicate it as much as possible but haven't been able to get everything to display on page load.

Here is the website for reference: http://www.barbarabielpainting.com/new/

        <div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('1')"> 1</button>
  <button class="btn" onclick="filterSelection('2')"> 2</button>
  <button class="btn" onclick="filterSelection('3')"> 3</button>
</div>

        <div class="row">

            <div class="col-sm-6 col-md-4 all column 1">
                <div class="thumbnail">
                    <a class="lightbox" href="img/paintings/1.jpg">
                        <img src="img/paintings/1.jpg" alt="Park">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 all column 2">
                <div class="thumbnail">
                    <a class="lightbox" href="img/paintings/2.jpg">
                        <img src="img/paintings/2.jpg" alt="Bridge">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 all column 3">
                <div class="thumbnail">
                    <a class="lightbox" href="img/paintings/3.jpg">
                        <img src="img/paintings/3.jpg" alt="Tunnel">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.btn.active {
  background-color: #666;
   color: white;
}

.active {
    display: block;
}

filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Answer 1

The function filterSelection(parameter) adds the show class, and this class has a display: block property. As a result, removing display: none doesn't work because all images already have display: block.

You can add this JavaScript to add the show class to each div:

window.onload(){
  filterSelection("all");
}

Alternatively, you can add the class show to each div individually.