added better gallery

config/_default/hugo.toml

@@ -1,5 +1,5 @@
 ### General
-baseURL = 'https://robotics.pcampus.edu.np/' # Enter your full production URL
+baseURL = '.' # Enter your full production URL
 title = 'Robotics Club, Pulchowk Campus' # Site title used throughout site
 
 ### SEO, Analytics & 3rd-party

resources/_gen/assets/scss/scss/main.scss_3f90599f3717b4a4920df16fdcadce3d.content

@@ -1485,17 +1485,47 @@ body {
   width: 100%;
   padding: 2px 5px;
   margin-left: auto;
-  margin-right: auto; }
+  margin-right: auto;
+  height: 500px; }
 
 .photos_grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 15px; }
+  position: relative;
+  min-height: 500px;
+  overflow: hidden; }
 
-.photos_container {
-  width: 100%;
-  border-radius: 15px;
-  height: inherit; }
+.photo_container {
+  position: absolute;
+  max-height: 80vh;
+  max-width: 100%;
+  display: none;
+  transform: translate(0, 0);
+  top: 0;
+  bottom: 0; }
+
+.photo_container__hide {
+  display: none; }
+
+.photo_container__show {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: block;
+  transition: all 0.4s;
+  z-index: 1000; }
+
+.photo_container__left {
+  top: 50%;
+  left: 0;
+  transform: translate(-1100px, -50%);
+  display: inherit;
+  transition: all 0.4s; }
+
+.photo_container__right {
+  top: 50%;
+  left: 0;
+  transform: translate(1100px, -50%);
+  display: inherit;
+  transition: all 0.4s; }
 
 @media (min-width: 640px) {
   .gallery_container {

themes/hugo-liftoff/assets/js/app.js

@@ -1,9 +1,7 @@
 import { switcher, clipboard, toggleToc } from './components/components';
 import { header } from './layouts/header';
 import { home } from './pages/home';
+import { gallerySetter } from './layouts/gallery';
 
 
-
-// import { galleryHtmlGen } from './layouts/gallery';
-// galleryHtmlGen();
-
+gallerySetter();

themes/hugo-liftoff/assets/js/layouts/gallery.js

@@ -1,25 +1,60 @@
-const Http = new XMLHttpRequest();
-const url = 'https://www.googleapis.com/drive/v3/drives';
-Http.open("GET", url);
-Http.send();
+let currentId = 1;
+const imagesArray = document.querySelectorAll(".photo_container");
+let noOfImg = imagesArray.length;
 
-Http.onreadystatechange = (e) => {
-  console.log(Http.responseText)
+let options = {
+  threshold: 0.2,
 }
 
-const drivePhotosId = [
-  '1EH6CkWErvD40nmqWu_IgsuumcJkUgcxm',
-];
-
-let galleryHtml = '';
-export function galleryHtmlGen() {
-  drivePhotosId.forEach(id => {
-    galleryHtml += `
-  <div class="photo_container">
-        <img alt="gallery" class="photos_container" src="https://i.postimg.cc/c194sx7z/photo-6298466705638275023-y.jpg" />
-      </div>
-  `
-  });
-
-  document.querySelector(".photos_grid").innerHTML = galleryHtml;
+let callback = (entries, observer) => {
+  entries.forEach(entry => {
+    if (entry.intersectionRatio > options.threshold) {
+      galleryScroller();
+      // console.log('hi')
+    } else {
+      clearTimeout(galleryTimeout);
+      // console.log('hello')
+    };
+  })
+}
+let observer = new IntersectionObserver(callback, options);
+
+let target = document.querySelector(".photos_grid");
+observer.observe(target);
+
+
+function galleryScroller() {
+  // console.log(currentId)
+  gallerySetter();
+  galleryTimeout = setTimeout(() => {
+    currentId = currentId == noOfImg ? 1 : currentId + 1;
+    galleryScroller();
+  }, 3000)
+}
+
+export function gallerySetter() {
+  // console.log(noOfImg);
+  prevLeftId = (currentId - 2 <= 0) ? currentId + noOfImg - 2 : currentId - 2;
+  nextRightId = (currentId + 2 > noOfImg) ? currentId - noOfImg + 2 : currentId + 2;
+  leftId = (currentId - 1 <= 0) ? currentId + noOfImg - 1 : currentId - 1;
+  rightId = (currentId + 1 > noOfImg) ? currentId - noOfImg + 1 : currentId + 1;
+  currentImg = document.querySelector(`.img_id_${currentId}`);
+  leftImg = document.querySelector(`.img_id_${leftId}`);
+  rightImg = document.querySelector(`.img_id_${rightId}`);
+  prevLeftImg = document.querySelector(`.img_id_${prevLeftId}`);
+
+
+  prevLeftImg.classList.remove("photo_container__left");
+  currentImg.classList.remove("photo_container__left");
+  currentImg.classList.remove("photo_container__right");
+  leftImg.classList.remove("photo_container__right");
+  leftImg.classList.remove("photo_container__show");
+  rightImg.classList.remove("photo_container__left");
+  rightImg.classList.remove("photo_container__show");
+
+
+
+  currentImg.classList.add("photo_container__show");
+  leftImg.classList.add("photo_container__left");
+  rightImg.classList.add("photo_container__right");
 }

themes/hugo-liftoff/assets/scss/pages/_gallery.scss

@@ -3,29 +3,70 @@
   padding: 2px 5px;
   margin-left: auto;
   margin-right: auto;
+  height: 500px;
 }
 
 .photos_grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 15px;
+  // display: flex;
+  position: relative;
+  min-height: 500px;
+  // grid-template-columns: 1fr;
+  // grid-gap: 15px;
+  overflow: hidden;
 }
 
-.photos_container {
-  width: 100%;
-  border-radius: 15px;
-  height: inherit;
+.photo_container {
+  position: absolute;
+  // width: fit-content;
+  // height: fit-content;
+  max-height: 80vh;
+  max-width: 100%;
+  display: none;
+  transform: translate(0, 0);
+  top: 0;
+  bottom: 0;
+  // border-radius: 15px;
+}
+
+.photo_container__hide {
+  display: none;
+}
+
+.photo_container__show {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: block;
+  transition: all 0.4s;
+  z-index: 1000;
+}
+
+.photo_container__left {
+  top: 50%;
+  left: 0;
+  transform: translate(-1100px, -50%);
+  display: inherit;
+  transition: all 0.4s;
+}
+
+.photo_container__right {
+  top: 50%;
+  left: 0;
+  transform: translate(1100px, -50%);
+  display: inherit;
+  transition: all 0.4s;
 }
 
+
 @media (min-width: 640px) {
   .gallery_container {
-    max-width: 640px
+    max-width: 640px;
   }
 }
 
 @media (min-width: 768px) {
   .gallery_container {
-    max-width: 768px
+    max-width: 768px;
   }
 
   .photos_grid {
@@ -37,12 +78,11 @@
   .gallery_container {
     max-width: 1024px;
     padding: 2px 32px;
-
   }
 }
 
 @media (min-width: 1280px) {
   .gallery_container {
-    max-width: 1280px
+    max-width: 1280px;
   }
-}
+}

themes/hugo-liftoff/layouts/shortcodes/gallery.html

@@ -11,10 +11,9 @@ <h2 class="home-section-title">
   <div class="gallery_container">
     <div class="photos_grid">
       {{ range readDir "/static/images/gallery" }}
-      <div class="photo_container">
-        <img alt="gallery" class="photos_container" src='images/gallery/{{.Name}}' />
-      </div>
+      <img class="photo_container photo_container__hide img_id_{{strings.TrimSuffix ".webp" .Name}}" data-img-id="{{strings.TrimSuffix ".webp" .Name}}" alt="gallery"  src='images/gallery/{{.Name}}' />
       {{ end }}
+    </div>
 
 
     </div>