Slideshow
← Return
Slideshow with 4 versions
1 - Simplest - assumes you are working with a full-size screen, so the arrows are on the sides. Click here for demo
2 - Works with both large and smaller screens. When the screen size shrinks to 700 pixels, the arrow appear on the top instead of on the sides, so there's a little more in the css file. Click here for demo
3 - Includes thumbnails of all the images at the bottom. You can click on a thumbnail and the corresponding full image will appear.Click here for demo
4 - Images change automatically every 2000 ms, as a carousel. Click here for demo
Here's how it works:
There are 5 photos (of cats, of course) in a file I called 'images'. My index.php file gathers all the pictures into an array called 'slideshowarray', using the 'scandir' command. Each each picture gets saved in a variable called 'imagefile' and displayed on the screen, except.... they all get set to 'display: none'. They are there, but invisible! Haha - that's the magic trick!
Each image gets an 'onclick' attribute. When you click on it, javascript changes the 'display: none' to .... 'display: block'. And, it changes the 'display: block' for the previous image to .... 'display: none'.
( I separated out the 'header' and 'footer' code to hopefully make things more readable.)
You can view the main code for each version below.
SLIDESHOW 1 Code
Download
SLIDESHOW1/index.php ▾
<?php
include ('inc/header.php');
$slideshowimages = array();
$array1 = scandir ('images');
//Create an array of all images in folder
foreach ($array1 as $item1) {
if (substr ($item1, 0, 1) !== '.') {
array_push ($slideshowimages, $item1);
}
}
foreach ($slideshowimages as $id => $image) {
//Wrap each image in a div that is initially set to display none
echo "<div class = 'slideshowimage' style = 'display: none;'>";
//Left arrow on the side of the image
echo "<div class= 'slideshow-nav-left' onclick= 'changeImageBackward(" . $id . ")' >❮</div>";
//Show full size image
echo "<img src = 'images/" . $image . "' alt = '" . $id . "' >";
//Right arrow on the side of the image
echo "<div class= 'slideshow-nav-right' onclick= 'changeImageForward(" . $id . ")' >❯</div><br>";
echo "</div>";
}
?>
<script>
var imagearray = document.getElementsByClassName("slideshowimage");
var id = 0; //index of current image
var previd = imagearray.length - 1; //index of previous image
//Show initial conditions
imagearray[id].style.display = 'block';
function changeImageBackward (id) {
//At beginning of the array, start at end
if (id === 0) {
id = imagearray.length -1;
previd = 0;
}
else {
previd = id ;
id = id - 1;
}
//Show current image, hide previous image
imagearray[id].style.display = 'block';
imagearray[previd].style.display = 'none';
}
function changeImageForward (id) {
//At end of image array, return to beginning
if (id >= imagearray.length - 1) {
id = 0;
previd = imagearray.length - 1;
}
else {
previd = id ;
id++;
}
//Show current image, hide previous image
imagearray[id].style.display = 'block';
imagearray[previd].style.display = 'none';
}
</script>
relax1.jpg ▾
relax2.jpg ▾
relax5.jpg ▾
relax6.jpg ▾
relax9.jpg ▾
SLIDESHOW1/inc
footer.php ▾
<footer>
<br><br><br>Copyright © <?php echo date('Y'); ?> Cats and Code
</footer>
</div>
</body>
</html>
header.php ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>'Slideshow Demo 1'</title>
<link rel= 'stylesheet' type='text/css' href= 'inc/style.css'>
</head>
<body>
<div class = 'outerwrap '>
<a class = 'return' href = '../../slideshow'>← Return</a><br><br>
<div class = 'headerwrap'>
<h2>Slideshow Demonstration for Full Screen Width</h2>
</div>
style.css ▾
body {
margin: 0 auto;
font-family: "Arial", sans-serif;
box-sizing: border-box;
}
h1, h2 {
text-align: center;
color: #186c99;
}
a {
color:#652c77;
text-decoration: none;
}
a:hover {
color: darkmagenta;
}
.outerwrap {
text-align: center;
}
.slideshowimage {
box-sizing: border-box;
display: inline-block;
text-align: center;
margin: 0 auto;
max-width: 100%;
}
.slideshowimage img {
width: 600px;
max-width: 100%;
}
.slideshow-nav-left, .slideshow-nav-right {
box-sizing: border-box;
display: inline-block;
font-size: 24px;
color: black;
padding: 15px 0;
margin: 0;
cursor: pointer;
vertical-align:top;
width: 30px;
margin-top: 200px;
}
SLIDESHOW 2 Code
Download
SLIDESHOW2/index.php ▾
<?php
include ('inc/header.php');
$array1 = scandir ('images');
$slideshowimages = array();
//Create an array of all images in folder
foreach ($array1 as $item1) {
if (substr ($item1, 0, 1) !== '.') {
array_push ($slideshowimages, $item1);
}
}
foreach ($slideshowimages as $id => $image) {
//Wrap each image in a div that is initially set to display none
echo "<div class = 'slideshowimage' style = 'display: none;'>";
//Smaller screens - arrows at top
echo "<div class= 'slideshow-nav-left2' onclick= 'changeImageBackward(" . $id . ")' >❮</div>";
echo "<div class= 'slideshow-nav-right2' onclick= 'changeImageForward(" . $id . ")' >❯</div><br>";
//Larger screens - left arrow on the side of the image
echo "<div class= 'slideshow-nav-left1' onclick= 'changeImageBackward(" . $id . ")' >❮</div>";
//Show full size image
echo "<img src = 'images/" . $image . "' alt = '" . $id . "' >";
//Larger screens - right arrow on the side of the image
echo "<div class= 'slideshow-nav-right1' onclick= 'changeImageForward(" . $id . ")' >❯</div><br>";
echo "</div>";
}
?>
<script>
var imagearray = document.getElementsByClassName("slideshowimage");
var id = 0; //index of current image
var previd = imagearray.length - 1; //index of previous image
//Show initial conditions
imagearray[id].style.display = 'block';
function changeImageBackward (id) {
//At end of image array, return to beginning
if (id === 0) {
id = imagearray.length -1;
previd = 0;
}
else {
previd = id ;
id = id - 1;
}
//Show current image, hide previous image
imagearray[id].style.display = 'block';
imagearray[previd].style.display = 'none';
}
function changeImageForward (id) {
//At end of image array, return to beginning
if (id >= imagearray.length - 1) {
id = 0;
previd = imagearray.length - 1;
}
else {
previd = id ;
id++;
}
//Show current image, hide previous image
imagearray[id].style.display = 'block';
imagearray[previd].style.display = 'none';
}
</script> relax1.jpg ▾
relax2.jpg ▾
relax5.jpg ▾
relax6.jpg ▾
relax9.jpg ▾
SLIDESHOW2/inc
footer.php ▾
<footer>
<br><br><br>Copyright © <?php echo date('Y'); ?> Cats and Code
</footer>
</div>
</html>
header.php ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>'Slideshow Demo 2'</title>
<link rel= 'stylesheet' type='text/css' href= 'inc/style.css'>
</head>
<body>
<div class = 'outerwrap '>
<a class = 'return' href = '../../slideshow'>← Return</a><br><br>
<div class = 'headerwrap'>
<h2>Slideshow Demonstration for Varying Screen Widths</h2>
</div>
style.css ▾
body {
margin: 0 auto;
font-family: "Arial", sans-serif;
box-sizing: border-box;
}
h1, h2 {
text-align: center;
color: #186c99;
}
a {
color:#652c77;
text-decoration: none;
}
a:hover {
color: darkmagenta;
}
.outerwrap {
text-align: center;
}
.slideshowimage {
box-sizing: border-box;
display: inline-block;
text-align: center;
margin: 0 auto;
max-width: 100%;
}
.slideshowimage img {
width: 600px;
max-width: 100%;
}
.slideshow-nav-left1, .slideshow-nav-right1, .slideshow-nav-left2, .slideshow-nav-right2 {
box-sizing: border-box;
display: inline-block;
font-size: 24px;
color: black;
padding: 15px 0;
margin: 0;
cursor: pointer;
vertical-align:top;
width: 30px;
}
.slideshow-nav-left2, .slideshow-nav-right2 {
display: none;
}
.slideshow-nav-left1, .slideshow-nav-right1 {
margin-top: 200px;
}
@media only screen and (max-width: 700px) {
.slideshowimage {
width: 80%;
max-width: 80%;
}
.slideshow-nav-left1, .slideshow-nav-right1 {
display: none;
}
.slideshow-nav-left2, .slideshow-nav-right2 {
display: inline-block;
margin: 0;
}
}SLIDESHOW 3 Code
Download
SLIDESHOW3/index.php ▾
<?php
include ('inc/header.php');
$array1 = scandir ('images');
$slideshowimages = array();
//Create an array of all images in folder
foreach ($array1 as $item1) {
if (substr ($item1, 0, 1) !== '.') {
array_push ($slideshowimages, $item1);
}
}
foreach ($slideshowimages as $id => $image) {
//Wrap each image in a div that is initially set to display none
echo "<div class = 'slideshowimage' style = 'display: none;'>";
//Smaller screens - arrows at top
echo "<div class= 'slideshow-nav-left2' onclick= 'changeImageBackward(" . $id . ")' >❮</div>";
echo "<div class= 'slideshow-nav-right2' onclick= 'changeImageForward(" . $id . ")' >❯</div><br>";
//Larger screens - left arrow on the side of the image
echo "<div class= 'slideshow-nav-left1' onclick= 'changeImageBackward(" . $id . ")' >❮</div>";
//Show full size image
echo "<img src = 'images/" . $image . "' alt = '" . $id . "' >";
//Larger screens - right arrow on the side of the image
echo "<div class= 'slideshow-nav-right1' onclick= 'changeImageForward(" . $id . ")' >❯</div><br>";
echo "</div>";
}
echo "<br><br>";
//Show all thumbnails
foreach ($slideshowimages as $id => $image) {
//Wrap each thumbnail in a div that initially sets the border to none;
echo "<div class = 'slideshowthumb' style = 'border: 3px solid grey;' onclick= 'changeThumb(" . $id . ")'>";
echo "<img src = 'images/" . $image . "' alt = '" . $id . "' >";
echo "</div>" ;
}
?>
<script>
var imagearray = document.getElementsByClassName("slideshowimage");
var thumbarray = document.getElementsByClassName("slideshowthumb");
var id = 0; //index of current image
var previd = imagearray.length - 1; //index of previous image
//Show initial conditions
imagearray[id].style.display = 'block';
thumbarray[id].style.border = '3px solid blue';
function changeImageBackward (id) {
//At end of image array, return to beginning
if (id === 0) {
id = imagearray.length -1;
previd = 0;
}
else {
previd = id ;
id = id - 1;
}
//Show current image, hide previous image
imagearray[id].style.display = 'block';
imagearray[previd].style.display = 'none';
//Show current thumbnail, hide previous thumbnail
thumbarray[id].style.border = '3px solid blue';
thumbarray[previd].style.border = '3px solid grey';
}
function changeImageForward (id) {
//At end of image array, return to beginning
if (id >= imagearray.length - 1) {
id = 0;
previd = imagearray.length - 1;
}
else {
previd = id ;
id++;
}
//Show current image, hide previous image
imagearray[id].style.display = 'block';
imagearray[previd].style.display = 'none';
//Show current thumbnail, hide previous thumbnail
thumbarray[id].style.border = '3px solid blue';
thumbarray[previd].style.border = '3px solid grey';
}
function changeThumb(id) {
//Set all images to display: none and remove border from thumbnails
for (i = 0; i < imagearray.length ; i++) {
thumbarray[i].style.border = '3px solid grey';
imagearray[i].style.display = 'none';
}
imagearray[id].style.display = 'block';
thumbarray[id].style.border = '3px solid blue';
}
</script>
<?php
include ("inc/footer.php");
?> relax1.jpg ▾
relax2.jpg ▾
relax5.jpg ▾
relax6.jpg ▾
relax9.jpg ▾
SLIDESHOW3/inc
footer.php ▾
<footer>
<br><br><br>Copyright © <?php echo date('Y'); ?> Cats and Code
</footer>
</div>
</body>
</html>
header.php ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>'Slideshow Demo 3'</title>
<link rel= 'stylesheet' type='text/css' href= 'inc/style.css'>
</head>
<body>
<div class = 'outerwrap '>
<a class = 'return' href = '../../slideshow'>← Return</a><br><br>
<div class = 'headerwrap'>
<h2>Slideshow Demonstration for Varying Screen Sizes, With Thumbnails</h2>
</div>
style.css ▾
body {
margin: 0 auto;
font-family: "Arial", sans-serif;
box-sizing: border-box;
}
h1, h2 {
text-align: center;
color: #186c99;
}
a {
color:#652c77;
text-decoration: none;
}
a:hover {
color: darkmagenta;
}
.outerwrap {
text-align: center;
}
.slideshowimage {
box-sizing: border-box;
text-align: center;
margin: 0 auto;
max-width: 100%;
display: block;
}
.slideshowimage img {
width: 600px;
max-width: 100%;
}
.slideshowthumb {
display: inline-block;
box-sizing: border-box;
margin: 0 5px;
line-height: 70%;
border: 3px solid gray;
}
.slideshowthumb img {
box-sizing: border-box;
width: 90px;
max-width: 100%;
}
.slideshow-nav-left1, .slideshow-nav-right1, .slideshow-nav-left2, .slideshow-nav-right2 {
box-sizing: border-box;
display: inline-block;
font-size: 24px;
color: black;
padding: 15px 0;
margin: 0;
cursor: pointer;
vertical-align:top;
width: 30px;
}
.slideshow-nav-left2, .slideshow-nav-right2 {
display: none;
}
.slideshow-nav-left1, .slideshow-nav-right1 {
margin-top: 200px;
}
@media only screen and (max-width: 700px) {
.slideshowimage {
width: 80%;
max-width: 80%;
}
.slideshow-nav-left1, .slideshow-nav-right1 {
display: none;
}
.slideshow-nav-left2, .slideshow-nav-right2 {
display: inline-block;
margin: 0;
}
}SLIDESHOW 4 Code
Download
SLIDESHOW4/index.php ▾
<?php
include ('inc/header.php');
$array1 = scandir ('images');
$slideshowimages = array();
//Create an array of all images in folder
foreach ($array1 as $item1) {
if (substr ($item1, 0, 1) !== '.') {
array_push ($slideshowimages, $item1);
}
}
foreach ($slideshowimages as $id => $image) {
//Wrap each image in a div that is initially set to display none
echo "<div class = 'slideshowimage' style = 'display: none;' onclick= 'startStopCarousel(" . $id . ")'>";
//Show full size image
echo "<img src = 'images/" . $image . "' alt = '" . $id . "' >";
echo "</div>";
}
echo "<br><br>";
//Show all thumbnails
foreach ($slideshowimages as $id2 => $image) {
//Wrap each thumbnail in a div that initially sets the border to none;
echo "<div class = 'slideshowthumb' style = 'border: 3px solid grey;' onclick= 'startStopCarouselThumb(" . $id2 . ")'>";
echo "<img src = 'images/" . $image . "' alt = '" . $id2 . "' >";
echo "</div>" ;
}
?>
<h3>Pictures change every 2000 ms</h3>
<b><i>Stop: </i> Click on the main picture, or one of the thumbnails to stop the slideshow</b><br><br>
<b><i>Start:</i> Click again on the main picture to start where you left off, or click any of the thumbnails to start at that point in the carousel</b>
<script>
var flag = 'go';
var imagearray = document.getElementsByClassName("slideshowimage");
var thumbarray = document.getElementsByClassName("slideshowthumb");
var id = 0; //index of current image
var previd = imagearray.length - 1; //index of previous image
//Initial conditions - show first image in array
imagearray[id].style.display = 'block';
thumbarray[previd].style.border = '3px solid grey';
carousel();
function carousel() {
//Slideshow to display images forward automatically
if (flag === 'go') {
if (id >= imagearray.length ) {
id = 0;
previd = imagearray.length - 1;
}
//Show current image, hide previous image
for (i = 0; i < imagearray.length ; i++) {
imagearray[i].style.display = 'none';
thumbarray[i].style.border = '3px solid gray';
}
imagearray[id].style.display = 'block';
thumbarray[id].style.border = '3px solid blue';
previd = id ;
id++;
//Call this function again after a length of time - goes on forever!!
setTimeout(carousel, 2000); // Change image every 2 seconds
}
else {
//flag = 'stop'
//Initial conditions - show selected image in array
for (i = 0; i < imagearray.length ; i++) {
imagearray[i].style.display = 'none';
thumbarray[i].style.border = '3px solid gray';
}
imagearray[previd].style.display = 'block';
thumbarray[previd].style.border = '3px solid blue';
}
}
function startStopCarousel(id){
if (flag === 'go') {
clearTimeout(carousel);
flag = 'stop';
}
else {
flag = 'go';
carousel();
}
}
function startStopCarouselThumb(id2){
if (flag === 'go') {
clearTimeout(carousel);
flag = 'stop';
previd = id2;
}
else {
flag = 'go';
id = id2;
carousel();
}
}
</script>
<?php
include ("inc/footer.php");
?> relax1.jpg ▾
relax2.jpg ▾
relax5.jpg ▾
relax6.jpg ▾
relax9.jpg ▾
SLIDESHOW4/inc
footer.php ▾
<footer>
<br><br><br>Copyright © <?php echo date('Y'); ?> Cats and Code
</footer>
</div>
</body>
</html>
header.php ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>'Slideshow Demo 43'</title>
<link rel= 'stylesheet' type='text/css' href= 'inc/style.css'>
</head>
<body>
<div class = 'outerwrap '>
<a class = 'return' href = '../../slideshow'>← Return</a><br><br>
<div class = 'headerwrap'>
<h2>Automatic Slideshow Demonstration</h2>
</div>
style.css ▾
body {
margin: 0 auto;
font-family: "Arial", sans-serif;
box-sizing: border-box;
}
h1, h2 {
text-align: center;
color: #186c99;
}
a {
color:#652c77;
text-decoration: none;
}
a:hover {
color: darkmagenta;
}
.outerwrap {
text-align: center;
}
.slideshowimage {
box-sizing: border-box;
display: inline-block;
text-align: center;
margin: 0 auto;
max-width: 100%;
cursor: pointer;
}
.slideshowimage img {
width: 600px;
max-width: 100%;
}
.slideshowthumb {
display: inline-block;
box-sizing: border-box;
margin: 0 5px;
line-height: 70%;
cursor: pointer;
}
.slideshowthumb img {
box-sizing: border-box;
width: 90px;
max-width: 100%;
}
.slideshow-nav-left1, .slideshow-nav-right1, .slideshow-nav-left2, .slideshow-nav-right2 {
box-sizing: border-box;
display: inline-block;
font-size: 24px;
color: black;
padding: 15px 0;
margin: 0;
cursor: pointer;
vertical-align:top;
width: 30px;
}
.slideshow-nav-left2, .slideshow-nav-right2 {
display: none;
}
.slideshow-nav-left1, .slideshow-nav-right1 {
margin-top: 200px;
}
@media only screen and (max-width: 700px) {
.slideshowimage {
width: 80%;
max-width: 80%;
}
.slideshow-nav-left1, .slideshow-nav-right1 {
display: none;
}
.slideshow-nav-left2, .slideshow-nav-right2 {
display: inline-block;
margin: 0;
}
}