forked from terrymun/Fluidbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
520 lines (482 loc) · 34 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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
<!doctype html>
<html lang="en">
<head>
<title>Fluidbox, a jQuery plugin for beautiful lightboxes</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.min.css" media="all" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700|PT+Serif:400italic" rel="stylesheet" type="text/css">
<link type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" media="all" rel="stylesheet" />
<link type="text/css" href="./css/styles.css" media="all" rel="stylesheet" />
<link type="text/css" href="./css/fluidbox.css" media="all" rel="stylesheet" />
<link rel="author" href="https://plus.google.com/+TerryMun/"></link>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
ga("create", "UA-46830269-1", "terrymun.github.io");
ga("send", "pageview");
</script>
</head>
<body>
<header>
<div>
<h1>Fluidbox</h1>
<span class="byline">Replicating and improving the lightbox module seen on Medium with fluid transitions</span>
</div>
<a href="#content" id="skip" title="Skip to content">
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 400 200" xml:space="preserve">
<g>
<path d="M106.308,29.384c6.332,0,11.664,2.444,15.984,7.344c9.214,11.232,18.286,22.174,27.216,32.832l43.2,51.84
c5.184-6.629,11.806-14.62,19.873-23.976c8.059-9.362,15.834-18.65,23.328-27.864c8.922-10.658,17.994-21.6,27.215-32.832
c4.32-4.9,9.646-7.344,15.984-7.344c4.895,0,9.355,1.58,13.393,4.752c4.32,3.74,6.764,8.424,7.344,14.04
c0.574,5.616-1.014,10.726-4.752,15.336l-86.4,103.68c-4.037,4.894-9.362,7.344-15.984,7.344c-6.628,0-11.954-2.45-15.984-7.344
l-86.4-103.68c-3.747-4.61-5.333-9.72-4.752-15.336c0.574-5.616,3.024-10.3,7.344-14.04
C96.945,30.964,101.407,29.384,106.308,29.384z"/>
</g>
</svg>
</a>
</header>
<main id="content">
<section>
<h2 id="introduction">Introduction</h2>
<p>Opening images seamlessly in a lightbox on your page without interruption. This demo was inspired by how Medium handles embedded images. Made by <a rel="author" href="http://terrymun.com" title="Visit me">Terry</a>. This project was originally initiated as a personal challenge to replicate Medium’s lightbox module, but it soon developed into a full-fledged jQuery plugin.</p>
<p>Current status:<br /><img src="https://travis-ci.org/terrymun/Fluidbox.svg" title="Travis CI build" alt="Travis CI Build" /> <img src="https://img.shields.io/github/release/terrymun/fluidbox.svg" title="Latest stable Github release" alt="Latest stable Github release" /></p>
<p>You can follow the links below to read how I’ve tackled the challenge, view the jQuery plugin on GitHub, or get the latest stable release hosted on CDNJS.</p>
<div class="cards">
<a href="https://medium.com/coding-design/9c7fe9db92c7" title="Read about Fluidbox's conception on Medium" class="card-medium">
<svg class="branding" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 200 200" xml:space="preserve">
<g>
<path d="M0.001,0v200h200V0H0.001z M148.913,72.752h-3.869c-1.437,0-3.095,1.879-3.095,3.206v48.081
c0,1.328,1.658,3.316,3.095,3.316h3.869v11.164h-34.708v-11.164h6.964V76.842h-0.332l-17.133,61.677H90.439L73.528,76.842h-0.332
v50.513h7.295v11.164H51.089v-11.164h3.758c1.548,0,3.206-1.988,3.206-3.316V75.958c0-1.327-1.658-3.206-3.206-3.206h-3.758V61.146
h36.697l12.048,44.877h0.332l12.16-44.877h36.587V72.752z"/>
</g>
</svg>
<span>Read about Fluidbox's conception on Medium</span>
</a>
<a href="https://github.com/terrymun/Fluidbox" title="Check out the jQuery plugin on GitHub" class="card-github">
<svg class="branding" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 850.39 850.39" xml:space="preserve">
<g>
<path fill-rule="evenodd" fill="#191717" d="M424.731,131.743c-166.349,0-301.242,134.865-301.242,301.243
c0,133.097,86.314,246.015,206.008,285.849c15.053,2.786,20.583-6.537,20.583-14.493c0-7.18-0.278-30.915-0.409-56.086
c-83.806,18.225-101.489-35.543-101.489-35.543c-13.704-34.817-33.448-44.077-33.448-44.077
c-27.334-18.697,2.061-18.312,2.061-18.312c30.247,2.124,46.177,31.046,46.177,31.046c26.867,46.051,70.472,32.737,87.664,25.04
c2.704-19.467,10.508-32.762,19.125-40.283c-66.911-7.613-137.251-33.448-137.251-148.875c0-32.888,11.77-59.762,31.042-80.858
c-3.128-7.59-13.441-38.227,2.918-79.723c0,0,25.298-8.091,82.86,30.883c24.031-6.676,49.802-10.023,75.401-10.14
c25.601,0.117,51.391,3.464,75.466,10.14c57.499-38.975,82.758-30.883,82.758-30.883c16.396,41.496,6.084,72.133,2.958,79.723
c19.312,21.096,31.005,47.97,31.005,80.858c0,115.705-70.476,141.179-137.557,148.637c10.806,9.348,20.432,27.681,20.432,55.784
c0,40.308-0.346,72.746-0.346,82.67c0,8.019,5.422,17.412,20.689,14.454c119.628-39.878,205.836-152.757,205.836-285.81
C725.973,266.607,591.101,131.743,424.731,131.743z"/>
<path fill="#191717" d="M237.586,564.26c-0.662,1.5-3.02,1.948-5.164,0.92c-2.188-0.983-3.411-3.024-2.704-4.525
c0.648-1.539,3.006-1.968,5.188-0.939C237.094,560.698,238.341,562.759,237.586,564.26L237.586,564.26z M233.879,561.512"/>
<path fill="#191717" d="M249.79,577.87c-1.438,1.33-4.248,0.712-6.153-1.393c-1.973-2.1-2.338-4.91-0.882-6.261
c1.48-1.329,4.204-0.705,6.177,1.395C250.905,573.735,251.29,576.521,249.79,577.87L249.79,577.87z M246.915,574.787"/>
<path fill="#191717" d="M261.667,595.218c-1.847,1.287-4.867,0.083-6.733-2.596c-1.846-2.68-1.846-5.896,0.044-7.182
c1.866-1.285,4.842-0.126,6.732,2.529C263.552,590.692,263.552,593.908,261.667,595.218L261.667,595.218z M261.667,595.218"/>
<path fill="#191717" d="M277.938,611.981c-1.652,1.821-5.169,1.33-7.741-1.155c-2.636-2.426-3.366-5.874-1.715-7.697
c1.676-1.821,5.213-1.31,7.804,1.155C278.902,606.71,279.696,610.179,277.938,611.981L277.938,611.981z M277.938,611.981"/>
<path fill="#191717" d="M300.386,621.714c-0.731,2.359-4.117,3.43-7.527,2.427c-3.41-1.032-5.636-3.795-4.95-6.177
c0.707-2.378,4.112-3.493,7.546-2.422C298.861,616.57,301.092,619.312,300.386,621.714L300.386,621.714z M300.386,621.714"/>
<path fill="#191717" d="M325.04,623.518c0.083,2.484-2.811,4.545-6.391,4.588c-3.6,0.083-6.518-1.929-6.557-4.374
c0-2.509,2.831-4.545,6.431-4.608C322.103,619.055,325.04,621.053,325.04,623.518L325.04,623.518z M325.04,623.518"/>
<path fill="#191717" d="M347.98,619.614c0.429,2.422-2.061,4.911-5.617,5.573c-3.498,0.644-6.732-0.856-7.181-3.258
c-0.434-2.485,2.1-4.975,5.593-5.618C344.336,615.693,347.527,617.149,347.98,619.614L347.98,619.614z M347.98,619.614"/>
</g>
</svg>
<span>Check out the jQuery plugin on GitHub</span>
</a>
<a href="http://cdnjs.com/libraries/fluidbox" title="Fluidbox is hosted with CDNJS" class="card-cdnjs">
<span class="branding">cdnjs</span>
<span>Fluidbox is hosted with CDNJS</span>
</a>
</div>
</section>
<section>
<h2 id="in-the-wild">In the wild</h2>
<p>Fluidbox is implemented in:</p>
<ul class="task-list">
<li><a href="http://www.gemmabusquets.com/"><strong>Gemma Busquets</strong></a> by <a href="https://twitter.com/imgemmabusquets">@imgemmabusquets</a></li>
<li><a href="http://terrymun.com/"><strong>Terry Mun</strong></a> by <em>myself</em></li>
</ul>
<p>In addition, Fluidbox has been successfully ported over to a <a href="https://wordpress.org/plugins/fluidbox/">WordPress plugin</a>. You can also learn how to <a href="http://sridharkatakam.com/medium-like-fluid-lightbox-wordpress-using-fluidbox/">implement it manually in WordPress</a>, too.</p>
</section>
<section>
<h2 id="usage-notes">Usage notes</h2>
<h3 id="dependencies">Dependencies</h3>
<p>TThe latest version of Fluidbox require only one dependency: <a href="http://jquery.com/">jQuery v1.7 and above</a>. Yes, and that's all! I recommend using the latest stable build of 1.x, although I have not encountered any issues if 2.x is used. I usually use Google APIs, since many other sites are using it and the end-user probalby has a cache of it sitting somewhere on their machine already.</p>
<pre class="language-markup"><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></code></pre>
<p>Otherwise, you can always use the <a href="https://code.jquery.com/">latest stable releases</a> from the official jQuery site.</p>
<h3 id="basic-usage">Basic usage</h3>
<p>In order to activate Fluidbox, simply chain the <code>.fluidbox</code> method to your selector of choice on DOM ready:</p>
<pre class="language-javascript"><code>$(function () {
$('a').fluidbox();
});</code></pre>
<p>The plugin will automatically check if the selector is:</p>
<ul>
<li>An anchor element, <code><a></code></li>
<li>Contains an <code><img /></code> element</li>
</ul>
<p>In the event that the element that satisfies the selector criteria but failed any one of the above criteria, the element will be ignored and the plugin moves on to the next available element. Therefore, it is important that your Fluidbox element(s) follow the following format. The <code>title</code> and <code>alt</code> attributes of the <code><img /></code> element is not used by the plugin, but the <code>alt</code> attribute has to be present for it to be semantically valid.</p>
<pre class="language-markup"><code><a href="...">
<img src="..." alt="" />
</a></code></pre>
<h3 id="configuration">Configuration</h3>
<p>Several options are available for configuration. For a more detailed description, please <a href="https://github.com/terrymun/Fluidbox#configuration">refer to the readme</a>.</p>
<ul>
<li><code>viewportFill</code> (numerical)<br />Dictates how much the longest axis of the image should fill the viewport. The default value is <code>0.95</code>.</li>
<li><code>debounceResize</code> (boolean)<br />Dictates if the <code>$(window).resize()</code> event should be debounced for performance reason. The default value is <code>true</code> (debouncing turned on by default).</li>
<li><code>closeTrigger</code> (array with objects)<br />Dictates what event triggers closing the single instance of an opened Fluidbox. The default setup is as follow:
<pre class="language-javascript"><code>closeTrigger: [
{
selector: "#fluidbox-overlay",
event: "click"
}
]</code></pre>
</li>
<li><code>stackIndex</code> (numerical)<br />Determines how high up the z-index will all Fluildbox elements be. Leave this option as default, unless you have other relatively or absolutely positioned elements on the page that is messing with Fluidbox appearance. The default value is <code>1000</code>, with a delta of <code>10</code> — in other words, the effective range of z-indexes Fluidbox operates in will be between 990–1010. For elements that should go under the overlay, they should have a z-index of less than 1000.</li>
</ul>
</section>
<section class="demo">
<h2 id="basic-demonstration">Basic demonstrations</h2>
<p>Fluidbox is designed to be versatile, flexible and easy to implement. It works with linked images that satisfy the criteria stipulated above — regardless of how they are arranged on the page. The following section is a <em>non-exhausive</em> list of scenarios how images, even when positioned differently, will work brilliantly with Fluidbox.</p>
<h3 id="single-image">Single image</h3>
<p>Here we demonstrate the use of a single image. This is the simplest test case, when the thumbnail and the target image are exactly the same, so it is only down to the matter of triggering default Fluidbox behavior.</p>
<a href="http://i.imgur.com/uh5YLj5.jpg" data-fluidbox><img src="http://i.imgur.com/uh5YLj5.jpg" alt="ARoS Aarhus Kunstmuseum" title="ARoS Aarhus Kundstmuseum" /></a>
<h3 id="best-fit">Best fit strategy</h3>
<p>Fluidbox also intelligently resizes images such that portrait images will fit perfectly within the viewport, although that means scaling down the image. This effect is pronounced when the viewport and image orientations are different — therefore, the demo below only works on a display with landscape orientation (e.g. not on mobile).</p>
<a href="http://i.imgur.com/uDPcnM3.jpg" title="" data-fluidbox><img src="http://i.imgur.com/uDPcnM3.jpg" alt="" title="" /></a>
<h3 id="high-res">Linking to a higher resolution counterpart</h3>
<p>The built-in functionality also allows you to link a small thumbnail to its higher resolution version. In the test case below, the thumbnail has a resolution of 200×200 while the actual version has a resolution of 2000×2000</p>
<a href="http://placehold.it/2000x2000" title="" data-fluidbox><img src="http://placehold.it/200x200" title="" alt="" /></a>
<h3 id="restrictive-zooming">Restrictive zooming for images of insufficient dimensions to fill page</h3>
<p>Fluidbox is also built to handle linking to images that do not have the sufficient size to fill the page. The following thumbnail links to an image that is only 250×250px large — in most cases, insufficient to fill the viewport (unless you are using this site on a very small viewport).</p>
<a href="http://placehold.it/250x250" title="" data-fluidbox><img src="http://placehold.it/200x200" title="" alt="" /></a>
<h3 id="differential-aspect-ratios">Support for different aspect ratios of thumbnail and higher resolution version</h3>
<p>Fluidbox supports different aspect ratios of the thumbnail and higher resolution version of the image</p>
<a href="http://placehold.it/1920x1080" title="" data-fluidbox><img src="http://placehold.it/200x200" title="" alt /></a>
<h3 id="borders-paddings">Support for image borders and paddings</h3>
<p>Fluidbox also supports extraenous dimensions added to the element in the form of border(s) and/or paddings(s):</p>
<a href="http://i.imgur.com/E5sr59z.jpg" title="" data-fluidbox class="has-border has-padding"><img src="http://i.imgur.com/E5sr59z.jpg" title="" alt="" /></a>
<h3 id="absolute-positioning">Absolutely positioned images</h3>
<p>Fluidbox handles absolutely positioned images without any problem. The image below is absolutely positioned within its parent, the grey container:</p>
<div class="box">
<a href="http://i.imgur.com/DIbQf0X.jpg" data-fluidbox><img src="http://i.imgur.com/DIbQf0X.jpg" title="" alt="" /></a>
</div>
<h3 id="galleries">Galleries</h3>
<p>Fluid box works even when images are arranged in galleries. In this case, they are arranged with the help of flexbox.</p>
<p class="message note">The flexbox gallery will collapse into single items when viewed in mobile, or else the thumbnails will be too small — to appreciate the how Fluidbox works in this scenario, do use a wider device (>600px screen width).</p>
<div class="gallery">
<a href="http://i.imgur.com/80WaVuY.jpg" title="" data-fluidbox class="col-1"><img src="http://i.imgur.com/80WaVuY.jpg" alt="" title="" /></a>
<a href="http://i.imgur.com/9OQWB.jpg" title="" data-fluidbox class="col-2"><img src="http://i.imgur.com/9OQWB.jpg" alt="" title="" /></a>
<a href="http://i.imgur.com/UvGHJjo.jpg" title="" data-fluidbox class="col-2"><img src="http://i.imgur.com/UvGHJjo.jpg" alt="" title="" /></a>
<a href="http://i.imgur.com/esWWGbF.jpg" title="" data-fluidbox class="col-3"><img src="http://i.imgur.com/esWWGbF.jpg" alt="" title="" /></a>
<a href="http://i.imgur.com/ZCogT10.jpg" title="" data-fluidbox class="col-3"><img src="http://i.imgur.com/ZCogT10.jpg" alt="" title="" /></a>
<a href="http://i.imgur.com/24hrPQn.jpg" title="" data-fluidbox class="col-3"><img src="http://i.imgur.com/24hrPQn.jpg" alt="" title="" /></a>
</div>
<h3 id="floated-images">Floated images</h3>
<p>Moreover, it also works with floated images - to the left or to the right, it does not matter. The following texts are jibberish, used as filler.</p>
<p class="message note">The floated images will be rendered block-level on narrow-width devices, such as mobile phones. To appreciate how Fluidbox works with floated images, you can view this demo on a wider device (>480px).</p>
<p class="filler"><a class="float-left" href="http://i.imgur.com/BXo4qAz.jpg" title="" data-fluidbox><img src="http://i.imgur.com/BXo4qAz.jpg" title="" alt="" /></a>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed.</p>
<p class="filler"><a class="float-right has-border has-padding" href="http://i.imgur.com/rWuQotb.jpg" title="" data-fluidbox><img src="http://i.imgur.com/rWuQotb.jpg" title="" alt="" /></a>Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense as taken ye mirth at. Believe fat how six drawing pursuit minutes far. Same do seen head am part it dear open to. Whatever may scarcely judgment had.</p>
<p class="filler">Residence certainly elsewhere something she preferred cordially law. Age his surprise formerly mrs perceive few stanhill moderate. Of in power match on truth worse voice would. Large an it sense shall an match learn. By expect it result silent in formal of. Ask eat questions abilities described elsewhere assurance. Appetite in unlocked advanced breeding position concerns as. Cheerful get shutters yet for repeated screened. An no am cause hopes at three. Prevent behaved fertile he is mistake on.</p>
</section>
<section class="demo">
<h2 id="advanced-demonstration">Advanced demonstrations</h2>
<p>In this segment I will introduce you to more complex and advanced features of Fluidbox. In many cases you will not find the need of the following features — however, to developers who intend to extend Fluidbox functionality, listen to custom events and even initiate custom triggers should continue to read on.</p>
<p>As the demo below are highly advanced, I have included code snippets whenever possible. You can toggle them by clicking on the show/hide buttons.</p>
<h3 id="dynamic-content">Implementing Fluidbox with dynamically-added content</h3>
<p>Fluidbox also works well with dynamically-added links, as long as you call the <code>.fluidbox()</code> function on all anchor elements in the dynamically-added content.</p>
<button href="#" id="loadImg" type="button">Load image in container below</button>
<article></article>
<h3 id="custom-events">Custom event handlers and callbacks</h3>
<p>From <strong>v1.4.1</strong> onwards, Fluidbox will trigger custom events depending on the state of the current (and only) instance of Fluidbox. Please <a href="https://github.com/terrymun/Fluidbox#custom-events" href="Custom events">refer to the documentation</a> for detailed description of each custom event. You can listen to custom events by binding them using the <code>.on()</code> method, e.g. <code>$(selector).on('openstart', function() {...});</code></p>
<div class="cols cols-nowrap">
<a href="http://i.imgur.com/jWe1mjR.jpg" title="" class="custom-event" id="custom-event-1"><img src="http://i.imgur.com/jWe1mjR.jpg" title="" alt="" /></a>
<div id="log">
<div>
<p>Custom events that are fired will be logged here. You can also check your browser console.</p>
<ul></ul>
</div>
</div>
</div>
<p>Below is an example of using custom events to trigger appearance of image captions, descriptions or social sharing buttons (currently unsupported by Fluidbox <em>officially</em>, but requested by many). I have chosen to listen to the <code>openend</code> event to show metadata, and the <em>closestart</em> event to hide it.</p>
<a href="http://i.imgur.com/chBtR9s.jpg" title="Sunny days" class="custom-event" id="custom-event-2"><img src="http://i.imgur.com/chBtR9s.jpg" title="Talia & Dugald" alt="On the last weekend of summer-ish weather, we decided to have the final picnic before autumn begins." /></a>
<div class="code-block">
<a href="#" class="code-toggle" role="button" data-alt-text="Hide code">Show code</a>
<pre class="language-javascript"><code>var $caption = $('<div />', { 'id': 'custom-event-2-social' });
$caption
.html('<div class="img-caption"></div><p class="img-desc"></p><ul><li>Share on:</li><li><a href="#">Facebook</a></li><li><a href="#">Pinterest</a></li><li><a href="#">Twitter</a></li></ul>')
.appendTo($('body'));
$(document).on('click', '#custom-event-2-social', function(e) {
e.preventDefault();
});
$('#custom-event-2')
.fluidbox({
closeTrigger: [{
selector: "#fluidbox-overlay",
event: "click"
}, {
selector: "window",
event: "scroll"
}]
})
.on('openend', function() {
var $img = $(this).find('img');
$('#custom-event-2-social')
.addClass('visible')
.find('.img-caption')
.text($img.attr('title'))
.next('.img-desc')
.text($img.attr('alt'));
})
.on('closestart', function() {
$('#custom-event-2-social').removeClass('visible');
});</code></pre>
</div>
<h3 id="custom-triggers">Custom triggers</h3>
<p>From <strong>v1.4.2</strong> onwards, Fluidbox has been imparted with the ability to listen to custom triggers. So faronly one rigger is accepted: <code>recompute</code>. All there will invoke the internal <code>funcResize()</code> function, which will reposition an opened Fluidbox instance apporpriately and update the dimensions and coordinates, as well as the CSS transforms, of the ghost element. When recomputation is completed, this will then trigger a <a href="#custom-events">custom event</a> known as <code>recomputeend</code>.</p>
<p>This custom event is very useful when a layout change has been triggered without an accompanying viewport resize event: for example, changing the width of a thumbnail in a flexbox layout.</p>
<button id="custom-trigger" type="button">Add new image to gallery</button>
<div class="cols cols-nowrap">
<a href="http://placehold.it/2500x2500" title="" class="custom-trigger"><img src="http://placehold.it/500x500" title="" alt="" /></a>
<a href="http://placehold.it/2500x2500" title="" class="custom-trigger"><img src="http://placehold.it/500x500" title="" alt="" /></a>
</div>
<div class="code-block">
<a href="#" class="code-toggle" role="button" data-alt-text="Hide HTML">Show HTML</a>
<pre class="language-markup"><code><a href="#" id="custom-trigger" role="button">Click to add new image to gallery below.</a>
<div>
<a href="http://placehold.it/2500x2500" title="" class="custom-trigger"><img src="http://placehold.it/500x500" title="" alt="" /></a>
<a href="http://placehold.it/2500x2500" title="" class="custom-trigger"><img src="http://placehold.it/500x500" title="" alt="" /></a>
</div></code></pre>
</div>
<div class="code-block">
<a href="#" class="code-toggle" role="button" data-alt-text="Hide JS">Show JS</a>
<pre class="language-javascript>"><code>// Initialize Fluidbox
$('.custom-trigger').fluidbox();
// Attach click event to button that adds new child
$('#custom-trigger').click(function(e) {
e.preventDefault();
var $newChild = $('<a />', {
'class': 'custom-trigger',
'title': '',
'href': 'http://placehold.it/2500x2500'
});
$newChild.append($('<img />', {
'src': 'http://placehold.it/500x500',
'title': '',
'alt': ''
}));
// Trigger recalculate event on fluidbox
$(this)
.next() // Navigate to gallery after button
.append($newChild) // Append new image
.find('a') // Find <a>
.fluidbox() // Initialize Fluidbox on newly added element
.end() // Return to previous object
.find('a.custom-trigger') // Selector of elements used for fluidbox
.trigger('reccompute'); // Trigger Fluidbox recomputing
});</code></pre>
</div>
<h3 id="custom-overlays">Customising overlays</h3>
<p>From <strong>v1.3.5</strong> onwards, the <code>overlayColor</code> configuration has been removed from the jQuery <code>.extend()</code> settings. Instead, users can now freely specify overlay colors (or even overlay images) by modifying the background-color property of <code>.fluidbox-overlay</code>. Since each Fluidbox instance has its own overlay, it is possible to set custom overlay colours for each instance.</p>
<p><strong>Note:</strong> The Fluidbox overlay have an opacity of 1. In order to change the transparency of the overlay, I strongly recommend using the alpha channel of the <code>rgba()</code> specification, as Fludibox will manually toggle the opacity between 0 and 1 (therefore overriding all opacity styles you have specified).</p>
<h4 id="custom-colours-and-gradients">Custom colours and gradients</h4>
<p>The following is an example of a Fluidbox instance with a custom overlay colour (CSS written in SASS flavour):</p>
<div class="gallery">
<a href="http://i.imgur.com/5nDXHEZ.jpg" title="" data-fluidbox class="col-2 overlay-1"><img src="http://i.imgur.com/5nDXHEZ.jpg" alt="" title="" /></a>
<a href="http://i.imgur.com/keuMHNt.jpg" title="" data-fluidbox class="col-2 overlay-2"><img src="http://i.imgur.com/keuMHNt.jpg" alt="" title="" /></a>
</div>
<div class="code-block">
<a href="#" class="code-toggle" role="button" data-alt-text="Hide code">Show code</a>
<pre class="language-css"><code>.fluidbox-overlay {
.overlay-1 & {
background-color: rgba(255,190,78,.85);
}
.overlay-2 & {
background-color: transparent; /* To override default style */
background-image: linear-gradient(
to top left,
rgba(130,168,158,0.85),
rgba(134,150,173,.85)
);
}
}</code></pre>
</div>
<h4 id="overlay-images">Overlay images</h4>
<p>Oh wait — you can even use custom overlay images. However, since the opacity of the overlay is only toggled between 0 and 1, you will have to use a pseudo-element in order to atler the opacity of the overlay image (since it is not possible to dictate the transparency of a background image, unlike <code>rgba()</code> values):</p>
<a href="http://i.imgur.com/3qj1wfN.jpg" title="" data-fluidbox class="overlay-3"><img src="http://i.imgur.com/3qj1wfN.jpg" alt="" title="" /></a>
<div class="code-block">
<a href="#" class="code-toggle" role="button" data-alt-text="Hide code">Show code</a>
<pre class="language-css"><code>.fluidbox-overlay & {
.overlay-3 & {
background-color: #000; /* To override default style */
&::before {
background-image: url('http://i.imgur.com/3qj1wfN.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: .33333;
-webkit-filter: blur(4px);
}
}
}</code></pre>
</div>
</section>
</main>
<footer>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 516 560" xml:space="preserve">
<g>
<polygon class="fill" points="0,0 0,158 165,158 258,306 351,158 516,158 516,0"></polygon>
<polygon class="fill" points="165,366 258,507 351,366 351,560 165,560"></polygon>
</g>
</svg>
<p>Made by <a href="http://terrymun.com/" title="Terry Mun">Terry Mun</a> · 2014.</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fluidbox.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<script>
$(function () {
// You can use any kind of selectors for jQuery Fluidbox
$('.demo a[data-fluidbox]').fluidbox();
// Custom triggers
$('.custom-trigger').fluidbox();
$('#custom-trigger').click(function() {
var $newChild = $('<a />', {
'class': 'custom-trigger',
'title': '',
'href': 'http://placehold.it/2500x2500'
});
$newChild.append($('<img />', {
'src': 'http://placehold.it/500x500',
'title': '',
'alt': ''
}));
// Trigger recalculate event on fluidbox
$(this)
.next() // Navigate to gallery after button
.append($newChild) // Append new image
.find('a') // Find <a>
.fluidbox() // Initialize Fluidbox on newly added element
.end() // Return to previous object
.find('a.custom-trigger') // Selector of elements used for fluidbox
.trigger('recompute'); // Trigger Fluidbox recomputing
});
// Custom events
var writeLog = function(msg, color) {
var t = (new Date()).toLocaleTimeString();
$('#log div ul').append('<li><span style="background-color: '+color+';">'+t+'</span> '+msg+'</li>');
console.log(t+': '+msg);
}
$('#custom-event-1')
.fluidbox()
.on('openstart', function() {
writeLog('Initializing opening of Fluidbox instance.', '#3E606F');
}).on('openend', function() {
writeLog('Transition to opened Fluidbox completed.', '#193441');
}).on('resizeend', function() {
writeLog('Transition to new recalculated position and size completed.', '#468966');
}).on('closestart', function() {
writeLog('Initializing closing of Fluidbox instance.', '#B64926');
}).on('closeend', function() {
writeLog('Transition to closed Fluidbox completed, reverted to ground state.', '#8E2800');
}).on('recomputeend', function() {
writeLog('Recomputing ghost element of Fluidbox completed.', '#7E8AA2');
});
var $caption = $('<div />', {
'id': 'custom-event-2-social'
});
$caption.html('<ul><li>Share on:</li><li><a href="#">Facebook</a></li><li><a href="#">Pinterest</a></li><li><a href="#">Twitter</a></li></ul>').appendTo($('body'));
$('#custom-event-2')
.fluidbox({
closeTrigger: [{
selector: ".fluidbox-overlay",
event: "click"
}, {
selector: "window",
event: "scroll"
}, {
selector: 'document',
event: 'keyup',
keyCode: 27
}]
})
.on('openend', function() {
var $img = $(this).find('img');
$('#custom-event-2-social').addClass('visible').find('.img-caption').text($img.attr('title')).next('.img-desc').text($img.attr('alt'));
})
.on('closestart', function() {
$('#custom-event-2-social').removeClass('visible');
});
// Load an image dynamically
$('#loadImg').one('click', function() {
// Construct new content
$newContent = $('<p>This paragraph and its accompanying image are dynamically-added.</p><a href="http://i.imgur.com/aNhtkPh.jpg" title="" data-fluidbox><img src="http://i.imgur.com/aNhtkPh.jpg" alt="" title="" /></a>');
// Append new content to immediate sibling, <article>
// Then search for the anchor we want fluidbox to work on, apply method .fluidobx()
$(this)
.prop('disabled', true)
.next('article')
.append($newContent)
.find('a[data-fluidbox]')
.fluidbox();
});
// ---------------------------------------------------------------------//
// The code below are not used to demonstrate Fluidbox functionality. //
// They are only for functions specific to this demo page only. //
// ---------------------------------------------------------------------//
// Disable all elements with button roles
$('a[role="button"], button[type="button"]').click(function(e) {
e.preventDefault();
});
// Smooth scrolling plugin by Chris Coiyer
// Source: http://css-tricks.com/snippets/jquery/smooth-scrolling/
$(document).on('click', 'a[href*=#]:not([href=#])', function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
window.location.hash = target.selector;
return false;
}
}
});
// Add link to headers
$('h2, h3, h4').each(function() {
if($(this).attr('id')) $(this).prepend('<a href="#'+$(this).attr('id')+'" class="anchor"></a>');
});
// <pre> block toggle
$('.code-toggle').click(function() {
if(!$(this).data('toggled') || $(this).data('toggled') == 0) {
$(this).data('org-text', $(this).html());
$(this)
.data('toggled', 1)
.text($(this).attr('data-alt-text'))
.nextAll('pre')
.slideDown();
} else {
$(this)
.data('toggled', 0)
.text($(this).data('org-text'))
.nextAll('pre')
.slideUp();
}
}).nextAll('pre').hide();
});
</script>
</footer>
</body>
</html>