Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Created February 23, 2022 02:38
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save neno-tech/97a305a8dc39922cc7534355e97f50ca to your computer and use it in GitHub Desktop.
Save neno-tech/97a305a8dc39922cc7534355e97f50ca to your computer and use it in GitHub Desktop.
Download ZIP
Raw
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
Raw
css.html
img{
max-width: 100%;
}
.gallery{
background-color: #dbddf1;
padding: 80px 0;
}
.gallery img{
background-color: #ffffff;
padding: 15px;
width: 100%;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
cursor: pointer;
}
#gallery-modal .modal-img{
width: 100%;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Gallery - Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section class="gallery min-vh-100">
<div class="container-lg">
<div class="row gy-4 row-cols-1 row-cols-sm-2 row-cols-md-3">
<div class="col">
<img src="https://drive.google.com/uc?id=" class="gallery-item" alt="gallery">
</div>
<div class="col">
<img src="https://drive.google.com/uc?id=" class="gallery-item" alt="gallery">
</div>
<div class="col">
<img src="https://drive.google.com/uc?id=" class="gallery-item" alt="gallery">
</div>
<div class="col">
<img src="https://drive.google.com/uc?id=" class="gallery-item" alt="gallery">
</div>
<div class="col">
<img src="https://drive.google.com/uc?id=" class="gallery-item" alt="gallery">
</div>
<div class="col">
<img src="https://drive.google.com/uc?id=" class="gallery-item" alt="gallery">
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="gallery-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<!-- <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> -->
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src=" " class="modal-img" alt="modal img">
</div>
</div>
</div>
</div>
<script>
document.addEventListener("click",function (e){
if(e.target.classList.contains("gallery-item")){
const src = e.target.getAttribute("src");
document.querySelector(".modal-img").src = src;
const myModal = new bootstrap.Modal(document.getElementById('gallery-modal'));
myModal.show();
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment