Crear una galería en google sites
<!DOCTYPE html>
<!-- Design by jonathancanales-->
<html lang="en">
<head>
<title>Galeria con Filtros</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style media="screen">
body{
line-height: 1.5;
font-family: sans-serif;
}
*{
margin:0;
box-sizing: border-box;
}
.container{
max-width: 1170px;
margin:auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
img{
max-width: 100%;
vertical-align: middle;
}
/*.gallery*/
.gallery{
width: 100%;
display: block;
min-height: 100vh;
background-color: #2a2932;
padding: 100px 0;
}
.gallery .gallery-filter{
padding: 0 15px;
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.gallery .gallery-filter .filter-item{
color: #ffffff;
font-size: 17px;
border: 2px solid white;
text-transform: uppercase;
display: inline-block;
border-radius: 20px;
margin-right: 8px;
cursor: pointer;
padding: 8px 20px 8px 20px;
line-height: 1.2;
transition: all 0.3s ease;
}
.gallery .gallery-filter .filter-item.active{
color: white;
border-color : #16b5ef;
background: #16b5ef;
}
.gallery .gallery-item{
width: calc(100% / 3);
padding: 15px;
}
.gallery .gallery-item-inner img{
width: 100%;
border: 3px solid #d4dad9;
}
.gallery .gallery-item.show{
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.gallery .gallery-item.hide{
display: none;
}
/*responsive*/
@media(max-width: 491px){
.gallery .gallery-item{
width: 50%;
}
}
@media(max-width: 467px){
.gallery .gallery-item{
width: 100%;
}
.gallery .gallery-filter .filter-item{
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<section class="gallery">
<div class="container">
<div class="row">
<div class="gallery-filter">
<span class="filter-item active" data-filter="all">Todos</span>
<span class="filter-item" data-filter="watch">Relojes</span>
<span class="filter-item" data-filter="headphone">Audífonos</span>
<span class="filter-item" data-filter="camera">Cámaras</span>
<span class="filter-item" data-filter="shoe">Zapatillas</span>
<span class="filter-item" data-filter="phone">Celulares</span>
</div>
</div>
<div class="row">
<!-- gallery item start -->
<div class="gallery-item shoe">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/VLGLkJ4G/shoe-1.jpg" alt="shoe">
</div>
</div>
<!-- gallery item end -->
<!-- gallery item start -->
<div class="gallery-item shoe">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/bNmZCNXf/zapatillas-negra.png" alt="shoe">
</div>
</div>
<!-- gallery item end -->
<!-- gallery item start -->
<div class="gallery-item headphone">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/6QGQSBrH/headphone-1.jpg" alt="headphone">
</div>
</div>
<!-- gallery item end -->
<!-- gallery item start -->
<div class="gallery-item camera">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/fWvR12dh/camera-1.jpg" alt="camera">
</div>
</div>
<!-- gallery item end -->
<!-- gallery item start -->
<div class="gallery-item headphone">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/3N3JdpP6/headphone-2.jpg" alt="headphone">
</div>
</div>
<!-- gallery item end -->
<!-- gallery item start -->
<div class="gallery-item camera">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/wTTjzX5R/camera-2.jpg" alt="camera">
</div>
</div>
<!-- gallery item end -->
<div class="gallery-item phone">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/26R5NgTC/phone-1.jpg" alt="phone">
</div>
</div>
<div class="gallery-item camera">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/LXt89v0L/camera-3.jpg" alt="camera">
</div>
</div>
<div class="gallery-item watch">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/0jZ5mjvN/watch-1.jpg" alt="watch">
</div>
</div>
<!-- gallery item start -->
<div class="gallery-item watch">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/dVhQkJxq/watch-2.jpg" alt="watch">
</div>
</div>
<!-- gallery item end -->
<!-- gallery item start -->
<div class="gallery-item watch">
<div class="gallery-item-inner">
<img src="https://i.postimg.cc/5thFVxSK/RELOJ-HOMBRE.png" alt="watch">
</div>
</div>
<!-- gallery item end -->
</div>
</div>
</section>
<script>
const filterContainer = document.querySelector(".gallery-filter"),
galleryItems = document.querySelectorAll(".gallery-item");
filterContainer.addEventListener("click", (event) =>{
if(event.target.classList.contains("filter-item")){
// deactivate existing active 'filter-item'
filterContainer.querySelector(".active").classList.remove("active");
// activate new 'filter-item'
event.target.classList.add("active");
const filterValue = event.target.getAttribute("data-filter");
galleryItems.forEach((item) =>{
if(item.classList.contains(filterValue) || filterValue === 'all'){
item.classList.remove("hide");
item.classList.add("show");
}
else{
item.classList.remove("show");
item.classList.add("hide");
}
});
}
});
</script>
</body>
</html>