How to create a filter with images?

Asked

Viewed 55 times

0

I am creating a project that lists several images of establishments, I want to create a filter so that I search the name of the store and appear only her, or research the type of cuisine, distance and everything else.

I tried using a jquery but it didn’t work if someone knows a better way and can help I appreciate.

#inicio {
    /* The image used */
    background-image: url("../img/fundo.jpg");

    /* Set a specific height */
    min-height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

h1{
	font-family: "Century Gothic", sans-serif;
	text-shadow: 0.1em 0.1em 0.2em black;

}
h6{
	font-family: "Century Gothic", sans-serif;
	color: #ff0000;
	 

}

img.image{
	width:320px;
  height:220px;
  border-radius: 20px;
}

.msg{
	margin-left: auto;
  margin-right: auto;
}

.overlay {
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  opacity: 0;
  font-family: "Century Gothic", sans-serif;
  color: #fff;
  transition: .5s ease;
  margin-bottom: 15px;
  border-bottom-left-radius: 21px;
  border-bottom-right-radius: 21px;
  position: relative;
  z-index: 999999;
  margin-top: -36px;
  padding-top: 6px;
  padding-bottom: 6px;
  

}

.image {
	text-align: center;
	color: white;
	font-size: 15px;
	bottom: 0;
}

.msg:hover .overlay {
  opacity: 1;
}

    
<!doctype html>
<html lang="en">
  <head>
   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="shortcut icon" href="img/favicon.ico" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    
	<title>Desafio - Pablo Valle</title>
  </head>
  <body>
    <div class="jumbotron text-center" id="inicio">
		<h1>Desafio Gourmet</h1>
		<h6> Mensagem secundaria não sei o que colocar</h6><br>
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-4"><input class="form-control" type="text" id="busca" placeholder="Nome do estabelecimento"></div>
			<div class="col-md-4"></div>
		</div>
	</div>

	
	<div class="container">
	<div class="row text-center " id="filtro">
		<div class="msg"><img class="image" src="img/portfolio/1.jpg"> <div class="overlay" >Alma Chef - Contemporânea 7KM</div></div>
		<div class="msg"><img class="image" src="img/portfolio/2.jpg" > <div class="overlay" >Akemi - Japonesa 10KM</div></div>
		<div class="msg"><img class="image" src="img/portfolio/3.jpg" > <div class="overlay" >68 La Pizzeria Lourdes - Pizzaria 5KM</div></div>
		
		<div class="msg"><img class="image" src="img/portfolio/4.jpg" > <div class="overlay" >Birosca S2 - Contemporânea 5KM</div></div>
		<div class="msg"><img class="image" src="img/portfolio/5.jpg" > <div class="overlay" >Café com Letras - Contemporânea 2KM</div></div>
		<div class="msg"><img class="image" src="img/portfolio/6.jpg" > <div class="overlay" >Duke'n'Duke - Hamburguearia 7KM</div></div>
		
		<div class="msg"><img class="image" src="img/portfolio/7.jpg" > <div class="overlay" >Duke'n'Duke - Hamburguearia 5KM</div></div>
		<div class="msg"><img class="image" src="img/portfolio/8.jpg" > <div class="overlay" >Campagne - Brasileira 2KM</div></div>
		<div class="msg"><img class="image" src="img/portfolio/9.jpg" > <div class="overlay" >Albanos Lourdes - Brasileira 4KM</div></div>
		
		<div class="msg"><img class="image" src="img/portfolio/10.jpg" > <div class="overlay" >Benvindo - Contemporânea 10KM</div></div>
		<div class="msg"><img class="image" src="img/portfolio/11.jpg" > <div class="overlay" >Marilia - Pizzaria 7KM</div></div>
		<div class="msg"><img class="image" src="img/portfolio/12.jpg" > <div class="overlay" >Marukame - Japonesa 5KM</div></div>
		
		</div>
		
		
	</div>

	<script type="text/javascript">
$(function(){
    $("#busca").keyup(function(){
        var texto = $(this).val();
         
        $("#filtro img").css("display", "block");
        $("#filtro img").each(function(){
            if($(this).text().indexOf(texto) < 0)
               $(this).css("display", "none");
        });
    });
});
</script>
      </body>
	  
	  
</html>

  • Dude you want a dynamic or static filter? You can include in the parent tag of your image div class="msg" some custom attributes like data-km="10km" or data-km="20km" and data-culinaria="japonesa" or data-culinaria="italiana" and then even with CSS you take these custom dates and filter just what you want using a hidden radio button for example... That’s just an idea to shed some light on, but there are other ways to do it

1 answer

0

If you want you can filter through the text of div follows the example with code explained:

$(document).ready(function() {
  $("#busca").keyup(function() {
    var texto = $(this).val();              // pega o texto do input
         
    if(texto.length > 5) {                  // se o texto for maior que 5
      $(".msg").each(function() {           // faz um for em todas as divs
        var valor = $(this).text();         // pega o texto de cada div
        			
        if(!valor.includes(texto)) {        // a div que não conter o texto do input
          $(this).css("display", "none");   // não apareceram só a div com o texto
        }
      })
            		
    } else if(texto.length == 0) {          // se o input tiver vazio
      $(".msg").css("display", "block");    // mostra todas as divs
    }
  })
})
#inicio {
  /* The image used */
  background-image: url("../img/fundo.jpg");

  /* Set a specific height */
  min-height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
h1{
  font-family: "Century Gothic", sans-serif;
  text-shadow: 0.1em 0.1em 0.2em black;
}
h6{
  font-family: "Century Gothic", sans-serif;
  color: #ff0000;
}

img.image{
  width:320px;
  height:220px;
  border-radius: 20px;
}
.msg{
  margin-left: auto;
  margin-right: auto;
}
.overlay {
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  opacity: 0;
  font-family: "Century Gothic", sans-serif;
  color: #fff;
  transition: .5s ease;
  margin-bottom: 15px;
  border-bottom-left-radius: 21px;
  border-bottom-right-radius: 21px;
  position: relative;
  z-index: 999999;
  margin-top: -36px;
  padding-top: 6px;
  padding-bottom: 6px;
  

}

.image {
text-align: center;
color: white;
font-size: 15px;
bottom: 0;
}
.msg:hover .overlay {
opacity: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="jumbotron text-center" id="inicio">
   <h1>Desafio Gourmet</h1>
   <h6> Mensagem secundaria não sei o que colocar</h6><br>
   <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4"><input class="form-control" type="text" id="busca" placeholder="Nome do estabelecimento"></div>
      <div class="col-md-4"></div>
   </div>
</div>
  	
<div class="container">
   <div class="row text-center " id="filtro">
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg"> <div class="overlay" >Alma Chef - Contemporânea 7KM</div></div>
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Akemi - Japonesa 10KM</div></div>
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >68 La Pizzeria Lourdes - Pizzaria 5KM</div></div>
		
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Birosca S2 - Contemporânea 5KM</div></div>
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Café com Letras - Contemporânea 2KM</div></div>
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Duke'n'Duke - Hamburguearia 7KM</div></div>
		
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Duke'n'Duke - Hamburguearia 5KM</div></div>
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Campagne - Brasileira 2KM</div></div>
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Albanos Lourdes - Brasileira 4KM</div></div>
		
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Benvindo - Contemporânea 10KM</div></div>
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Marilia - Pizzaria 7KM</div></div>
      <div class="msg"><img class="image" src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" > <div class="overlay" >Marukame - Japonesa 5KM</div></div>
		
   </div>   		
		
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.