JSFiddle - React, Tailwind, and code Playground

Filters - gallery

by schrodingers

HTML

<h1>Filters - gallery</h1>
<div class="gallery">
  <figure id="photo-main">
    <!-- <img src="https://unsplash.it/600/400?image=958"> -->
  </figure>
  <div class="photos">

    <!-- THUMBNAILS, PREVIEWS   -->
    <div class="photo">
      <img src="https://unsplash.it/600/400?image=971">
    </div>
    <div class="photo">

      <img src="https://unsplash.it/600/400?image=915">
    </div>

    <div class="photo">

      <img src="https://unsplash.it/600/400?image=407">
    </div>

  </div>
</div>


<!--    CONTROLS    -->
<ul class="toggle-controls">
  <li class="walden" data-filter="walden"></li>
  <li class="toaster" data-filter="toaster"></li>
  <li class="kelvin" data-filter="kelvin"></li>
</ul>

CSS

h1 {
  display: none;
}

body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: space-around;
}


/* HEADER PHOTO */

.photo-main {
  flex-flow: column;
  display: flex;
  max-width: 80%;
  margin: 0.5em;
}

.photos {
  display: flex;
  flex-flow: row wrap;
  margin: 1em 0;
}

.photo {
  margin: 0.5em;
  flex: 0 0 25%;
}

img {
  width: 100%;
}

.toggle-controls {
  list-style: none;
  display: flex;
  height: 10em;
  width: 10em;
  justify-content: space-between;
  margin-right: 1em;
}


/* FILTERS */

.walden {
  filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4);
}

.toaster {
  filter: saturate(2.5) hue-rotate(-30deg) contrast(0.67) sepia(0.4);
}

.kelvin {
  filter: contrast(1.1) brightness(1.3) saturate(2.4) sepia(0.4);
}

.oldie {
  filter: contrast(2) saturate(5) hue-rotate(-180deg);
}

JavaScript

/* gallery.js */
var thumbs = document.getElementsByTagName('img');

var imgContainer = document.getElementById('photo-main');
var img = document.createElement("img");
imgContainer.appendChild(img);
img.setAttribute("src", thumbs[1].getAttribute("src"));

for (var i = 0; i < thumbs.length; i++) {
  thumbs[i].onclick = handler;
}

function handler(e) {
  e.preventDefault();
  img.setAttribute("src", this.getAttribute("src"));

}


var controls = document.querySelectorAll('.toggle-controls li');
//var photo = document.querySelector('.photo');

for (var i = 0; i < controls.length; i++) {
  controls[i].innerHTML = controls[i].dataset.filter;
  clickControl(controls[i]);
}

function toggleFilter(control) {
  for (var i = 0; i < controls.length; i++) {
    controls[i].classList.remove('active');
    photo.classList.remove(controls[i].dataset.filter);
  }

  control.classList.add('active');

  if (photo) {
    photo.classList.add(control.dataset.filter);
  }
}

function clickControl(control) {
  control.addEventListener('click', function() {
    toggleFilter(control);
  });
}

var defaultFilter = document.querySelector('li.toaster');
toggleFilter(defaultFilter);