-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpictures.html
108 lines (84 loc) · 4.13 KB
/
pictures.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<!—
========================================================
Group Members: Mary Thomas, Andrew Szajlai, Daniel Yaw
Group Assignment
========================================================
-->
<html>
<head>
<!-- tab title -->
<title>Favorite Pictures</title>
<!-- Link to external common style sheet across all html files -->
<link rel="stylesheet" href="css.css">
</head>
<body>
<script>
/* Decalre picture gallery to drive slide show */
var galleryArray = new Array();
/* Declare pointer to current image in the array */
var currentImage = 0;
/* Function to rotate images seleceted by the user */
function rotateImages(){
/* Update the slideshow element to the next image selected by the user */
document.getElementById("slideshow").setAttribute("src", "pictures/"+galleryArray[currentImage].name);
/* Set the pointer the next value on next call to change the current image */
currentImage = ( currentImage<galleryArray.length - 1) ? currentImage + 1 : 0
}
/* for loop of all possible values, compare passed to each valid set return to true if one matches */
function displayPictures(picCount) {
/* Create the table to display the pictures */
document.getElementById("pictures").innerHTML = "<table>";
document.getElementById("pictures").innerHTML += "<tr>";
for (i = 1; i <= picCount; i++) {
document.getElementById("pictures").innerHTML += "<td class=pic-table ><img class=pic-img src=pictures/" + i + ".jpg alt=Picture " + i + "></td>";
if (i % 3 == 0) {
document.getElementById("pictures").innerHTML += "</tr>";
document.getElementById("pictures").innerHTML += "<tr>";
}
}
/* Create the end tag for the table displaying the pictures */
document.getElementById("pictures").innerHTML += "</tr>";
document.getElementById("pictures").innerHTML += "</table>";
}
/* Load the set of images the user wants to play as a slide show */
var loadPictures=function(){
// Ask the user for a set of picture to display in the slide show
var fileInput = document.querySelector("#picureFiles");
// Load files selected by the user into the gallery array
galleryArray = fileInput.files;
// Add the layer that will be updated with the pictures selected by the user
document.getElementById("div-slideshow").innerHTML = "<img id=slideshow class=pic-img src=/>"
}
</script>
<h1> Favorite Picture Slide Show </h1>
<nav>
<a href = "index.html">Home</a> **
<a href = "background.html">Background</a> **
<a href = "pictures.html">Pictures</a> **
<a href = "websites.html">Favorite Websites</a> **
<a href = "interests.html">Interests</a> **
<a href = "whatshtml.html">What's HTML?</a>
</nav>
<div>
<!-- Display the instuctions to the user -->
<p>Please click on the "Choose Files" below to select the images for your slide show.</p>
<p>Note: the images are located in the pictures folder where you started this project; this is a limitation of JavaScript.</p>
<!-- define button to ask user to select images for slide show -->
<input id="picureFiles" multiple type="file" accept=".jpg, .pnp, jpeg">
<p></p>
</div>
<!-- Create an empty element to fill with the slide show pictures built by an above function -->
<div id="div-slideshow" casss="pic-img">
</div>
<script>
/* Create the link from the picture slide show element to the function to populate the images */
document.querySelector("#picureFiles").onchange = loadPictures;
/* Link the rotation of images to the onload function of the page */
window.onload=function() {
/* Set the image rotation function to execute every 2500 milliseconds */
setInterval("rotateImages()", 2500);
}
</script>
</body>
</html>