AlanSimpsonMe/Automatic_Photo_Slideshow.html

## Automatic_Photo_Slideshow.html
<!DOCTYPE html>
<html lang="en">
<meta name="author" content="Alan Simpson">
<meta name="description" content="Code and images available at http://alansimpson.me/javascript/code_quickies/slideshow/">
<head>
    <title>Photo Slideshow</title>
    <style>
        #slideshow {
            /* Style to taste */
            width: 100%;
            /* Use 56.25% for 16:9 aspect ratio, 75% for 4:3 ratio*/
            padding-bottom: 56.25%;
            border: solid 1px black;
            border-radius: 4px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #1e1e1e;
            transition: 0.5s;
        }
        /* ------------------------------------------------- Wide screen */
        @media screen and (min-width: 500px) {
            #container {
                width: 60%;
                max-width: 1200px;
                margin: 1em auto;
            }
        }
        /* ------------------------------------------------- Narrow screen */
        @media screen and (max-width: 499px) {
            #container {
                width: 90%;
                margin: 0 auto;
            }
        }
    </style>
</head>

<body>
    <div id="container">
        <!-- Slideshow image-->
        <div id="slideshow">
        </div>
    </div>

    <!-- Put this code near the bottom of the page, just before the closing /body tag -->
    <script>
        //For this to work, images must be named img01.jpg, img02.jpg, img03.jpg...img10.jpg, img11.jpg
        //with no breaks in the sequence. And number_of_image has to be accurate indicating the highest
        //number.  The images folder must be a child folder to the folder that contains the page with this code.
        var number_of_images = 40;
        var images_folder = 'slides';
        //Specify delay in seconds.
        var delay = 1;
        var nextimage = '';
        // Creates the thumbnail images inside filmstrip.
        for (i = 1; i <= number_of_images; i++) {
            nextimage = images_folder + '/img' + ('0' + i.toString()).slice(-2) + ".jpg";
            document.getElementById('slideshow').style.backgroundImage = "url('" + nextimage; + "')";
        }
        //Calls the show function when a left or right scrolling arrow is clicked.
        function next() {
            //Determin the number of the image currently showing.
            var currentimage = document.getElementById('slideshow').style.backgroundImage.split('.jpg');
            var iNext = parseInt(currentimage[0].slice(-2)) + 1;
            //Don't scroll past the last image, loop around to the first.
            iNext = iNext > number_of_images ? 1 : iNext;
            nextimage = images_folder + '/img' + ('0' + iNext.toString()).slice(-2) + ".jpg";
            document.getElementById('slideshow').style.backgroundImage = "url('" + nextimage; + "')"
        }
        //This is what runs the slide show.
        document.addEventListener("DOMContentLoaded", function () {
            var clock = setInterval("next()", delay * 1000);
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<meta name="author" content="Alan Simpson">
	<meta name="description" content="Code and images available at http://alansimpson.me/javascript/code_quickies/slideshow/">
	<head>
	<title>Photo Slideshow</title>
	<style>
	#slideshow {
	/* Style to taste */
	width: 100%;
	/* Use 56.25% for 16:9 aspect ratio, 75% for 4:3 ratio*/
	padding-bottom: 56.25%;
	border: solid 1px black;
	border-radius: 4px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #1e1e1e;
	transition: 0.5s;
	}
	/* ------------------------------------------------- Wide screen */
	@media screen and (min-width: 500px) {
	#container {
	width: 60%;
	max-width: 1200px;
	margin: 1em auto;
	}
	}
	/* ------------------------------------------------- Narrow screen */
	@media screen and (max-width: 499px) {
	#container {
	width: 90%;
	margin: 0 auto;
	}
	}
	</style>
	</head>

	<body>
	<div id="container">
	<!-- Slideshow image-->
	<div id="slideshow">
	</div>
	</div>

	<!-- Put this code near the bottom of the page, just before the closing /body tag -->
	<script>
	//For this to work, images must be named img01.jpg, img02.jpg, img03.jpg...img10.jpg, img11.jpg
	//with no breaks in the sequence. And number_of_image has to be accurate indicating the highest
	//number. The images folder must be a child folder to the folder that contains the page with this code.
	var number_of_images = 40;
	var images_folder = 'slides';
	//Specify delay in seconds.
	var delay = 1;
	var nextimage = '';
	// Creates the thumbnail images inside filmstrip.
	for (i = 1; i <= number_of_images; i++) {
	nextimage = images_folder + '/img' + ('0' + i.toString()).slice(-2) + ".jpg";
	document.getElementById('slideshow').style.backgroundImage = "url('" + nextimage; + "')";
	}
	//Calls the show function when a left or right scrolling arrow is clicked.
	function next() {
	//Determin the number of the image currently showing.
	var currentimage = document.getElementById('slideshow').style.backgroundImage.split('.jpg');
	var iNext = parseInt(currentimage[0].slice(-2)) + 1;
	//Don't scroll past the last image, loop around to the first.
	iNext = iNext > number_of_images ? 1 : iNext;
	nextimage = images_folder + '/img' + ('0' + iNext.toString()).slice(-2) + ".jpg";
	document.getElementById('slideshow').style.backgroundImage = "url('" + nextimage; + "')"
	}
	//This is what runs the slide show.
	document.addEventListener("DOMContentLoaded", function () {
	var clock = setInterval("next()", delay * 1000);
	});
	</script>
	</body>
	</html>