unBox/unbox.html at master · Every0ne/unBox · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />

		<title>unBox - simple dependency-free lightbox</title>

		<meta name="Description" content="unBox - a lightbox that is small, simple, responsive, mobile friendly." />
		<meta name="Keywords" content="javascript, lightbox, responsive, small, tiny, mobile" />

		<link rel="stylesheet" media="all" type="text/css" href="css/css.css" />
		<link rel="stylesheet" media="all" type="text/css" href="css/prism.css" />
		<link rel="stylesheet" media="all" type="text/css" href="unbox.css" />

		<script type="text/javascript" src="unbox.js"></script>
		<script type="text/javascript" src="js/prism.js"></script>
	</head>

	<body>
		<div class="wrapper">
			<div class="header">
				<h1>unBox - small simple responsive dependency-free lightbox</h1>
			</div>

			<div class="content">

				<h2 id="Examples">Examples</h2>

				<!-- ============= example -->
				<div class="example-container">
					<h3>Single Initialization</h3>
					<p>Create a single lightbox, individually on each image:</p>
					<div>
						<div id="gallery1" class="gallery">
							<a href="media/sample_a.jpg" title="Caption for image A"><img src="media/sample_a_thumb.jpg" /></a>
							<a href="media/sample_b.jpg" title="Caption for image B"><img src="media/sample_b_thumb.jpg" /></a>
							<a href="media/sample_c.jpg" title="Caption for image C"><img src="media/sample_c_thumb.jpg" /></a>
							<a href="media/sample_d.jpg" title="Caption for image D"><img src="media/sample_d_thumb.jpg" /></a>
						</div>
					</div>
					<pre><code class="language-js">unbox('#gallery1 a');</code></pre>
				</div>

				<!-- ============= example -->
				<div class="example-container">
					<h3>Gallery Initialization</h3>
					<p>Create a gallery style lightbox:</p>
					<div>
						<div id="gallery2" class="gallery">
							<a href="media/sample_a.jpg" title="Caption for image A"><img src="media/sample_a_thumb.jpg" /></a>
							<a href="media/sample_b.jpg" title="Caption for image B"><img src="media/sample_b_thumb.jpg" /></a>
							<a href="media/sample_c.jpg" title="Caption for image C"><img src="media/sample_c_thumb.jpg" /></a>
							<a href="media/sample_d.jpg" title="Caption for image D"><img src="media/sample_d_thumb.jpg" /></a>
						</div>
					</div>
					<pre><code class="language-js">unbox('#gallery2 a', {group : true});</code></pre>
				</div>

				<!-- ============= example -->
				<div class="example-container">
					<h3>VideoLightbox Initialization</h3>
					<p>Create a lightbox for videos:</p>
					<div>
						<div id="gallery3" class="gallery">
							<a href="https://www.youtube.com/watch?v=n_dZNLr2cME" title="Caption for image A"><img src="media/sample_a_thumb.jpg" /></a>
							<a href="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" title="Big Buck Bunny"><img src="media/sample_b_thumb.jpg" /></a>
							<!--<a href="https://www.google.pl/maps/@61.1796583,-149.8592632,15.95z" title="Google map"><img src="media/sample_c_thumb.jpg" /></a>
							<a href="http://portfolio/video/flash-27-05-2014-19-29-11/" title="Caption for image D"><img src="media/sample_d_thumb.jpg" /></a>-->
						</div>
					</div>
					<pre><code class="language-js">unbox('#gallery3 a');</code></pre>
				</div>

			</div>
		</div>

		<script type="text/javascript">
			if( !NodeList.prototype.forEach )
				NodeList.prototype.forEach = Array.prototype.forEach;

			document.querySelectorAll('code').forEach( function( elt ){
				eval( elt.innerHTML );
			});
		</script>

	</body>
</html>