-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
144 lines (117 loc) · 6.09 KB
/
home.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Embiggen</title>
<!-- Sytaxhighlighter -->
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>
<style type="text/css">
/*
Styles layout this page. They have nothing to to with the embiggen plugin.
They have also been 'compressed'. Also, I know embiggen isn't a real word.
______________________________________________________________________________
****************************************************************************** */
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;}
#container{width:750px;margin:0 auto;}
h2,h3,h4{clear:both;}
#default a, #options a{float:left;display:block;margin:0 10px 48px;}
img{vertical-align:text-bottom;}
code{font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;color:#000;}
hr{clear:both;margin: 4em 0}
.attribute {font-style: italic; color: #999;}
.syntaxhighlighter {margin: 2em 0 !important;}
</style>
</head>
<body>
<div id="container">
<h1>jQuery Embiggen Plugin</h1>
<p>The jQuery Embiggen plugin will display any linked image center to the window.
<p>A semi-transparent overlay is displayed behing the image.</p>
<p>A spinner is displayed while the image is loading.</p>
<p>If the image is larger than the viewport it will, by default, be scaled proportionally to fit.</p>
<p>Clicking the embiggened image or overlay closes both.</p>
<hr />
<h3>Download</h3>
<p>Download from <a href="https://github.com/camskene/jquery-embiggen">Github</a>.</p>
<hr />
<h3>Options</h3>
<p>There are 3 options.</p>
<pre class="brush: js">
vertical: true,
bgcolor: "#191919",
opacity: "0.98"
</pre>
<ol>
<li>Set <code>vertical</code> to <code>false</code> to scale the width of the image only to the window. This is handy if you have an image with a large height. The image is always scaled proportionally.</li>
<li>Set <code>bgcolor</code> to desired overlay color.</li>
<li>Set <code>opacity</code> to desired overlay opacity.</li>
</ol>
<hr />
<h3>Setup</h3>
<h4>HTML</h4>
<pre class="brush: xml">
<a href="img/lg/biy-home-001.jpg">
<img src="img/th/biy-home-001.jpg" width="630" height="492" />
</a>
</pre>
<h4>JS</h4>
<pre class="brush: js">
$("a").embiggen();
</pre>
<p>or</p>
<pre class="brush: js">
$("a").embiggen({
vertical: true,
bgcolor: "#191919",
opacity: "0.98"
});
</pre>
<hr />
<h3>Demo I</h3>
<pre class="brush: js">
$("a").embiggen();
</pre>
<div id="default">
<a href="img/lg/biy-home-008.jpg"><img src="img/th/biy-home-008.jpg" width="230" height="180" /></a>
<a href="img/lg/biy-about-001.jpg"><img src="img/th/biy-about-001.jpg" width="230" height="180" /></a>
<a href="img/lg/biy-home-001.jpg"><img src="img/th/biy-home-001.jpg" width="230" height="180" /></a>
</div><!-- #default -->
<hr />
<h3>Demo II</h3>
<pre class="brush: js">
$("a").embiggen({
vertical: false
});
</pre>
<div id="options">
<a href="img/lg/biy-home-008.jpg"><img src="img/th/biy-home-008.jpg" width="230" height="180" /></a>
<a href="img/lg/biy-about-001.jpg"><img src="img/th/biy-about-001.jpg" width="230" height="180" /></a>
<a href="img/lg/biy-home-001.jpg"><img src="img/th/biy-home-001.jpg" width="230" height="180" /></a>
</div><!-- #default -->
<hr />
<p class="attribute">The jQuery Embiggen plugin was brought to you by the letter <code>j</code> and the number <code>5</code>.</p>
<p class="attribute">- Cameron Skene</p>
</div><!-- #container -->
<!-- load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- load embiggen plugin -->
<script src="jquery.embiggen.js"></script>
<!-- call embiggen -->
<script>
$("#default a").embiggen()
$("#options a").embiggen({
vertical: false
})
</script>
<!-- http://alexgorbatchev.com/SyntaxHighlighter -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"></script>
<script>
SyntaxHighlighter.defaults['toolbar'] = false;
</script>
<script>SyntaxHighlighter.all();</script>
</body>
</html>