Bootstrap not functioning properly in selecting gallery items

Looking for some help with my website's gallery page development. I've included the HTML and JavaScript files below. However, I seem to be missing a selector ID as none of the pictures are changing and the categories aren't working. Any help would be greatly appreciated. Thank you.

<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="js/filter.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" 
id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!--Start about  area --> 
<div class="about_area">
 <div class="container">
    <div class="row">
    <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h1 class="gallery-title">Gallery</h1>
    </div>
    <div align="center">
        <button class="btn btn-default filter-button" data-filter="all">All</button>
        <button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button>
        <button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
        <button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
        <button class="btn btn-default filter-button" data-filter="irrigation">Irrigation 
Pipes</button>
    </div>
    <br/>
    <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
     <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
     <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
     <img src="http://fakeimg.pl/365x365/" class="img-responsive">
    </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
     <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
    </div>

    <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
    </div>

    <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
       <img src="http://fakeimg.pl/365x365/" class="img-responsive">
    </div>

        <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
           <img src="http://fakeimg.pl/365x365/" class="img-responsive">
        </div>

        <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
            <img src="http://fakeimg.pl/365x365/" class="img-responsive">
        </div>
    </div>
</div>
</section>

        </div>      
    </div>
</div>
<!--end about  area -->

Check out the JavaScript code below:

$(document).ready(function(){
 $(".filter-button").click(function(){
    var value = $(this).attr('data-filter');        
    if(value == "all")
    {
        // $('.filter').removeClass('hidden');
        $('.filter').show('1000');
    }else{
    // $('.filter[filter-item="'+value+'"]').removeClass('hidden');
    //  $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');
        }
     });

    if ($(".filter-button").removeClass("active")) {
       $(this).removeClass("active");
    }
    $(this).addClass("active");
});
javascripthtmlcssbootstrap-4selector

Answer №1

"Is there an Error to be Spotted?" No errors have been found at least not in the code posted, just ensure that the bootstrap and jquery are functioning properly. The code seems to be operational, as I have modified the images to demonstrate that.

