Create Image Gallery From The Contents Of A Website Folder

Click on a thumbnail below to load the main image above (right-click on the image above to save it)

To copy and use the template:

* Download and unzip the files.

* There are two examples included, the only difference is the layout of the thumbnail galleries - left-aligned images as above (example-1) or centered images (example-2).

* Select the folder of your choice and open it to explore the basic HTML/CSS webpage files inside.

* Click on the index.html to automatically open the page in your default browser and then you can test how it works for yourself.

* Swap out the images and thumbnails for your own pics (but keep the names in accordance with the protocol for this code - see "Naming the Images:" below).

* Browse through the other items in the folder to find out how the webpage works and feel free to extract or change any of the code to suit your own requirements.

* When changing things in the index.html (you can edit this with Windows Notepad) just save the modified index.html and then refresh the webpage in the browser to see the effect of your changes - when you are happy with the results you can host it for free on GitHub (as shown here.) or simply move the complete new root directory folder to wherever else you wish to host it.

Contents of the download examples:

Download Demo

Notes:

The main purpose of this code is to save you having to type the image info (example shown below) again and again for every single image in a large or frequently changing gallery.

<div>
	<a href="images/image (1).jpg">
	<img src="thumbnails/image (1).jpg" alt="Image Gallery Thumbnail (1)"> 
	</a>
</div>

Naming the Images:

Apparently html cannot directly access and view the contents of a directory's internal folders on the server in order to make a gallery of all the images in that folder unless you use an external server based element like PHP or an API. This code is a simple, alternative way of making image galleries from folders in html, however it is a little restricted because you have to rename all the images following a predictable pattern so that you can display them by "guessing" at the next file in a predictable sequence. This particular version of this code is recommended because of the easy renaming method and unlike others you don't have to specifically count and include the exact number of images that you want the code to loop through and add to the gallery - just drop any number of thumbnails in the thumbnail folder and an duplicate number of identically named full-sized images into the images folder - keep the names for both sets identical and predictable e.g. image (1), image (2), image (3), etc.

I've made it so that the image naming convention used in this example can be easily done by using batch renaming in file explorer - just hold down the Shift key while selecting all of the images you want to include and rename everything to "image" by right-clicking on the top highlighted inthe selected files and then selecting 'Rename', and then changing its name to "image.jpg" - File Explorer will rename all the selected files to "image" and automatically add a suffix of consecutive numbers to them all using the correct format for this code, e.g. image (1), image (2), image (3), etc.

Please make sure there are no gaps in the number sequence and be cautious when adding any further .jpg files to the /images or /thumbnails folders so that they don't interrupt the sequence. Also please make sure there are a duplicated number and sequence of corresponding thumbnails in the thumbnail folder.

Here is the code used in the index.html:

If you want you can remove the javascript contained in this, put it in a seperate .js file and to link it instead.

<!DOCTYPE html>
<html> 
<head> 
	<title>Create Image Gallery From The Contents Of A Websites Folder</title> 
	<link rel="stylesheet" type="text/css" href="style.css" />
</head> 
<body>
	<div class="intro"> 

		<h2>Create Image Gallery From The Contents Of A Websites Folder</h2> 

		<div id="image-gallery">
			<img id="current-image" src="images/image (1).jpg" alt = "Image Gallery Image (1)">
			<span id="overlay" class="loading-spinner"></span>
		</div>


		<p>Click on a thumbnail below to load the hi-res image above (right-click image above to save it)</p> 
	</div>


 	<div class="grid-container" id="image-thumbs">
	</div>


	<script>
		var imageThumbs = document.getElementById("image-thumbs");
		var currentImage = document.getElementById("current-image");

		let i = 1;

		var tempImg = new Image();
		tempImg.onload = function(){
		  appendImage();
		}

		var tryLoadImage = function(){
			tempImg.src = "thumbnails/image" + " (" + i + ")" + ".jpg";
		}

		var appendImage = function(){
			var thumb = document.createElement("img");
			thumb.src = tempImg.src;
 			thumb.alt = "Image Gallery Image" + " (" + i + ")";
 			thumb.classList.add("thumb");
			imageThumbs.appendChild(thumb);
			thumb.addEventListener("click", function() {

     				document.getElementsByClassName("loading-spinner")[0].style.visibility = "visible";
				currentImage.src = this.src.replace("thumbnails/", "images/");


			function checkLoaded(){
				var finishedLoading = document.getElementById("current-image").complete;

					if (finishedLoading) { document.getElementsByClassName("loading-spinner")[0].style.visibility = "hidden"; 
					}

   			setTimeout(checkLoaded, 1000);
			}

			checkLoaded();

				clearTimeout(checkLoaded);
				window.scrollTo({ top: 0, behavior: 'smooth' });

				}
				);

 		  tryLoadImage(i++)
		}

		tryLoadImage(i);
	</script>
</body>
</html>

Here is the style.css code:

.intro { 
	text-align: center;
	font-family: Arial;
}

.grid-container { 
	text-align: center;
	background: #DCDCDC;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 22px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 18px;
	padding-bottom: 20px;
	/* row-gap: 20px; */
	grid-template-columns: repeat(auto-fill, 280px);
	justify-content: space-around;
}

h2 { 
	font-size: 36px;
}

p { 
 	font-size: 14pt;
}

#image-gallery {
	position: relative;
	width: 600px; 
	margin: 0 auto;
}

#current-image {
	position: relative;
	width: 100%;
}

#overlay {
	visibility: hidden;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.thumb {
 	width: 280px;
  	/* height: 280px; */
	margin: 0px;
	padding-top: 22px;
	padding-bottom: 22px;
	/* padding: 0px; */
	color: white;
	font-size: 60px;
	font-weight: bold;
	text-align: center;
	align-items: center;
	cursor: pointer;
}

#image-thumbs {
	justify-content: center;
}

.loading-spinner {
	width: 57px;
	height: 57px;
	border: 7px solid #aaaaaa; /* gray */
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
	}

@keyframes rotation {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

* Don't forget to add the images and thumbnails folders with some correctly named demo images in them *

The thumbnail gallery above on this page is built automatically from images placed in the websites thumbnail folder (contents shown in the iframe below).

The images placed in the websites thumbnail folder (contents shown in the iframe below).

(Click here to open the above thumbnails folder in a new tab).

Test note: The iframe of the thumbnail directory above is really only shown here because I was ideally trying to find a way to get a website folders contents to load directly into an html page and keep the original names of the images. Getting it to list the filenames on the same page inside an iframe was as close as I got apart from the renaming demo shown above - I figure there could be a way access the images without PHP or API but it is beyond my knowledge at present.

Update: After putting this site online the iframe above showing the thumbnails folder contents stopped working - probably the same reason of not being able to read anything from the server without php! - to temporarily repair I have added a contents-list.txt to the thumbnails folder and linked to that instead.

Keywords (included here just to help search engines find this site):

How to load images from a folder into HTML page for display in a gallery/album automatically | Put all images from directory into HTML gallery | Insert images from a folder automatically | Html and Javascript image gallery | How do I read folder images and display inside html? | Adding images from a folder to website dynamically | Image gallery html css javascript | Add images from thumbnail folder to album | Show image folder contents in html.

Thanks to the makeuseof article:

• How to Create a Simple Image Gallery Using HTML, CSS, and JavaScript •
www.makeuseof.com/image-gallery-html-css-javascript.

The code used in this demo site automatically builds a gallery from images placed in the html websites thumbnail and images folders to save you having to add code separately for every image.