-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathhorse.html
88 lines (83 loc) · 3.27 KB
/
horse.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
<!doctype html>
<html>
<head>
<title>NonCarousel NonCarousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/unicorns.css">
</head>
<body>
<p></p>
<form action='https://www.flickr.com/photos/'>
<fieldset class="mgr" id="myNonCarousel">
<legend>Select a NonCarousel from the mgr:</legend>
<div>
<a class="backward" data-move="backward" data-mgr="mgr-unicorns" hidden aria-hidden="true"></a>
<ul class="mgr-labels left0">
<li style="background-image: url(horses/horse1.jpg);">
<label for="unicorn1"><p>Carousel photo by Ian Clark</p>
</label>
</li>
<li style="background-image: url(horses/horse2.jpg);">
<label for="unicorn2"><p>Carousel photo by Poppy</p>
</label>
</li>
<li style="background-image: url(horses/horse3.jpg);">
<label for="unicorn3"><p>Carousel photo by Lebatihem</p>
</label>
</li>
<li style="background-image: url(horses/horse4.jpg);">
<label for="unicorn4"><p>Carousel photo by Jenny Huey</p>
</label>
</li>
<li style="background-image: url(horses/horse5.jpg);">
<label for="unicorn5"><p>Carousel photo by Andrea Kirkby</p>
</label>
</li>
</ul>
<a class="forward" data-move="forward" data-mgr="mgr-unicorns" hidden aria-hidden="true"></a>
</div>
<ul id="unicornradios" class="mgr-radios">
<li>
<input type="radio" name="mgr-unicorns" data-value="0" value="mrshoes/7260311450" id="unicorn1" checked><span></span>
</li>
<li>
<input type="radio" name="mgr-unicorns" value="hddod/128789866" data-value="1" id="unicorn2"><span></span>
</li>
<li>
<input type="radio" name="mgr-unicorns" value="lebatihem/15542975284" data-value="2" id="unicorn3"><span></span>
</li>
<li>
<input type="radio" name="mgr-unicorns" value="jensview/9061358498" data-value="3" id="unicorn4"><span></span>
</li>
<li>
<input type="radio" name="mgr-unicorns" value="andreakirkby/5733510802" data-value="4" id="unicorn5"><span></span>
</li>
</ul>
</fieldset>
<input type="submit" value="See it on Flickr">
</form>
<script src="js/merry-go-round.js"></script>
<script>
window.onload = function () {
mgr.init('myNonCarousel');
addEvents();
};
// This is specific for this mgr example.
function addEvents(){
var radios = document.querySelectorAll('input[type=radio], [data-move]'),
i = 0,
l = radios.length;
for(i = 0; i < l; i++) {
radios[i].addEventListener('click', function (e) {
changAction();
});
}
}
function changAction () {
var url = 'https://www.flickr.com/photos/' + document.querySelector('input[type=radio]:checked').value;
document.querySelector('form').setAttribute('action', url);
}
</script>
</body>
</html>