-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
101 lines (87 loc) · 3.92 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
<!doctype html>
<html lang="en">
<head>
<title>jQuery Honeycombs</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="homeycombs/css/homeycombs.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/modaal@0.3.1/dist/css/modaal.min.css" />
</head>
<body>
<h1 style="text-align: center;">jQuery Honeycombs/ Hexagon Demo</h1>
<p style="text-align: center;">
jQuery Honeycombs/ Hexagon Demo with Modaal plugin.
</p>
<div class="honeycombs">
<div class="comb">
<img src="https://farm8.staticflickr.com/7019/13227089653_c45b679b9e_z.jpg" />
<a href="#inline1" class="inline" style="display:none;">Show1</a>
<span>
<br> jQuery Honeycombs
</span>
</div>
<div class="comb">
<img src="https://farm5.staticflickr.com/4506/37211295550_b2c0c80f9f_z.jpg" />
<a href="#inline" class="inline" style="display:none;">Show1</a>
<span>
<b>Image</b>
<br>Caption</span>
</div>
<div class="comb">
<img src="https://farm5.staticflickr.com/4432/36910614456_3ced287e8b_z.jpg" />
<a href="https://github.com/nasirkhan/honeycombs" class="" style="display:none;">Show1</a>
<span>
<b>Project at</b>
<br> Github</span>
</div>
<div class="comb">
<img src="https://farm3.staticflickr.com/2867/33288481373_9f06908a9c_z.jpg" /> </div>
<span></span>
<div class="comb">
<img src="https://farm6.staticflickr.com/5737/31044656732_c031f1294c_z.jpg" /> </div>
<div class="comb">
<img src="https://farm6.staticflickr.com/5727/30785062315_cb44d0c372_z.jpg" /> </div>
<div class="comb">
<img src="https://farm8.staticflickr.com/7091/27557985951_7abf426c1e_z.jpg" /> </div>
<div class="comb">
<img src="https://farm6.staticflickr.com/5660/29969452322_6dbbac4d9b_z.jpg" /> </div>
<div class="comb">
<img src="https://farm9.staticflickr.com/8262/29943887042_e261fac631_z.jpg" /> </div>
<div class="comb">
<img src="https://farm6.staticflickr.com/5319/14411023883_11731c318b_z.jpg" /> </div>
<div class="comb">
<img src="https://farm8.staticflickr.com/7236/27138241992_db32c590f5_z.jpg" /> </div>
<div class="comb">
<img src="https://farm8.staticflickr.com/7409/27202102572_bc9e298904_z.jpg" />
</div>
<div class="comb">
<img src="https://farm7.staticflickr.com/6151/6229592755_8b7e7ed7a9_z.jpg" />
</div>
<div class="comb">
<img src="https://farm8.staticflickr.com/7134/7556624868_36eaf9e10f_z.jpg" />
</div>
</div>
<!-- <a href="#inline" data-modaal-type="inline" data-modaal-animation="fade" class="modaal">Show</a> -->
<div id="inline" style="display:none;">
<h2 style="text-align: center;">
#0</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<div id="inline1" style="display:none;">
<h2 style="text-align: center;">#1</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/modaal@0.3.1/dist/js/modaal.min.js"></script>
<script src="homeycombs/js/jquery.homeycombs.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.honeycombs').honeycombs();
$(".inline").modaal();
});
</script>
</body>
</html>