code-boxx/0-NODE-GALLERY.MD

## 0-NODE-GALLERY.MD

      
    Raw
  

              0-NODE-GALLERY.MD
            
          
    NODEJS EXPRESS IMAGE GALLERY

https://code-boxx.com/image-gallery-nodejs/
NOTES


Run unpack.bat (Windows) unpack.sh (Linux/Mac). This will automatically:

Create 3 folders - gallery, public, views.
Save the images below into gallery.
Move 2b-gallery.css and 2c-gallery.js into public.
Move 2a-gallery.ejs into views.
Install required modules - npm i glob express ejs
Run node 1-server.js to start the server.


Access http://localhost in your browser.

IMAGES


LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-server.js
// (A) LOAD REQUIRED MODULES
const express = require("express"),
      path = require("path"),
      glob = require("glob");

// (B) INIT EXPRESS SERVER
const app = express();
app.set("view engine", "ejs");

// (C) GET IMAGES
var images = glob.sync("gallery/**/*.{jpg,jpeg,png,webp,gif}");
var names = [];
images.forEach(img => names.push(path.parse(img).name));

// (D) GALLERY IMAGES & PAGE
app.use("/public", express.static(path.join(__dirname, "public")))
app.use("/gallery", express.static(path.join(__dirname, "gallery")))
app.get("/", (req, res) => res.render("2a-gallery.ejs" , { images: images, names: names }));

// (E) START SERVER
app.listen(80, () => console.log(`Server running at port 80`));

## 2a-gallery.ejs
<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Image Gallery</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="public/2b-gallery.css">
    <script src="public/2c-gallery.js"></script>
  </head>
  <body>
    <div class="gallery">
      <% images.forEach((img, i) => { %>
      <figure>
        <img src="<%= img %>">
        <figcaption><%= names[i] %></figcaption>
      </figure>
      <% }); %>
    </div>
  </body>
</html>

## 2b-gallery.css
/* (A) GALLERY CONTAINER */
/* (A1) BIG SCREENS - 3 IMAGES PER ROW */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
@media screen and (max-width: 640px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* (B) THUMBNAILS & CAPTION */
.gallery figure {
  margin: 0;
  border: 1px solid #cdcdcd;
  background: #000;
}
.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* fill | contain | cover | scale-down */
  cursor: pointer;
}
.gallery figcaption {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  text-align: center;
  color: #fff;
  padding: 5px 10px;
}

/* (C) FULLSCREEN IMAGE */
.gallery img.full {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  object-fit: contain; /* fill | contain | cover | scale-down */
  background: #fff;
}

/* (D) OPTIONAL ANIMATION *
.gallery { overflow-x: hidden; }
.gallery img { transition: all 0.3s; } */

## 2c-gallery.js
window.addEventListener("DOMContentLoaded", () => {
  // (A) GET ALL IMAGES
  var all = document.querySelectorAll(".gallery img");

  // (B) CLICK ON IMAGE TO TOGGLE FULLSCREEN
  if (all.length>0) { for (let img of all) {
    img.onclick = () => img.classList.toggle("full");
  }}
});

## unpack.bat
md gallery
md public
md views
move 2a-gallery.ejs views
move 2b-gallery.css public
move 2c-gallery.js public
curl https://user-images.githubusercontent.com/11156244/281620198-f6d73a31-c48b-4599-afc2-ea2645cc1ffd.png --ssl-no-revoke --output gallery/Wind.png
curl https://user-images.githubusercontent.com/11156244/281620196-8bf995b2-d700-4713-9d7b-5d5d7489fc26.png --ssl-no-revoke --output gallery/Water.png
curl https://user-images.githubusercontent.com/11156244/281620193-1821c7c0-9afd-4da3-8c0c-590a7933d3c9.png --ssl-no-revoke --output gallery/Fire.png
curl https://user-images.githubusercontent.com/11156244/281620187-1ea3a8c0-6da2-417c-be24-be54570b9b3d.png --ssl-no-revoke --output gallery/Earth.png
call npm i glob express ejs
node 1-server.js

