-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·128 lines (84 loc) · 3.32 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adopt A Dog</title>
<meta name="description" content="Adopt a Dog">
<meta name="author" content="Cassandra Marshall">
<meta name="description" content="Asana Dog Adoption Agency. Available dogs are posted here.">
<meta name="keywords" content="dog adoption, dogs, adoption, puppies, puppy adoption, puppy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/styles/site.css">
<script src="assets/js/scripts.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div id="page">
<div class="header" w3-include-html="assets/snippets/header.html"></div>
<main>
<div class="container">
<div class="grid" id="dogList">
</div>
<div id="dogEnlarge">
</div>
</div>
</main>
<div class="footer" w3-include-html="assets/snippets/footer.html"></div>
</div> <! end page -->
<script>
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
//keep console in to double check the window dimensions
console.log( 'width ' + w);
$(document).ready(function () {
//grabs images for the thumbnails
var jsonURL = "http://localhost:8888/assets/data/dogs.json";
$.getJSON( jsonURL, function( json ) {
var imgList = "";
var i = 1;
var imageThumb;
$.each(json.dogs, function () {
//change the image size depending on the viewport
//small-90 can be substituted to compare resolution and performance in scalability
if (w > 800) {
imageThumb = this.medium;
} else {
imageThumb = this.small;
}
imgList += '<div class="thumb" id="'+ i +'" style="background-image:url('+ imageThumb +');" onClick="enlarge(this)" alt="thumbnail dog '+ name +'"><a href="#" class="thumbLink">'+ this.name +'</a></div>';
i++;
});
//for future scalability I would add lazy load to this
$('#dogList').append(imgList);
});
});
function enlarge(thumb_id) {
//grabs images for the full size modal
//for performance, a json call is made for each enlarged image, this is faster and scales better
//instead of showing and hiding, the images are added to the page and then removed.
var id = $(thumb_id).attr("id");
var enlargeImg = "";
var largeImage;
var jsonURL = "http://localhost:8888/assets/data/dogs.json";
$.getJSON( jsonURL, function( json ) {
var largeID = id - 1;
var name = json.dogs[ largeID ].name;
var gender = json.dogs[ largeID ].gender;
var age = json.dogs[ largeID ].age;
var breed = json.dogs[ largeID ].breed;
//grab a different image depending on the viewport
if (w > 800) {
largeImage = json.dogs[ largeID ].large;
} else {
largeImage = json.dogs[ largeID ].medium;
}
enlargeImg += '<div class="large" id="enlarge'+ id +'" onClick="removeImage(this)"><a id="'+ id +'" href="#" class="nameLarge"><ul><li class="name">'+ name +'</li><li> '+ gender +'</li><li> '+ age +'</li><li> '+ breed +'</li></ul></a><img alt="large dog '+ name +'" src="'+ largeImage +'" /></div>';
$('#dogEnlarge').append(enlargeImg);
});
}
includeHTML();
</script>
</body>
</html>