"Transforming portfolio photos from black & white to vibrant color with the click of a filter button

Question

"Transforming portfolio photos from black & white to vibrant color with the click of a filter button

I'm currently working on creating a portfolio that includes button filters to toggle between black and white images and colored images based on the category selected.

While I have successfully implemented the functionality to change the images to black and white, I am facing an issue where the active state of the button does not persist after clicking it. Additionally, I am struggling to remove the black and white filter from the images within the selected category.

I suspect there might be an error in my code snippet as it is displaying an error message.

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 Styles */
    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 Button Style */
  background: rgba(8, 140, 126, 50%);
  border: 4px solid green;
}

#portfolio { /* Positioning for Portfolio Section with Buttons */
    text-align: center;
    background: transparent;
    position: absolute;
}

#portfolio img {
  /* Black and White Image Filter */
  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>

javascript html css image portfolio

Answer 1

Answer №1

It's recommended to use

 document.getElementsByClassName('filters-button-group')

instead of

document.getElementById('filters-button-group')

because filters-button-group is a class, not an id. By using `getElementsByClassName`, you can access its children as an array.

For more information, you can refer to the following link: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 2

It's recommended to use

 document.getElementsByClassName('filters-button-group')

instead of

document.getElementById('filters-button-group')

because filters-button-group is a class, not an id. By using `getElementsByClassName`, you can access its children as an array.

For more information, you can refer to the following link: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 3

Answer №2

This scenario showcases a unique approach where the initial two images belong to group "A" while the remaining photos are part of another group. Upon clicking a button, the code gathers all image tags associated with the specific category denoted in the "data-filter" attribute of the button and subsequently modifies their 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>

Answer 4

This scenario showcases a unique approach where the initial two images belong to group "A" while the remaining photos are part of another group. Upon clicking a button, the code gathers all image tags associated with the specific category denoted in the "data-filter" attribute of the button and subsequently modifies their 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>

"Transforming portfolio photos from black & white to vibrant color with the click of a filter button

Answer №1

Answer №2

Similar questions

ERROR: mammoth has not been declared

How can I set up an automatic refresh for an angularjs iframe?

Dealing with numerous file uploads: At what point does the array update when you add an item to it?

Error encountered during installation of lite-server using `npm install lite-server --save-dev

Retrieving data from an HTML Table using Javascript

Extracting JSON data from a string using jQuery

How to toggle between arrays using ng-repeat

The controls for the HTML audio component are missing the download option on Safari

What could be the reason behind my Javascript code returning "object object"?

How can I retrieve the id of a Jquery Object (this) in a JavaScript file?

Using AJAX to send data from knockout observables to the server in JSON format

Execute a script when a post is loaded on a WordPress page

Combining the inline JavaScript linting tool ESLint with the popular Airbnb configuration and Facebook

Using HTML and JavaScript allows for the video URL to seamlessly open in the default video player app on the device

Change background according to URL query

Retrieve the text from the outer span excluding any text from the inner elements

"Click events on jQuery's cloned elements are not retained when the elements are removed and appended to a container for the second time

"Chrome's failure to fire the appCache event for HTML5 has left developers scratching

Angular has been modified after being verified. The earlier value was 'null'

How to update an array in Angular using ngModel and ngFor