-
Notifications
You must be signed in to change notification settings - Fork 18
/
demo.html
115 lines (99 loc) · 3.49 KB
/
demo.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
<!doctype html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0;">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset='utf-8'>
<head>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- META ===================================================== -->
<title>Smoothbox Demo</title>
<meta name="description" content="A lightweight and dead simple lightbox script">
<!-- Favicon ========================================== -->
<link rel="icon" href="favicon.ico">
<!-- CSS ====================================================== -->
<link rel="stylesheet" href="css/smoothbox.css">
<!-- Demo CSS (don't use) -->
<style type="text/css">
body, html {
padding:0px;
margin:0px;
background: #eee;
}
.page{
padding: 5px 30px 30px 30px;
max-width: 900px;
margin: 0 auto;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
background: #fff;
box-shadow:0px 2px 3px #ccc;
}
a:link,
a:visited {
color: #F0353A;
}
a:hover {
color: #8C0B0E;
}
pre {
background: #333;
padding: 10px;
overflow: auto;
color: #BBB7A9;
}
.button {
text-decoration: none;
color: #F0353A;
border: 2px solid #F0353A;
padding: 6px 10px;
display: inline-block;
font-size: 18px;
}
.button:hover {
background:#F0353A;
color:#fff;
}
</style>
</head>
<body>
<br>
<div class="page">
<h1>Smoothbox</h1>
A lightweight & simple jQuery lightbox script by <a href="http://kthornbloom.com">Kevin Thornbloom</a>.
<h2>Demo</h2>
<a class="sb" href="images/1.jpg">Image One</a><br>
<a class="sb" href="images/2.jpg" title="Hey here's a caption">Image Two</a><br>
<a class="sb" href="images/3.jpg" title="Whoa, another caption. What are the odds of that happening?">Image Three</a><br>
<a class="sb" href="images/4.jpg">Image Four</a>
<h2>Features</h2>
<ul>
<li>Lightweight [1.7Kb]</li>
<li>Preloads images</li>
<li>Built in gallery for multiple items</li>
<li>CSS3 transitions for smoother effects</li>
<li>Responsive image sizes</li>
</ul>
<h2>Usage</h2>
<ol>
<li>Include jQuery, smoothbox.js (or smoothbox.jquery2.js if you're using jQuery 1.9+), and smoothbox.css
<pre><code><link rel="stylesheet" href="css/smoothbox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="js/smoothbox.min.js"></script>
</pre></code>
</li>
<li>Add a class of "sb" to any link that you wish to open in smoothbox</li>
<li>Want a caption? Add a title attribute to your link
<pre><code><a class="sb" href="images/1.jpg" title="Hey here's a caption">Image One</a></pre></code>
</li>
</ol>
<h2>Customization</h2>
To keep things as tidy as possible, there aren't any options related to the javascript. The CSS is, of course, customizable to change colors and other styles.
<h2>Download</h2>
<a href="https://github.com/kthornbloom/Smoothbox" target="_blank" class="button">Download & Docs</a>
</div><br>
<!-- JS ======================================================= -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="js/smoothbox.js"></script>
</body>
</html>