Seneca-CDOT · CDPhu · Nov 17, 2022 · Nov 2, 2022 · Nov 2, 2022 · Nov 2, 2022
diff --git a/.gitignore b/.gitignore
@@ -80,7 +80,6 @@ typings/
 
 # Nuxt.js build / generate output
 .nuxt
-dist
 
 # Gatsby files
 .cache/
@@ -102,6 +101,8 @@ dist
 
 # TernJS port file
 .tern-port
+
+
 # Logs
 logs
 *.log
@@ -232,3 +233,4 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,15 @@
+# Getting Started
+
+Install Node.js if you haven't already and run:
+`npm install`
+
+To start the local site use:
+`npm start`
+
+To deploy updated versions:
+`npm run deploy`
+
+
+
+
+
diff --git a/src/gallery.css b/src/gallery.css
@@ -0,0 +1,77 @@
+body {
+    font-family: sans-serif;
+    background: black;  
+    padding-top: 50px;
+  }
+
+  *{
+    font-family: 'Poppins', sans-serif !important;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: -moz-none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+
+h1{
+    color: #FFF;
+}
+
+/*navbar*/
+
+.navbar{
+background: #222 !important;
+line-height: 2rem !important;
+position: fixed;
+top: 0;
+left: 0;
+right: 0;
+z-index: 9999;
+}
+
+.navbar .navbar-brand{
+color: #FFF !important;
+margin-left: 15px;
+}
+
+.navbar-nav .active a{
+color: #0ebbff !important;
+}
+
+.navbar-nav .nav-item .nav-link{
+color: #FFF;
+}
+.dropdown-menu {
+background: #22221E;
+}
+.dropdown-menu .dropdown-item{
+color: #FFF;
+transition: all 0.2s;
+}
+.dropdown-menu .dropdown-item:hover{
+background: #0a5bc5;
+color: #FFF;
+}
+.navbar-toggler-icon{
+color: #FFF !important;
+}
+.navbar-dark .navbar-toggler{
+border-color: #FFFFFF !important;
+}
+
+img 
+{
+    height: 300px;
+    width: auto;
+    padding: 5px;  
+    border-radius: 15px;
+}
+
+
+.container{
+    max-width: 1860px;
+    text-align:center;
+    display: flex;
+}
+
diff --git a/src/gallery.html b/src/gallery.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>My-PhotoHub📸</title>
+
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./gallery.css">
+
+  </head>
+
+  <body>
+
+  <!-- NAVIGATION BAR STARTS NAVIGATION BAR STARTS -->
+
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <a class="navbar-brand" href="#">My-PhotoHub📸</a>
+</nav>
+
+    <p class="main">
+
+      <div class="container">
+      <div id="gallery" itemscope itemtype="http://schema.org/ImageGallery">
+
+        <a href="https://i.pinimg.com/550x/51/9b/c9/519bc900e094fda0731db75b3801a0e1.jpg" data-pswp-width="400" data-pswp-height="488">
+        <img src="https://i.pinimg.com/550x/51/9b/c9/519bc900e094fda0731db75b3801a0e1.jpg" > </a>
+
+        <a href="http://afflictor.com/wp-content/uploads/2014/12/owlhat.png" data-pswp-width="610" data-pswp-height="760">
+        <img src="http://afflictor.com/wp-content/uploads/2014/12/owlhat.png"></a>
+
+        <a href="https://i.pinimg.com/originals/4b/65/0e/4b650e11a9de002eed942e34ab208501.jpg" data-pswp-width="570" data-pswp-height="760">
+        <img src="https://i.pinimg.com/originals/4b/65/0e/4b650e11a9de002eed942e34ab208501.jpg" ></a>
+
+        <a href="https://w0.peakpx.com/wallpaper/303/575/HD-wallpaper-cool-dude-cool-dude-funny-owl-hat-bird.jpg" data-pswp-width="800" data-pswp-height="700">
+        <img src="https://w0.peakpx.com/wallpaper/303/575/HD-wallpaper-cool-dude-cool-dude-funny-owl-hat-bird.jpg" ></a>
+
+        <a href="https://imgur.com/wBBTtlo.jpg" data-pswp-width="517px" data-pswp-height="760px">
+          <img src="https://imgur.com/wBBTtlo.jpg" ></a>
+
+        <a href="https://theoxfordowl.files.wordpress.com/2013/09/party-owl.jpg" data-pswp-width="500" data-pswp-height="700">
+        <img src="https://theoxfordowl.files.wordpress.com/2013/09/party-owl.jpg" > </a>
+
+        <a href="https://cdn.drawception.com/drawings/603483/7n6s31tVjw.png" data-pswp-width="600" data-pswp-height="500">
+        <img src="https://cdn.drawception.com/drawings/603483/7n6s31tVjw.png" ></a>
+
+        <a href="https://img.pixers.pics/pho_wat(s3:700/FO/26/28/10/16/700_FO26281016_ee33230d42a489a669c7e37224d586ea.jpg,621,700,cms:2018/10/5bd1b6b8d04b8_220x50-watermark.png,over,401,650,jpg)/wall-murals-young-owl-wearing-a-hat-in-front-of-white-background.jpg.jpg" data-pswp-width="621" data-pswp-height="700">
+        <img src="https://img.pixers.pics/pho_wat(s3:700/FO/26/28/10/16/700_FO26281016_ee33230d42a489a669c7e37224d586ea.jpg,621,700,cms:2018/10/5bd1b6b8d04b8_220x50-watermark.png,over,401,650,jpg)/wall-murals-young-owl-wearing-a-hat-in-front-of-white-background.jpg.jpg" > </a>
+
+        <a href="https://capturetheatlas.com/wp-content/uploads/2020/04/Long-exposure-photograph-1415x540-1585936962.jpg" data-pswp-width="1018" data-pswp-height="388">
+        <img src="https://capturetheatlas.com/wp-content/uploads/2020/04/Long-exposure-photograph-1415x540-1585936962.jpg" ></a>
+
+        <a href="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg" data-pswp-width="853" data-pswp-height="480">
+        <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg" ></a>
+      </div>
+    </div>
+    </p>
+
+    <script type="module" src="./gallery.js"></script>
+  </body>
+</html>
diff --git a/src/gallery.js b/src/gallery.js
@@ -0,0 +1,131 @@
+import "@fontsource/poppins";
+import "photoswipe/dist/photoswipe.css"
+import PhotoSwipe from 'photoswipe/dist/photoswipe.esm';
+import "./gallery.css"
+
+// Simple fullscreen API
+const fullscreenAPI = getFullscreenAPI();
+
+// Create custom container
+// which will be stretched to fullscreen.
+//
+// (we can not use PhotoSwipe root element (.pswp),
+//  as it is created only after openPromise is resolved)
+//
+const pswpContainer = getContainer();
+
+function getFullscreenPromise() {
+  // Always resolve promise,
+  // as wa want to open lightbox 
+  // (no matter if fullscreen is supported or not)
+  return new Promise((resolve) => {
+    if (!fullscreenAPI || fullscreenAPI.isFullscreen()) {
+      // fullscreen API not supported, or already fullscreen
+      resolve();
+      return;
+    }
+
+    document.addEventListener(fullscreenAPI.change, () => {
+      pswpContainer.style.display = 'block';
+      // delay to make sure that browser fullscreen animation is finished
+      setTimeout(function() {
+        resolve();
+      }, 300);
+    }, { once: true });
+
+    fullscreenAPI.request(pswpContainer);
+  });
+}
+
+
+import Lightbox from 'photoswipe/dist/photoswipe-lightbox.esm';
+
+const lightbox = new Lightbox({
+  gallery: '#gallery',
+  children: 'a',
+  pswpModule: PhotoSwipe,
+  wheelToZoom: true,
+  preloaderDelay: 0,
+
+    // Add function that returns promise
+    openPromise: getFullscreenPromise,
+
+    // Append PhotoSwipe to our container
+    appendToEl: fullscreenAPI ? pswpContainer : document.body,
+
+    // disable opening/closing animations
+    showAnimationDuration: 0,
+    hideAnimationDuration: 0,
+
+    // Add if you're using responsive images
+    // since viewport size is unpredictable
+    // at initialization
+    preloadFirstSlide: false
+  });
+  lightbox.on('close', () => {
+    pswpContainer.style.display = 'none';
+    if (fullscreenAPI && fullscreenAPI.isFullscreen()) {
+      fullscreenAPI.exit();
+    }
+  });
+lightbox.init();
+
+// Simple fullscreen API helper,
+// supports unprefixed and webkit-prefixed versions
+function getFullscreenAPI() {
+  let api;
+  let enterFS;
+  let exitFS;
+  let elementFS;
+  let changeEvent;
+  let errorEvent;
+
+  if (document.documentElement.requestFullscreen) {
+    enterFS = 'requestFullscreen';
+    exitFS = 'exitFullscreen';
+    elementFS = 'fullscreenElement';
+    changeEvent = 'fullscreenchange';
+    errorEvent = 'fullscreenerror';
+  } else if (document.documentElement.webkitRequestFullscreen) {
+    enterFS = 'webkitRequestFullscreen';
+    exitFS = 'webkitExitFullscreen';
+    elementFS = 'webkitFullscreenElement';
+    changeEvent = 'webkitfullscreenchange';
+    errorEvent = 'webkitfullscreenerror';
+  }
+
+  if (enterFS) {
+    api = {
+      request: function (el) {
+        if (enterFS === 'webkitRequestFullscreen') {
+          el[enterFS](Element.ALLOW_KEYBOARD_INPUT);
+        } else {
+          el[enterFS]();
+        }
+      },
+
+      exit: function () {
+        return document[exitFS]();
+      },
+
+      isFullscreen: function () {
+        return document[elementFS];
+      },
+
+      change: changeEvent,
+      error: errorEvent
+    };
+  }
+
+  return api;
+}
+
+function getContainer() {
+  const pswpContainer = document.createElement('div');
+  pswpContainer.style.background = '#000';
+  pswpContainer.style.width = '100%';
+  pswpContainer.style.height = '100%';
+  pswpContainer.style.display = 'none';
+  document.body.appendChild(pswpContainer);
+  return pswpContainer;
+}