-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
75 lines (66 loc) · 2.82 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>Javascript Slideshow</title>
<link rel="stylesheet" type="text/css" href="java.css">
<!-- Create a list of images to appear in slideshow.
Add as many images as you like. Simply add their file
names to this list.
* Each file should be placed in :"images/.."
* Includ a comma after each image.
* If no caption then leave quotes empty "" -->
<script type="text/javascript">
var slides = [
{fileName: "one.jpg", caption: "1) The annual group photo"},
{fileName: "two.jpg", caption: "2) Drupal Camp party in Mpls"},
{fileName: "three.jpg", caption: "3) I see Ben and Brad!"},
{fileName: "four.jpg", caption: ""},
{fileName: "five.jpg", caption: "5) Looks like Ivan is hungry"},
{fileName: "six.jpg", caption: ""},
{fileName: "seven.jpg", caption: "7) Someone is showing off"},
{fileName: "eight.jpg", caption: "8) Barry the pizza man"},
{fileName: "nine.jpg", caption: "9) Closing Session of camp in 2015"}
];
</script>
</head>
<body>
<p class="center"><a href="../index.html">More projects</a></p>
<p class="center"><a href="http://www.stpaultim.com">My Website: www.StPaulTim.com</a></p>
<div class="wrapper">
<img class="arrow-prev" src="images/arrow-prev.png">
<div id="frame">
<!-- Creating three div's into which we
can insert the images with Javascript -->
<div id="slides">
<div id="left-slide" class="image left"></div>
<div id="active-slide" class="image active"></div>
<div id="right-slide" class="image right"></div>
</div>
</div>
<img class="arrow-next" src="images/arrow-next.png">
<p class="clear"></p>
<div class="auto-forward">Auto Play Slides</div>
<div class="stop-forward">Manual Navigation</div>
</div>
<div id="about-text">
<p>NOTE: When image does not have a caption, the caption box is not supposed to show up. Images #4 and #6 do not have captions.</p>
<p>This is a Javascript learning exercise. I wrote this from
scratch with pure vanilla Javascript. To see my code and
offer feedback/advice.
<a href="https://github.com/stpaultim/simple-javascript-slideshow">GitHub</a>
</p>
<p>I'm still working on this with a number of additional
features planned (as of Jan 2, 2017). Project inspired by the request of a friend.
</p>
<p class="left-align">Rough list of planned features:
</p>
<ul>
<li>DONE - Slideshow roughly 600px x 300px.</li>
<li>Parially Done - Automatic advancement & Manual Controls</li>
<li>DONE - Caption slides up from bottom (only if there is a caption)</li>
</ul>
</div>
<script type="text/javascript" src="java.js"></script>
</body>
</html>