forked from khouriousgeorge/portfolioSite
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathworks.html
149 lines (123 loc) · 4.53 KB
/
works.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
</head>
<link rel="stylesheet" href="works.css">
<ul>
<li><a href="index.html">Home</a></li>
<li style="float:right"><a class="active" href="about.html">About</a></li>
</ul>
<body>
<br>
<img id="myImg" src="landingPage.png" alt="What was originally just a great picture taken by a friend in times long past, has been edited down to the backdrop for the homepage you liked so much. Edited with Adobe Photoshop." width="40%" height="40%">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
<body>
<br><br>
<img id="myImg1" src="elmo.gif" alt="This is, as you can see, an animated version of the famous elmo on fire picture. Made in Adobe Photoshop, by yours truly." width="30%" height="30%">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg1');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<img id="myImg2" src="kermit.gif" alt="Who doesn't love Kermit the Frog? I took the honor upon myself to create stuttery, jerky, life from what was a still picture. Made with Final Cut Pro." width="35%" height="35%">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg2');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
<body>
<br><br>
<img id="myImg3" src="bert.gif" alt="A monster-sized Bert, undoubtedly waving to his best friend, Ernie. I don't know why everything is muppets. It's just how it happened. Made with Adobe Photoshop." width="30%" height="30%">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg3');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>