Merge pull request #187 from Ash0807/Ash0807-patch-1

[Hacktoberfest'23] : Added Image Gallery Website
naveen3011 · Oct 5, 2023 · 2a815c3 · 2a815c3
2 parents 8061a06 + 22586ac
commit 2a815c3
Show file tree

Hide file tree

Showing 5 changed files with 498 additions and 0 deletions.
diff --git a/Image Gallery Website/README.md b/Image Gallery Website/README.md
@@ -0,0 +1,29 @@
+# Image-Gallery
+A customizable, modular, responsive, Image Gallery website.
+
+
+https://github.com/Ash0807/Image-Gallery/assets/93093775/cdd0e352-5497-4db8-8ad0-7a6a6b22f2d5
+
+
+
+# Tech Stack
+I used - HTML, CSS, JavaScript
+
+# Core Features
+-   Fully responsive.
+-   Easy to download.
+-   Based on any topic.
+-   Social sharing.
+-   Full screen support.
+-   Zoom in/out, Pinch to zoom.
+-   Responsive images.
+-   Animation
+-   And many more.
+
+# API used
+```sh
+    [email protected]
+
+    apiKey = "kQdIkN07IqZI7byq9g2H4GbRbYH7m5JCdGXjaYznNbh0ekFxadxE4wcW"
+
+    apiUrl = `https://api.pexels.com/v1/curated?page=1'
diff --git a/Image Gallery Website/index.html b/Image Gallery Website/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+
+<html lang="en" dir="ltr">
+<head>
+<meta charset="utf-8">
+<title>Ashish Image Gallery </title>
+<link rel="stylesheet" href="style.css">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
+<script src="script.js" defer></script>
+<link rel="stylesheet" href="../custom-styles.css">
+<style>
+{
+color: #8A6CFF;
+background: none;
+border: 2px solid #8A6CFF;
+}
+.download-btn-cn a:hover{
+background: #8A6CFF;
+color: whitesmoke;
+}
+</style>
+</head>
+<body>
+<div class="lightbox">
+<div class="wrapper">
+<header>
+<div class="photographer">
+<i class="uil uil-camera"></i>
+<span></span>
+</div>
+<div class="buttons">
+<i class="uil uil-import"></i>
+<i class="close-icon uil uil-times"></i>
+</div>
+</header>
+<div class="preview-img">
+<div class="img"><img src="" alt="preview-img"></div>
+</div>
+</div>
+</div>
+</div>
+<section class="search">
+<img src="search-img.jpg" alt="search-img">
+<div class="content"> 
+<h1>Image Gallery</h1>
+<p>Search and download any type of images within a second</p>
+<div class="search-box">
+<i class="uil uil-search"></i>
+<input type="text" placeholder="Search images">
+<h4 align="right">Ashish Mishra</h4>
+</div>
+</div>
+</section>
+<section class="gallery">
+<ul class="images"></ul>
+<button class="load-more">Load More</button>
+</section>
+</body>
+</html>
diff --git a/Image Gallery Website/script.js b/Image Gallery Website/script.js
@@ -0,0 +1,86 @@
+const imageWrapper = document.querySelector(".images");
+const searchInput = document.querySelector(".search input");
+const loadMoreBtn = document.querySelector(".gallery .load-more");
+const lightbox = document.querySelector(".lightbox");
+const downloadImgBtn = lightbox.querySelector(".uil-import");
+const closeImgBtn = lightbox.querySelector(".close-icon");
+
+const apiKey = "kQdIkN07IqZI7byq9g2H4GbRbYH7m5JCdGXjaYznNbh0ekFxadxE4wcW";
+const perPage = 15;
+let currentPage = 1;
+let searchTerm = null;
+
+const downloadImg = (imgUrl) => {
+fetch(imgUrl).then(res => res.blob()).then(blob => {
+const a = document.createElement("a");
+a.href = URL.createObjectURL(blob);
+a.download = new Date().getTime();
+document.body.appendChild(a);
+a.click();
+a.remove();
+}).catch(() => console.log("Failed to download image!"));
+}
+
+const showLightbox = (name, img) => {
+lightbox.querySelector("img").src = img;
+lightbox.querySelector("span").innerText = name;
+downloadImgBtn.setAttribute("data-img", img);
+lightbox.classList.add("show"); 
+document.body.style.overflow = "hidden";
+}
+
+const hideLightbox = () => {
+lightbox.classList.remove("show");
+document.body.style.overflow = "auto";
+}
+
+const generateHTML = (images) => {
+    imageWrapper.innerHTML += images.map(img => 
+        `<li class="card">
+            <img onclick="showLightbox('${img.photographer}', '${img.src.large2x}')" src="${img.src.large2x}" alt="img">
+            <div class="details">
+                <div class="photographer">
+                    <i class="uil uil-camera"></i>
+                    <span>${img.photographer}</span>
+                </div>
+                <button onclick="downloadImg('${img.src.large2x}');">
+                    <i class="uil uil-import"></i>
+                </button>
+            </div>
+        </li>`
+    ).join("");
+}
+
+const getImages = (apiURL) => {
+searchInput.blur();
+loadMoreBtn.innerText = "Loading...";
+loadMoreBtn.classList.add("disabled");
+fetch(apiURL, {
+headers: { Authorization: apiKey }
+}).then(res => res.json()).then(data => {
+generateHTML(data.photos);
+loadMoreBtn.innerText = "Load More";
+loadMoreBtn.classList.remove("disabled");
+}).catch(() => console.log("Failed to load images!"));
+}
+const loadMoreImages = () => {
+currentPage++;
+let apiUrl = `https://api.pexels.com/v1/curated?page=${currentPage}&per_page=${perPage}`;
+apiUrl = searchTerm ? `https://api.pexels.com/v1/search?query=${searchTerm}&page=${currentPage}&per_page=${perPage}` : apiUrl; 
+getImages(apiUrl);
+}
+const loadSearchImages = (e) => {
+if(e.target.value === "") return searchTerm = null;
+if(e.key === "Enter") {
+currentPage = 1;
+searchTerm = e.target.value;
+imageWrapper.innerHTML = "";
+getImages(`https://api.pexels.com/v1/search?query=${searchTerm}&page=1&per_page=${perPage}`);
+}
+}
+
+getImages(`https://api.pexels.com/v1/curated?page=${currentPage}&per_page=${perPage}`);
+loadMoreBtn.addEventListener("click", loadMoreImages);
+searchInput.addEventListener("keyup", loadSearchImages);
+closeImgBtn.addEventListener("click", hideLightbox);
+downloadImgBtn.addEventListener("click", (e) => downloadImg(e.target.dataset.img));
diff --git a/Image Gallery Website/search-img.jpg b/Image Gallery Website/search-img.jpg