JSFiddle - React, Tailwind, and code Playground

Filters - gallery - 2

by schrodingers

HTML

<h1>Filters - gallery</h1>
<div class="gallery">
  <div id="photo-main">

  </div>


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

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

  </div>
</div>


<!--    CONTROLS    -->
<h2>
Filters:
</h2>
<ul class="filters">
  <!-- FILTER PREVIEWS     -->
  <li class="walden" data-filter="walden">
  </li>

  <li class="toaster" data-filter="toaster">
  </li>

  <li class="kelvin" data-filter="kelvin">
  </li>

  <li class="lomo" data-filter="lomo">
  </li>
</ul>


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

CSS

h1 {
  display: none;
}

h2 {
  font-size: 1em;
  font-family: Arial, sans-serif;
  color: grey;
}

body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}


/* HEADER PHOTO */

#photo-main {
  max-width: 80%;
  margin: 0.5em;
}

.thumbs {
  display: flex;
  flex-flow: row nowrap;
  margin: 1em 0;
  width: 80%;
}

.thumb img {
  margin: .5em;
  flex: 0 0 25%;
  width: 50%;
  height: 50%;
}

.filters {
  /* list-style: none; */
  display: flex;
  align-content: space-around;
  justify-content: space-around;
  align-items: center;
}

.filter {
  display: block;
  transition: all 1s ease-out;
  width: 3em;
  height: 3em;
  border: solid .1em grey;
}

.filter:before {
  content: attr(name);
  // margin: 3em;
  font: Arial, sans-serif, 1em/1.5;
  text-align: center;
  vertical-align: middle;
}

.filter:active {
  color: blue;
}


/* FILTERS */

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

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

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

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

JavaScript

/* gallery.js */
var imgContainer = document.getElementById('photo-main');
var mainImg = document.createElement('img');
imgContainer.appendChild(mainImg);
var thumbs = document.querySelectorAll('.thumb img');

mainImg.setAttribute('src', thumbs[0].getAttribute('src'));

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

function change(e) {
  e.preventDefault();
  mainImg.setAttribute('src', this.getAttribute('src'));

}


var filters = document.querySelectorAll('.filters li');

for (var i = 0; i < filters.length; i++) {
  //filters[i].appendChild(mainImg);

  filters[i].setAttribute('src', mainImage.getAttribute('src'));


  // filters[i].innerHTML = '<img src="' + mainImg.src + '">';


  //filters[i].innerHTML += filters[i].dataset.filter;
  filters[i].addEventListener('click', function() {
    mainImg.classList.toggle(this.dataset.filter);
  });
}
mainImg.addEventListener('click', function() {
  mainImg.setAttribute('class', photo.dataset.filter);

});