$(document).ready(function() {
  $(".filter-button").click(function() {
    var value = $(this).attr("data-filter");
    if (value == "all") {
      // $('.filter').removeClass('hidden');
      $(".filter").show("1000");
    } else {
      // $('.filter[filter-item="'+value+'"]').removeClass('hidden');
      //  $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
      $(".filter")
        .not("." + value)
        .hide("3000");
      $(".filter")
        .filter("." + value)
        .show("3000");
    }
  });

  if ($(".filter-button").removeClass("active")) {
    $(this).removeClass("active");
  }
  $(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
  <head>
 
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <style>
      img {
        width: 365px;
        height: 365px;
      }
    </style>
  </head>
  <body>
    <div class="about_area">
      <div class="container">
        <div class="row">
          <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h1 class="gallery-title">Gallery</h1>
          </div>
          <div align="center">
            <button class="btn btn-default filter-button" data-filter="all">
              All
            </button>
            <button class="btn btn-default filter-button" data-filter="hdpe">
              HDPE Pipes
            </button>
            <button
              class="btn btn-default filter-button"
              data-filter="sprinkle"
            >
              Sprinkle Pipes
            </button>
            <button class="btn btn-default filter-button" data-filter="spray">
              Spray Nozzle
            </button>
            <button
              class="btn btn-default filter-button"
              data-filter="irrigation"
            >
              Irrigation Pipes
            </button>
          </div>
          <br />
          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
          >
            <img
              src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
          >
            <img
              src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
          >
            <img
              src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
              class="img-responsive"
            />
          </div>
          <!-- More image divs will be added here -->

        </div>
      </div>
    </div>

    <!--end about  area -->
    <!--The JS File -->
    <script src="./index.js"></script>
  </body>
</html>

Answer №2

$(document).ready(function() {
  $(".filter-button").click(function() {
    var value = $(this).attr("data-filter");
    if (value == "all") {
      // $('.filter').removeClass('hidden');
      $(".filter").show("1000");
    } else {
      // $('.filter[filter-item="'+value+'"]').removeClass('hidden');
      //  $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
      $(".filter")
        .not("." + value)
        .hide("3000");
      $(".filter")
        .filter("." + value)
        .show("3000");
    }
  });

  if ($(".filter-button").removeClass("active")) {
    $(this).removeClass("active");
  }
  $(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <style>
      img {
        width: 365px;
        height: 365px;
      }
    </style>
  </head>
  <body>
    <div class="about_area">
      <div class="container">
        <div class="row">
          <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h1 class="gallery-title">Gallery</h1>
          </div>
          <div align="center">
            <button class="btn btn-default filter-button" data-filter="all">
              All
            </button>
            <button class="btn btn-default filter-button" data-filter="hdpe">
              HDPE Pipes
            </button>
            <button
              class="btn btn-default filter-button"
              data-filter="sprinkle"
            >
              Sprinkle Pipes
            </button>
            <button class="btn btn-default filter-button" data-filter="spray">
              Spray Nozzle
            </button>
            <button
              class="btn btn-default filter-button"
              data-filter="irrigation"
            >
              Irrigation Pipes
            </button>
          </div>
          <br />
          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
          >
            <img
              src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
          >
            <img
              src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
              class="img-responsive"
            />
          </div> {/* Additional images would be added here */}
        </div>
      </div>
    </div>

    <!--end about  area -->
    <!--The JS File -->
    <script src="./index.js"></script>
  </body>
</html>

Answer №3

Is there a way to disable the "ALL" button functionality so that only specific categories are displayed instead of all? Ideally, I would like the code to only show images from the rest of the categories when it is run.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for showing a single table with buttons on display

I am using R markdown and have included multiple tables with buttons, but when I open the file, all tables are displayed at once. How can I ensure only one table is shown upon opening the file? https://i.sstatic.net/NFidf.png <script type="text/ja ...

javascripthtmlr-markdowndata-science

In ReactJS, the radio button in Material UI selects the value of the previous button

In my ReactJS app, I've implemented a radio button group. However, I am encountering an issue where logging the value results in the previous button's value rather than the current one. For instance, if I switch from "all" to "awaited," the log s ...

javascriptreactjsmaterial-ui

Reload the MEN stack webpage without the need to reload the entire page

I am in the process of developing a data analytics dashboard using the MEN stack (MongoDB, Express.js, Node.js). I have successfully implemented functionality to display real-time data that refreshes every 5 seconds without the need to reload the entire ...

javascriptajaxexpressazure-cosmosdb

Discovering the operating system and architecture type for my browser using Node.js - what steps should I take?

I am currently developing a Node.js app that serves as an API microservice. I need to retrieve the operating system and architecture type from a GET request made by my browser. One example could be: "Windows NT 10.0; Win64; x64" ...

javascriptnode.jsexpress

Issue with Material UI Tab component not appearing in the first position

I've encountered an unusual problem where the first tab is not displaying correctly. To troubleshoot, I added a second tab which appeared perfectly fine. After setting up the second tab to have the desired content of the first tab, I deleted the origi ...

javascriptreactjsmaterial-ui

Is there a way to verify if a time interval has already been established using Javascript?

I've encountered an issue with a bouncing div that activates every 5 seconds through an interval. As I scroll to the bottom of the page, the div fades out and the interval is supposed to be cleared. However, it seems like there's a problem with ...

javascriptjquerysetintervalclearinterval

The form includes Bootstrap columns and a button, but there is noticeable wasted space within the

This is the form structure I am working with: <form method="GET" action="."> <div class="container-fluid pt-2 px-5 py-3"> <div class="row g-4"> <div class= ...

htmlcssbootstrap-5

Achieving both positive and negative styling in AngularJS with ng-class: A guide

I'm currently working on an application that requires indicating red for negative values and blue for positive values in a calculation. <td class="amount debit"> <input type="text" class="form-control" ng-model="vm.model.form.amount_debi ...

javascriptangularjsng-class

What is the process for translating a single line of code from jQuery to vanilla JavaScript?

How should the code block $('#output').on('input ','.dynamic-Qty', function(e){ be handled? $('#output').on('input ','.dynamic-Qty', function(e){ let z = e.target.dataset; console.log(z.id) conso ...

javascriptjqueryhtml

Utilize CSS to create a column layout

I have some HTML output that I would like to style using CSS, but unfortunately I have no control over how the HTML is generated and cannot make any changes to it. Right now, I have a two-column layout set up here: http://jsfiddle.net/uvg6f3tr/ I'm ...

htmlcssmultiple-columns

Using Selenium with C# to find elements within a chart

I am trying to locate and interact with the stimulusFrequency circles on this chart so that I can click and drag them. <svg class="svg-graph-content graphEventHandler ng-valid" ng-model="hearingGraph" viewBox="0 0 470 355" preserveAspectRatio="none"> ...

javascriptc#seleniumxpathselenium-webdriver

The inner workings of Virtual DOM in React and Vue disclosed

I am a student experimenting with creating my own Virtual DOM for a college project in JavaScript, keeping it simple without advanced features like props or events found in popular frameworks like React and Vue. I'm curious about code splitting. If I ...

javascriptreactjsvue.js

Angular default route with parameters

Is it possible to set a default route with parameters in Angular, such as www.test.com/landing-page?uid=123&mode=front&sid=de8d4 const routes: Routes = [ { path: '', redirectTo: 'landing-page', pathMatch: 'full' }, ...

htmlangulartypescriptangular-materialangular-router

As I resize my browser window, I notice that my menu button starts to shift upwards along the

I recently created a menu button that looks great, but I noticed that when I shrink the browser window, it starts to move slightly upwards. It's really annoying and I can't figure out why this is happening. Can someone please help me troubleshoot ...

htmlcss

What's the reason for text-alignment not functioning properly?

After some testing, I have come up with the following code: .Greetings { width:100%; display:block; text-align:center; font-family: "Times New Roman", Times, serif; font-size:75px; color:#208CB7; } The objective was to center the text on the ...

javascripthtmlcssweb

Reaching SVG with CSS

Is it possible to target SVG elements with CSS? In older versions of IE, they display like broken images and I want to hide them using modernizr. I'm looking for a solution like the following... .no-svg object[type=svg] { display:none; } I have be ...

csssvgcss-selectors

Exploring Angular 2 Routing across multiple components

I am facing a situation where I have an app component with defined routes and a <router-outlet></router-outlet> set. Additionally, I also have a menu component where I want to set the [routerLink] using the same routes as the app component. How ...

javascriptangular

Is there a way to automatically input an array of elements into a form without having to do it manually

Is it possible to create a form using an array of items fetched from a database, and automatically populate the form with each of these elements? Currently, I'm facing difficulties as the form appears empty. What am I missing? Below is the code I ha ...

javascripthtmlreactjsforms

The checkbox labeled "Shipping Same as Billing" is not functioning correctly. I have included my JavaScript code below, can someone please help me identify what I am overlooking? (Only JavaScript code is provided; HTML is

I'm having trouble transferring data from a 'shipping' address to the 'billing' address section. I've included all my code, but nothing seems to copy over when the check box useShip is selected. All the HTML code is provided f ...

javascripthtml

How can an Angular directive effectively serve as a front-facing interface for interacting with other elements?

This question delves into the realm of Web Components, with the examples being written in Angular for its versatility in handling certain issues (such as replace even though it's deprecated) and familiarity to many developers. Update After consideri ...

javascriptangularjspolymerweb-component