Slideshow
← Return
Slideshow with 4 versions
DEMO 1Simplest - assumes you are working with a full-size screen, so the arrows are on the sides.
DEMO 2Works 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.
DEMO 3 Includes thumbnails of all the images at the bottom. You can click on a thumbnail and the corresponding full image will appear.
DEMO 4 Images change automatically every 2000 ms, as a carousel. Click here for demo 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>
SLIDESHOW2/images ▾
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>SLIDESHOW2/images ▾
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");
?>SLIDESHOW3/images ▾
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");
?>SLIDESHOW4/images ▾
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;
}
}