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 likedata-km="10km"ordata-km="20km"anddata-culinaria="japonesa"ordata-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– hugocsl