Neste tutorial vou mostrar como fazer um Filtro de imagens para usar em portfólio e filtar as categorias sem a utilização plugins pagos. Você poderá usar em seus projetos e deixa-los mais elegantes e profissionais. No final deste post vou disponibilizar os arquivos para download. Vamos lá!
Demonstração
Organizado o diretório dos arquivos
A primeira coisa que devemos fazer é organizar o diretório onde vão ficar os arquivos do código fonte da nossa página html que exibirá o portfólio.
1 – Diretório principal do Projeto
Crie uma pasta para ser o diretório principal do nosso projeto. Você pode dá qualquer nome para ela. Nesse exemplo vamos nomear de “filter-portfolio”, conforme a imagem abaixo:
2 – Dentro da pasta principal vamos criar o arquivo “index.html” e mais três pastas; “img, css e js“:
- index.html – arquivo da nossa página principal (também conhecido como “home”)
- img – para armazenar os arquivos de imagens do projeto: “.jpg, .png, entre outras…”
- css – para armazenar os arquivos de folha de estilos: “.css”
- js – para armazenar os arquivos do tipo javascript: “.js”
Eles vão ficar conforme a imagem abaixo:
3 – Inserindo código HTML no arquivo index.html
Abra o seu arquivo, “index.html”, copie e cole o código abaixo nele:
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filtro Meu Portfólio</title>
<link href="_css/style.css" rel="stylesheet">
</head>
<body>
<section>
<aside>
<h1>Meu Portfólio</h1>
</aside>
<header>
<p data-filter="all" class="button active">Mostrar todas</p>
<p data-filter="nat" class="button">Natureza</p>
<p data-filter="car" class="button">Automóveis</p>
<p data-filter="pes" class="button">Pessoas</p>
</header>
<article>
<figure class="filter car">
<div>
<img src="_img/cars1.jpg">
</div>
</figure>
<figure class="filter nat">
<div>
<img src="_img/lights.jpg">
</div>
</figure>
<figure class="filter car">
<div>
<img src="_img/cars2.jpg">
</div>
</figure>
<figure class="filter nat">
<div>
<img src="_img/mountains.jpg">
</div>
</figure>
<figure class="filter pes">
<div>
<img src="_img/people3.jpg">
</div>
</figure>
<figure class="filter car">
<div>
<img src="_img/cars3.jpg">
</div>
</figure>
<figure class="filter pes">
<div>
<img src="_img/people2.jpg">
</div>
</figure>
<figure class="filter nat">
<div>
<img src="_img/nature.jpg">
</div>
</figure>
<figure class="filter pes">
<div>
<img src="_img/people1.jpg">
</div>
</figure>
</article>
</section>
<script src="_js/jquery-3.6.0.min.js"></script>
<script src="_js/script.js"></script>
</body>
</html>
4 – Criando a folha de estilo na pasta _css
Na pasta _css vamos criar o arquivo com o nome “style.css“. Para criar e editar esse arquivo você pode usar qualquer ferramenta de edição de HTML como: Notepad++, Sublime Text, ou IDEs como o: Visual Studio, VS-Code entre muitos outros.
Abra o seu arquivo, “style.css”, copie e cole o seguinte código css3:
*{
padding: 0;
margin: 0;
list-style: none;
font-family: 'Open Sans';
text-decoration: none;
box-sizing: border-box;
}
body{
background-color: #DDD;
}
section{
width: 100%;
height: auto;
max-width: 100%;
background-color: #DDD;
margin: 0;
}
section aside{
width: 100%;
height: auto;
max-width: 100%;
padding: 20px 20px 0px 20px;
background-color: #EEE;
}
section aside h1{
padding: 80px 0px 5px 0px;
color: #444;
width: 1040px;
height: auto;
margin: 6px auto;
font-size: 25px;
max-width: 100%;
position: relative;
text-align: center;
}
section header{
width: 100%;
height: auto;
padding: 25px 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
section header p.active{
background-color: #e67e22;
color: white;
}
section header p{
width: auto;
height: auto;
text-align: center;
font-size: 11pt;
margin-right: 5px;
border: 1px solid #ccc;
background-color: #3ba6a4;
padding: 10px;
color: #FFF;
cursor: pointer;
}
section article{
max-width: 100%;
width: 900px;
height: auto;
margin: 0 auto;
display: grid;
grid-gap: 10px;
justify-items: center;
grid-template-columns: repeat(auto-fit, minmax(250px, 2fr));
padding: 0;
}
section article figure{
width: auto;
height: auto;
max-width: 100%;
overflow: hidden;
margin: 2px;
position: relative;
transition: all 0.4s linear;
}
}
section article figure div{
width: auto;
height: auto;
max-width: 100%;
}
section article figure div img{
width: 400px;
height: auto;
max-width: 100%;
position: relative;
transition: 0.6s;
margin: 0px;
}
@media all and (max-width:890px)
{
section article{
max-width: 100%;
margin: 0 auto;
display: grid;
grid-gap: 5px;
justify-content: center;
justify-items: center;
grid-template-columns: repeat(auto-fit, minmax(150px, 2fr));
padding: 40px 10px 10px 10px;
}
}5 – Criando os arquivos na pasta _js
Na pasta _js vamos precisar dos seguintes arquivos .js:
- script.js – nele vamos colocar o código JavaScript para criar os efeitos do filtro nos elementos.
- jquery-3.6.0.min.js – uma biblioteca livre que contém funções da linguagem de programação JavaScript que interage com páginas em HTML. Sem essa biblioteca nosso script.js não irá funciona.
Abra o arquivo, “script.js”, copie e cole o seguinte código JavaScript:
$(document).ready(function(){
$(".button").click(function(){
var name = $(this).attr("data-filter");
$(".button").removeClass('active');
$(this).addClass('active');
if(name == "all")
{
$(".filter").show("2000");
}
else
{
$(".filter").not("."+name).hide("2000");
$(".filter").filter("."+name).show("2000");
}
})
})Se você já criou o arquivo “jquery-3.6.0.min.js”, clique aqui, copie todo o código que aparece na página e cole no seu arquivo jquery. (dica: use as teclas: “Ctrl + A” para selecionar todo o conteúdo da página.)
Depois de fazer todo este processo o nosso portfólio vai ficar conforme a demonstração abaixo:
Aqui finalizamos o nosso tutorial. Espero que nesse vasto mundo Dev.
Vou disponibilizar os arquivos que usamos neste tutorial gratuitamente para download.
Você também pode nos ajudar fazendo uma doação ao nosso projeto.
