Image Filter Display

INFORMATION & CODE

Image Filter Display

How the Program Works

When the webpage first loads, every image gallery is hidden because .image-container uses display: none. Clicking one of the navigation buttons triggers the showContainer() function. The function converts the button's ID into a number, retrieves all of the image gallery containers, hides them all, and then reveals the gallery whose position matches the button's ID. Because only one gallery is made visible, the interface behaves like a simple filter or tabbed navigation system.

The thumbnails are displayed in grayscale, and pressing an individual image temporarily enlarges it using the CSS :active pseudo-class. This provides a lightweight preview effect without additional JavaScript.

How to Use the Program

To use the portfolio, open the HTML file in any modern web browser. Initially, no images are shown because all galleries are hidden by default. Clicking All, Rural, Urban, or Coast displays the corresponding collection of photographs while automatically hiding the others. Holding down the mouse button on a thumbnail enlarges it for a closer look, and releasing the mouse returns it to its original thumbnail size.

If you wish to add more categories, create another navigation button with the next sequential ID (for example, id="4), add a corresponding <div class="image-container"> containing the new images, and ensure the new container appears in the correct order in the HTML. The existing JavaScript will continue to work without modification because it selects galleries by their position in the list.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Filter Display/title>
    <link rel="icon" type="image/x-icon" href="https://e-nash.net/photos/modules-favicon.png">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
  </head>
  <body>     
    <div class="buttons" id="buttons">
		        <h3>Portfolio With Navigation </h3>
		        <button class="scape" id="0" onclick="showContainer(this.id)">All</button>
			      <button class="scape" id="1" onclick="showContainer(this.id)">Rural</button>
			      <button class="scape" id="2" onclick="showContainer(this.id)">Urban</button>
            <button class="scape" id="3" onclick="showContainer(this.id)">Coast</button>          
          </div>
          <div class="image-container">
            <center>
            <h2>All</h2>
              <img src="https://e-nash.net/photos/sand_castle.jpg" alt="sandcastles">
              <img src="https://e-nash.net/photos/elm_hill_Norwich.jpg" alt="Norwich street">
              <img src="https://e-nash.net/photos/autumn.jpg" alt="autumn colours">
              <img src="https://e-nash.net/photos/tractor.jpg" alt="tractor">
              <img src="https://e-nash.net/photos/sea.jpg" alt="sunset">
              <img src="https://e-nash.net/photos/aerial-architectural-design-architecture.jpg" alt="urban sprawl">
              <img src="https://e-nash.net/photos/new-york-city.jpg" alt="New York">
              <img src="https://e-nash.net/photos/cock.jpg" alt="chickens">
              <img src="https://e-nash.net/photos/oil-rig.jpg" alt="oilrig">
              <img src="https://e-nash.net/photos/quayside.jpg" alt="Quayside">
              <img src="https://e-nash.net/photos/city.jpg" alt="London street">
              <img src="https://e-nash.net/photos/swiss.jpg" alt="matterhorn">
              <img src="https://e-nash.net/photos/horses.jpg" alt="horses">
              <img src="https://e-nash.net/photos/portugal.jpg" alt="caves">
              <img src="https://e-nash.net/photos/paris.jpg" alt="paris">
              <img src="https://e-nash.net/photos/bank.jpg" alt="classic building">
              <img src="https://e-nash.net/photos/combine-harvester.jpg" alt="harvester">
              <img src="https://e-nash.net/photos/shipwreck.jpg" alt="shipwreak">
              <img src="https://e-nash.net/photos/lighthouse.jpg" alt="lighthouse">
              <img src="https://e-nash.net/photos/aircraft.jpg" alt="landing">
              <img src="https://e-nash.net/photos/rio.jpg" alt="amazon">
              <img src="https://e-nash.net/photos/grandmother.jpg" alt="grandmother and grandson">
              <img src="https://e-nash.net/photos/dolphin.jpg" alt="dolphins">
              <img src="https://e-nash.net/photos/london.jpg" alt="parliment">
              <img src="https://e-nash.net/photos/british-museum.jpg" alt="British museum">
              <img src="https://e-nash.net/photos/sheep.jpg" alt="sheep">
              <img src="https://e-nash.net/photos/sailing-ships.jpg" alt="sailing ships">
            </center>
          </div>
        
          <div class="image-container">
            <center>
            <h2>Rural</h2>
            <img src="https://e-nash.net/photos/autumn.jpg" alt="autumn colours">
            <img src="https://e-nash.net/photos/tractor.jpg" alt="tractor">
            <img src="https://e-nash.net/photos/cock.jpg" alt="chickens">
            <img src="https://e-nash.net/photos/swiss.jpg" alt="matterhorn">
            <img src="https://e-nash.net/photos/horses.jpg" alt="horses">
            <img src="https://e-nash.net/photos/combine-harvester.jpg" alt="harvester">
            <img src="https://e-nash.net/photos/rio.jpg" alt="amazon">
            <img src="https://e-nash.net/photos/grandmother.jpg" alt="grandmother and grandson">
            <img src="https://e-nash.net/photos/sheep.jpg" alt="sheep">
            </center>
          </div>

          <div class="image-container">
            <center>
            <h2>Urban</h2>
            <img src="https://e-nash.net/photos/elm_hill_Norwich.jpg" alt="Norwich street">
            <img src="https://e-nash.net/photos/aerial-architectural-design-architecture.jpg" alt="urban sprawl">
            <img src="https://e-nash.net/photos/new-york-city.jpg" alt="New York">
            <img src="https://e-nash.net/photos/city.jpg" alt="London street">
            <img src="https://e-nash.net/photos/paris.jpg" alt="paris">
            <img src="https://e-nash.net/photos/bank.jpg" alt="classic building">
            <img src="https://e-nash.net/photos/aircraft.jpg" alt="landing">
            <img src="https://e-nash.net/photos/london.jpg" alt="parliment">
            <img src="https://e-nash.net/photos/british-museum.jpg" alt="British musseum">
            </center>
          </div>
          <div class="image-container">
            <center>
            <h2>Coastal</h2>
            <img src="https://e-nash.net/photos/sand_castle.jpg" alt="sandcastle">
            <img src="https://e-nash.net/photos/sea.jpg" alt="sunset">
            <img src="https://e-nash.net/photos/oil-rig.jpg" alt="oilrig">
            <img src="https://e-nash.net/photos/quayside.jpg" alt="Quayside">
            <img src="https://e-nash.net/photos/portugal.jpg" alt="caves">
            <img src="https://e-nash.net/photos/shipwreck.jpg" alt="shipwreak">
            <img src="https://e-nash.net/photos/lighthouse.jpg" alt="lighthouse">
            <img src="https://e-nash.net/photos/dolphin.jpg" alt="dolphins">
            <img src="https://e-nash.net/photos/sailing-ships.jpg" alt="sailing ships">
            </center>
          </div>
	      </div>
      </div>
    </div>
    <script src="scripts.js></script>
  </body>
</html>

CSS


                      :root {
        --bg-color: #f5f5f5;
        --bg-primary: #d1d1d1;
        --bg-secondary: #e0e0e0;
        --border-light: 3px inset #ffffff;
        --border-dark: 2px solid #878787;
        --btn-border: 3px outset #ffffff; 
        --color-light: #878787;
        --color-dark: #444444;
        --shadow: 3px 4px 15px rgba(0, 0, 0, 0.3);
      }

      * {
        box-sizing: border-box;
        font-family: "Press Start 2P", VT323, cursive;
      }

      body {
        height: 98.5vh;
        width: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-color);
        font-size: 16px;
        line-height: 1.5;
      }
      span {
        display: inline-block;
        font-size: 24px;
        font-weight: 700;
        filter: grayscale(100%);
      }
      h2 {
        margin: 0 0 10px;
        text-align: center;
      }
      h3 {
        margin: 0 0 10px;
        text-align: center;
      }
      button.scape {
        position: relative;
        left:50%;
        transform: translatex(-210%);
        width: 100px;
        padding: 5px;
        margin: 0px auto 5px auto;
        background-color: #fff;
        border: 1px solid #f00;
        border-radius: 4px;
        color: #f00;
        font-weight: 700;
        filter: grayscale(100%);
        cursor: pointer;
        
      }
      button.scape:focus {
        background-color: #f00;
        color: #fff;
        filter: grayscale(100%);
      }
      .image-container {
        display: none;
        width: 100%;
        padding: 10px;
        margin: 30px auto;
        border: 1px solid #f00;
        border-radius: 10px;
        filter: grayscale(100%);
      }
	    .active.container {
		    display: none;
	    }
      #buttons {
        width: 100%;
        padding: 8px 5px 8px 10px;
        margin: 20px auto 10px auto;
        border: 1px solid #c0c0c0;
        border-radius: 8px;
        filter: grayscale(100%);
      }
      .focus.buttons {
        display: block;
        filter: grayscale(100%);
      }
	    .active.buttons {
	      display: none;
	    }
      img {
        display: inline-block;
        width: 150px;
        height: 100px;
        border-radius: 6px;
      }
      img:active {
		    position: absolute;
        top: 176px;
        left: 50%;
        transform: translatex(-50%);
        width: 460px;
        height: 309px;
      }
      #rural > img:active,
      #urban > img:active,
      #coast > img:active {
        position: absolute;
        top: 176px;
        left: 50%;
        transform: translatex(-50%);
        width: 100%;
        height: 314px;
        border-radius: 10px;
      }

JAVASCRIPT


                /**
   * Displays the image container based on the button ID clicked.
   * @param {string} id - The ID of the button clicked (0, 1, 2, or 3).
   */
  function showContainer(id) {
    // Convert string ID to integer for indexing
    const index = parseInt(id, 10);
    
    // Select all elements with the class 'image-container'
    const containers = document.querySelectorAll('.image-container');
    
    // 1. Hide all containers first to reset the view
    containers.forEach(container => {
      container.style.display = 'none';
    });

    // 2. Show the specific container that matches the button index
    if (containers[index]) {
      containers[index].style.display = 'block';
    }
    
    // Optional: Remove grayscale from the buttons/container if you want 
    // the "active" one to be in color, though your CSS handles a lot of this.
    const buttonsDiv = document.getElementById('buttons');
    if (buttonsDiv) {
      buttonsDiv.style.filter = 'grayscale(0%)';
    }
  }

  // Initialize the page: Show the "All" container by default on load
  window.onload = function() {
    showContainer("0");
  };

MENU

INFORMATION & CODE