<!-- flower pictures are under a free license found from https://www.pexels.com -->
<div class="container gallery">
<!-- Header -->
<div class="row">
<div class="col-5">
<h1 class="display-5 mr-3">Gallery</h1>
</div>
<div class="col-7">
<h3>Show Category</h3>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked id="children" onchange="handleChange(this)">
<label class="custom-control-label" for="children">Children</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked id="groups" onchange="handleChange(this)">
<label class="custom-control-label" for="groups">Groups</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked id="events" onchange="handleChange(this)">
<label class="custom-control-label" for="events">Events</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked id="portraits" onchange="handleChange(this)">
<label class="custom-control-label" for="portraits">Portraits</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked id="landscapes" onchange="handleChange(this)">
<label class="custom-control-label" for="landscapes">Landscapes</label>
</div>
</div>
</div>
<!-- Images -->
<div class="row">
<div class="col-6 cont">
<img src="" id="img-0">
</div>
<div class="col-6 cont">
<img src="" id="img-1">
</div>
</div>
<div class="row">
<div class="col-6 cont">
<img src="" id="img-2">
</div>
<div class="col-6 cont">
<img src="" id="img-3">
</div>
</div>
<div class="row">
<div class="col-6 cont">
<img src="" id="img-4">
</div>
<div class="col-6 cont">
<img src="" id="img-5">
</div>
</div>
<div class="row">
<div class="col-6 cont">
<img src="" id="img-6">
</div>
<div class="col-6 cont">
<img src="" id="img-7">
</div>
</div>
<div class="row">
<div class="col-6 cont">
<img src="" id="img-8">
</div>
<div class="col-6 cont">
<img src="" id="img-9">
</div>
</div>
<div class="row">
<div class="col-6 cont">
<img src="" id="img-10">
</div>
<div class="col-6 cont">
<img src="" id="img-11">
</div>
</div>
</div>
.gallery img {
max-width: 100%;
max-height: 100%;
margin: 10px 0 10px 0;
box-shadow: 0 0 6px 1px grey;
}
const gallery = {children: [
'https://images.pexels.com/photos/789786/pexels-photo-789786.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/50692/brothers-family-siblings-boys-50692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
], groups: [
'https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/697243/pexels-photo-697243.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
], events: [
'https://images.pexels.com/photos/1190297/pexels-photo-1190297.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/59884/pexels-photo-59884.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
], portraits: [
'https://images.pexels.com/photos/53487/james-stewart-man-person-actor-53487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
], landscapes: [
'https://images.pexels.com/photos/917494/pexels-photo-917494.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
]}
var filters = []
function handleChange(event) {
console.log(event.id)
if (filters.indexOf(event.id) === -1) {
filters.push(event.id)
} else {
filters.splice(filters.indexOf(event.id), 1)
}
resetImgages()
applyFilters()
}
function applyFilters() {
var position = 0
for (var category in gallery) {
if (filters.indexOf(category) === -1) {
for (const url of gallery[category]) {
const img = document.querySelector(`#img-${position}`)
img.style.display = "block"
img.src = url
position++
}
}
}
}
function addImages() {
var position = 0
for (var category in gallery) {
if (filters.indexOf(category) === -1) {
for (const url of gallery[category]) {
const img = document.querySelector(`#img-${position}`)
img.src = url
position++
}
}
}
}
function resetImgages() {
for (let i = 0; i < 12; i++) {
const img = document.querySelector(`#img-${i}`)
img.style.display = "none"
}
}
addImages()
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.