-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
196 lines (166 loc) · 7.04 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#00ab6c">
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Varela+Round|Work+Sans" rel="stylesheet">
<link href="style/reset.css" rel="stylesheet">
<link href="style/style.css" rel="stylesheet">
<title>Medium Zoom | Demo</title>
</head>
<body>
<header class="header">
<h1 class="header__title">Medium Zoom</h1>
<div class="header__subtitle">Medium zoom on your images in vanilla JavaScript</div>
<div class="header__info">
<a href="https://github.com/francoischalifour/medium-zoom" class="button">View on GitHub</a>
<a href="https://francoischalifour.com/lab/medium-image-zoom" class="button">Read the article</a>
</div>
</header>
<article class="container">
<figure>
<medium-zoom
src="images/image-1.jpg"
alt="Zoom with default options"
></medium-zoom>
<figcaption>Zoom with default options</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tempora praesentium cupiditate fugit voluptas, rem eligendi, voluptatem molestias pariatur atque amet,
dicta, similique beatae optio quos! Hic necessitatibus dicta magni, tempore.
Atque illo voluptatibus fugiat id pariatur cum quasi vel ut repellendus iure quaerat,
doloremque sit voluptatum odio maiores provident consequuntur accusantium saepe.
</p>
<figure>
<medium-zoom
src="images/image-2.jpg"
alt="Zoom with margin"
margin="48"
></medium-zoom>
<figcaption>Zoom with margin</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ea dolores quaerat, quis modi nostrum sequi adipisci ratione esse
blanditiis error beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
</p>
<figure>
<medium-zoom
src="images/image-3.jpg"
alt="Zoom with background color"
background="#212530"
></medium-zoom>
<figcaption>Zoom with background color</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos magnam illo,
quam iusto, autem ratione commodi deleniti vero magni fuga consectetur expedita,
voluptatum enim quidem? Rem, minima laboriosam hic! Id.
</p>
<figure class="pull-right">
<medium-zoom
src="images/image-4.jpg"
alt="Zoom with scroll offset"
background="rgba(25, 18, 25, .9)"
scroll-offset="0"
></medium-zoom>
<figcaption>Zoom without scroll offset</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cum nulla
eligendi recusandae at quae odio, harum nesciunt ut temporibus vitae, laudantium minus.
Iste officia aliquid, laborum ratione maxime beatae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores totam fugiat
repellendus laboriosam accusantium, possimus similique quos repellat molestias excepturi
ad perspiciatis beatae! Qui repellat numquam incidunt, accusamus autem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut
temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae.
</p>
<figure class="pull-left">
<medium-zoom
src="images/image-5.jpg"
alt="Zoom without meta click"
disable-metaclick
></medium-zoom>
<figcaption>Zoom without meta click</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut
temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Corporis veritatis cupiditate iure velit laboriosam eius nesciunt officiis
odit cumque deleniti assumenda esse exercitationem ducimus, accusantium eligendi itaque dolorem molestias saepe!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut
temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae.
</p>
<figure>
<medium-zoom
id="zoom-trigger"
src="images/image-6.jpg"
alt="Zoom to trigger"
></medium-zoom>
<figcaption>
<button id="btn-trigger" class="button">Trigger the zoom</button>
</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
</p>
<figure>
<medium-zoom
id="zoom-detach"
src="images/image-7.jpg"
alt="Zoom detached after being zoomed once"
></medium-zoom>
<figcaption>Zoom detached after being zoomed once</figcaption>
</figure>
</article>
<footer class="footer">
<div class="footer__links">
<a href="https://github.com/francoischalifour/medium-zoom" class="button">View on GitHub</a>
<a href="https://francoischalifour.com/lab/medium-image-zoom" class="button">Read the article</a>
</div>
<div class="footer__copyright">
Made by <a href="https://francoischalifour.com">François Chalifour</a>
</div>
<p><a href="#">Back to top</a></p>
</footer>
<script src="../dist/medium-zoom-element.min.js"></script>
<script>
(function() {
// Trigger dynamic behaviors
const button = document.querySelector('#btn-trigger')
const zoomToTrigger = document.querySelector('#zoom-trigger')
button.addEventListener('click', () => zoomToTrigger.toggle())
const zoomToDetach = document.querySelector('#zoom-detach')
zoomToDetach.addEventListeners('hidden', () => zoomToDetach.detach())
})()
</script>
</body>
</html>