Search code examples
javascripthtmlcssimageportfolio

Portfolio images from b&w to color with filter button

I'm trying to make a portfolio with button filter to change images from b&w to original colours of the right category when click on button filter.

My images are correctly changed to b&w. For now I managed to make the button change to the active state when I click on it but it's not staying with the active state after the click and I can't manage to remove the b&w on the images of the button category.

I'm not sure if I have done the code snippet right as it display an error.

var container = document.getElementById('filters-button-group');

container.addEventListener('click', event => {

  var activeItem = container.querySelector('.button-selected');

  if (activeItem !== null) {
    activeItem.classList.remove('button-selected');
  }

  if (event.target === activeItem) {
    return;
  }

  event.target.classList.add('button-selected');
  $('#img').css('filter', 'none');
});
button {
  /* BUTTON SET UP */
    border: 4px solid green;
    border-top: 0;
    border-right: 0;
  font-size: 10px;
  text-decoration: none;
  color: green;
  display: block;
  margin-bottom: 22px;
}

.button:active,
.button-selected {
  /* SELECTED */
  background: rgba(8, 140, 126, 50%);
  border: 4px solid green;
}

#portfolio { /* POSITION TOTAL PORTFOLIO ZONE WITH BUTTONS */
    text-align: center;
    background: transparent;
    position: absolute;
}

#portfolio img {
  /* --- IMAGES BLACK AND WHITE --- */
  filter: grayscale(100%) opacity(30%);
}
<section id="portfolio">

<div class="button-group filters-button-group">

  <button class="button button-effect" data-filter=".A"><a href="#" class="opc-main-bg filter" >A</a></button>
  <button class="button button-effect" data-filter=".B"><a href="#" class="opc-main-bg filter" >B</a></button>
  <button class="button button-effect" data-filter=".C"><a href="#" class="opc-main-bg filter" >C</a></button>
  <button class="button button-selected" data-filter="*"><a href="#" class="selected opc-main-bg filter">ALL</a></button>

</div>

<div
<div class="A"><img src="http://fakeimg.pl/365x365/ff0000/" width="50%" height="auto">
  <div class="B"><img src="http://fakeimg.pl/365x365/ff0000/" width="50%" height="auto">
    <div class="C"><img src="http://fakeimg.pl/365x365/ff0000/" width="50%" height="auto">
    
</section>

Solution

  • In this example, the first two photos are from group "A", the other photos are one in a group. When a button is clicked, it collects all img tags with the class filed in the "data-filter" attribute of the button and applies or removes a style.

    var container = document.querySelectorAll('.filters-button-group .button');

for (let i = 0; i < container.length; i++) {
    container[i].addEventListener('click', function () {
        this.classList.toggle('button-selected');
        var x = document.querySelectorAll(this.getAttribute('data-filter') + ' img');
        var y = x[0].getAttribute('style');
        if (y) {
            for (var i = 0; i < x.length; i++) {
                x[i].removeAttribute('style');
            }
        } else {
            for (var i = 0; i < x.length; i++) {
                x[i].setAttribute('style', 'filter:none');
            }
        }
    });
}

// Button All -> add / remove effect on all images
var allFilterButt = document.querySelector('.filters-button-group .button-all');
var wrap = document.querySelector('#imgWrap');
var imgList = wrap.querySelectorAll('img');

allFilterButt.addEventListener('click', function () {
    var x = wrap.getAttribute('data-eff');
    if (x === 'off') {
        for (var i = 0; i < imgList.length; i++) {
            imgList[i].setAttribute('style', 'filter:none');
        }

        for (var i = 0; i < container.length; i++) {
            container[i].classList.add('button-selected');
        }

        wrap.setAttribute('data-eff', 'on');
    } else {
        for (var i = 0; i < imgList.length; i++) {
            imgList[i].removeAttribute('style');
        }

        for (var i = 0; i < container.length; i++) {
            container[i].classList.remove('button-selected');
        }

        wrap.setAttribute('data-eff', 'off');
    }
});
    button {
    /* BUTTON SET UP */
    border: 4px solid green;
    border-top: 0;
    border-right: 0;
    font-size: 10px;
    text-decoration: none;
    color: green;
    display: block;
    margin-bottom: 22px;
}

.button:active,
.button-selected {
    /* SELECTED */
    background: rgba(8, 140, 126, 50%);
    border: 4px solid green;
}

#portfolio {
    /* POSITION TOTAL PORTFOLIO ZONE WITH BUTTONS */
    text-align: center;
    background: transparent;
    position: absolute;
}

#portfolio img {
    /* --- IMAGES BLACK AND WHITE --- */
    filter: grayscale(100%) opacity(30%);
}
    <section id="portfolio">
    <div class="button-group filters-button-group">
        <button class="button button-effect opc-main-bg filter" data-filter=".A">A</button>
        <button class="button button-effect opc-main-bg filter" data-filter=".B">B</button>
        <button class="button button-effect opc-main-bg filter" data-filter=".C">C</button>
        <button class="button button-effect opc-main-bg filter" data-filter=".D">D</button>
        <button class="button button-effect opc-main-bg filter" data-filter=".E">E</button>
        <button class="button-all button-selected opc-main-bg filter selected" data-filter="*">ALL</button>
    </div>

    <div id="imgWrap" data-eff="off">
        <div class="A"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_027_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="A"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_034_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="B"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_028_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="C"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_030_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="D"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_031_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="E"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_032_by_54ka.jpg"
                width="50%" height="auto"></div>
    </div>
</section>