## unpack.sh
mkdir -m 777 gallery
mkdir -m 777 public
mkdir -m 777 views
mv ./2a-gallery.ejs ./views
mv ./2b-gallery.css ./public
mv ./2c-gallery.js ./public
curl https://user-images.githubusercontent.com/11156244/281620198-f6d73a31-c48b-4599-afc2-ea2645cc1ffd.png --ssl-no-revoke --output ./gallery/Wind.png
curl https://user-images.githubusercontent.com/11156244/281620196-8bf995b2-d700-4713-9d7b-5d5d7489fc26.png --ssl-no-revoke --output ./gallery/Water.png
curl https://user-images.githubusercontent.com/11156244/281620193-1821c7c0-9afd-4da3-8c0c-590a7933d3c9.png --ssl-no-revoke --output ./gallery/Fire.png
curl https://user-images.githubusercontent.com/11156244/281620187-1ea3a8c0-6da2-417c-be24-be54570b9b3d.png --ssl-no-revoke --output ./gallery/Earth.png
source "npm i glob express ejs"
node 1-server.js
	// (A) LOAD REQUIRED MODULES
	const express = require("express"),
	path = require("path"),
	glob = require("glob");

	// (B) INIT EXPRESS SERVER
	const app = express();
	app.set("view engine", "ejs");

	// (C) GET IMAGES
	var images = glob.sync("gallery/*/.{jpg,jpeg,png,webp,gif}");
	var names = [];
	images.forEach(img => names.push(path.parse(img).name));

	// (D) GALLERY IMAGES & PAGE
	app.use("/public", express.static(path.join(__dirname, "public")))
	app.use("/gallery", express.static(path.join(__dirname, "gallery")))
	app.get("/", (req, res) => res.render("2a-gallery.ejs" , { images: images, names: names }));

	// (E) START SERVER
	app.listen(80, () => console.log(`Server running at port 80`));
	<!DOCTYPE html>
	<html>
	<head>
	<title>Responsive Image Gallery</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="public/2b-gallery.css">
	<script src="public/2c-gallery.js"></script>
	</head>
	<body>
	<div class="gallery">
	<% images.forEach((img, i) => { %>
	<figure>
	<img src="<%= img %>">
	<figcaption><%= names[i] %></figcaption>
	</figure>
	<% }); %>
	</div>
	</body>
	</html>
	/* (A) GALLERY CONTAINER */
	/* (A1) BIG SCREENS - 3 IMAGES PER ROW */
	.gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: 10px;
	max-width: 1200px;
	margin: 0 auto;
	}

	/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
	@media screen and (max-width: 640px) {
	.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	/* (B) THUMBNAILS & CAPTION */
	.gallery figure {
	margin: 0;
	border: 1px solid #cdcdcd;
	background: #000;
	}
	.gallery img {
	width: 100%;
	height: 200px;
	object-fit: cover; /* fill \| contain \| cover \| scale-down */
	cursor: pointer;
	}
	.gallery figcaption {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	text-align: center;
	color: #fff;
	padding: 5px 10px;
	}

	/* (C) FULLSCREEN IMAGE */
	.gallery img.full {
	position: fixed;
	top: 0; left: 0; z-index: 999;
	width: 100vw; height: 100vh;
	object-fit: contain; /* fill \| contain \| cover \| scale-down */
	background: #fff;
	}

	/* (D) OPTIONAL ANIMATION *
	.gallery { overflow-x: hidden; }
	.gallery img { transition: all 0.3s; } */
	window.addEventListener("DOMContentLoaded", () => {
	// (A) GET ALL IMAGES
	var all = document.querySelectorAll(".gallery img");

	// (B) CLICK ON IMAGE TO TOGGLE FULLSCREEN
	if (all.length>0) { for (let img of all) {
	img.onclick = () => img.classList.toggle("full");
	}}
	});
	md gallery
	md public
	md views
	move 2a-gallery.ejs views
	move 2b-gallery.css public
	move 2c-gallery.js public
	curl https://user-images.githubusercontent.com/11156244/281620198-f6d73a31-c48b-4599-afc2-ea2645cc1ffd.png --ssl-no-revoke --output gallery/Wind.png
	curl https://user-images.githubusercontent.com/11156244/281620196-8bf995b2-d700-4713-9d7b-5d5d7489fc26.png --ssl-no-revoke --output gallery/Water.png
	curl https://user-images.githubusercontent.com/11156244/281620193-1821c7c0-9afd-4da3-8c0c-590a7933d3c9.png --ssl-no-revoke --output gallery/Fire.png
	curl https://user-images.githubusercontent.com/11156244/281620187-1ea3a8c0-6da2-417c-be24-be54570b9b3d.png --ssl-no-revoke --output gallery/Earth.png
	call npm i glob express ejs
	node 1-server.js
	mkdir -m 777 gallery
	mkdir -m 777 public
	mkdir -m 777 views
	mv ./2a-gallery.ejs ./views
	mv ./2b-gallery.css ./public
	mv ./2c-gallery.js ./public
	curl https://user-images.githubusercontent.com/11156244/281620198-f6d73a31-c48b-4599-afc2-ea2645cc1ffd.png --ssl-no-revoke --output ./gallery/Wind.png
	curl https://user-images.githubusercontent.com/11156244/281620196-8bf995b2-d700-4713-9d7b-5d5d7489fc26.png --ssl-no-revoke --output ./gallery/Water.png
	curl https://user-images.githubusercontent.com/11156244/281620193-1821c7c0-9afd-4da3-8c0c-590a7933d3c9.png --ssl-no-revoke --output ./gallery/Fire.png
	curl https://user-images.githubusercontent.com/11156244/281620187-1ea3a8c0-6da2-417c-be24-be54570b9b3d.png --ssl-no-revoke --output ./gallery/Earth.png
	source "npm i glob express ejs"
	node 1-server.js