forked from Fellini85/popeye
-
Notifications
You must be signed in to change notification settings - Fork 0
/
plugin.html
207 lines (188 loc) · 17.1 KB
/
plugin.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="index,follow" />
<title>Demo | jQuery.popeye 2.1 | an inline lightbox alternative with slideshow</title>
<link rel="shortcut icon" href="gfx/site/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/site/site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/popeye/jquery.popeye.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/popeye/jquery.popeye.style.css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="lib/popeye/jquery.popeye-2.1.js"></script>
</head>
<body>
<div id="page-margins">
<div id="header">
<h1>jQuery.<span class="logo">popeye</span> 2.1</h1>
<p class="claim">an inline lightbox alternative with slideshow</p>
</div>
<div class="example">
<div class="ppy" id="ppy1">
<ul class="ppy-imglist">
<li>
<a href="http://farm4.static.flickr.com/3461/3760102198_0e3de1eec3.jpg">
<img src="http://farm4.static.flickr.com/3461/3760102198_0e3de1eec3_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Eyes of a Holcocephala fusca Robber Fly</strong><br />shot by flickr member Thomas Shahan<br />
<a href="http://www.flickr.com/photos/opoterser/3760102198/">View on flickr.com</a>
</span>
</li>
<li>
<a href="http://farm2.static.flickr.com/1317/908814138_9fa713a687.jpg">
<img src="http://farm2.static.flickr.com/1317/908814138_9fa713a687_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Crocodile's eye</strong><br />shot by flickr member Tambako the Jaguar<br />
<a href="http://www.flickr.com/photos/tambako/908814138/">View on flickr.com</a>
</span>
</li>
<li>
<a href="http://farm4.static.flickr.com/3357/3633927491_d8864d5235.jpg">
<img src="http://farm4.static.flickr.com/3357/3633927491_d8864d5235_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Daipeem</strong><br />shot by flickr member Furryscaly<br />
<a href="http://www.flickr.com/photos/furryscalyman/3633927491">View on flickr.com</a>
</span>
</li>
<li>
<a href="http://farm4.static.flickr.com/3335/3198858060_365ce0ba53.jpg">
<img src="http://farm4.static.flickr.com/3335/3198858060_365ce0ba53_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>basiliscus plumifrons</strong><br />shot by flickr member Joachim S. Müller<br />
<a href="http://www.flickr.com/photos/joachim_s_mueller/3198858060/in/set-72157612281941653/">View on flickr.com</a>
</span>
</li>
<li>
<a href="http://farm3.static.flickr.com/2597/4162969117_cbbc452a26.jpg">
<img src="http://farm3.static.flickr.com/2597/4162969117_cbbc452a26_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Eyes of Jumping spider</strong><br />shot by flickr member Lukjonis<br />
<a href="http://www.flickr.com/photos/38628972@N05/4162969117/">View on flickr.com</a>
</span>
</li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-nav">
<a class="ppy-prev" title="Previous image">Previous image</a>
<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
<a class="ppy-switch-compact" title="Close">Close</a>
<a class="ppy-next" title="Next image">Next image</a>
</div>
</div>
</div>
<div class="ppy-caption">
<div class="ppy-counter">
Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong>
</div>
<span class="ppy-text"></span>
</div>
</div>
<h2>Example 1</h2>
<p>The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. The caption displays the html code inside the <code><span class="ppy-extcaption"></code>.</p>
<p>By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image.</p>
<p class="mute">No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.</p>
</div>
<div class="example">
<h2>Example 2</h2>
<div class="ppy" id="ppy2">
<ul class="ppy-imglist">
<li><a href="http://farm2.static.flickr.com/1428/1387537684_c1ce69e15a.jpg"><img src="http://farm2.static.flickr.com/1428/1387537684_c1ce69e15a_m.jpg" alt="yankee stadium shot by flickr member andre stoeriko" /></a></li>
<li><a href="http://farm1.static.flickr.com/243/516200107_08d8e90a7f.jpg"><img src="http://farm1.static.flickr.com/243/516200107_08d8e90a7f_m.jpg" alt="Up There, shot by flickr member Nils Geylen" /></a></li>
<li><a href="http://farm2.static.flickr.com/1230/587925720_95a59f71f3.jpg"><img src="http://farm2.static.flickr.com/1230/587925720_95a59f71f3_m.jpg" alt="99 Luftballons, shot by flickr member Iguana Jo" /></a></li>
<li><a href="http://farm2.static.flickr.com/1077/1362086820_0e15e9a21e.jpg"><img src="http://farm2.static.flickr.com/1077/1362086820_0e15e9a21e_m.jpg" alt="The english bikers, shot by flickr member diebmx" /></a></li>
<li><a href="http://farm1.static.flickr.com/106/285870495_e1292924fd.jpg"><img src="http://farm1.static.flickr.com/106/285870495_e1292924fd_m.jpg" alt="Soar, shot by flickr member Brian Hathcock" /></a></li>
<li><a href="http://farm1.static.flickr.com/144/405993690_5c5838a6d4.jpg"><img src="http://farm1.static.flickr.com/144/405993690_5c5838a6d4_m.jpg" alt="Acephalous, shot by flickr member wilhei55" /></a></li>
<li><a href="http://farm2.static.flickr.com/1026/1405752274_fa0dd74922.jpg"><img src="http://farm2.static.flickr.com/1026/1405752274_fa0dd74922_m.jpg" alt="Always Reaching, shot by flickr member ecstaticist" /></a></li>
<li><a href="http://farm2.static.flickr.com/1021/531198146_57e1fd9541.jpg"><img src="http://farm2.static.flickr.com/1021/531198146_57e1fd9541_m.jpg" alt="dive buddy, shot by flickr member leafbug" /></a></li>
<li><a href="http://farm2.static.flickr.com/1134/593106554_1e3b2bda73.jpg"><img src="http://farm2.static.flickr.com/1134/593106554_1e3b2bda73_m.jpg" alt="True Blue, shot by flickr member welshbaloney" /></a></li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
</div>
</div>
<div class="ppy-nav">
<div class="nav-wrap">
<a class="ppy-next" title="Next image">Next image</a>
<a class="ppy-prev" title="Previous image">Previous image</a>
</div>
</div>
</div>
</div>
<p>The second popeye-box has the following user-defined options: <code>direction: 'left'</code> - open to the left. <code>caption: false</code> - do not display captions (even though the images have alt tags with text). <code>navigation: 'permanent'</code> - the navigation is always visible.</p>
<p>The navigation stays fixed to the right of the image. Absolute poisitioning plays a key role in displaying the navigation wherever you want - to the left, right, below or above the image.</p>
<p>There is <strong>no enlarge button</strong>, but a click on the image enlaregs and shrinks it nevertheless.</p>
<p class="mute">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras euismod risus non diam. Proin et neque. Fusce molestie eros et urna. Aliquam sed enim nec lacus bibendum suscipit. Sed varius, quam nec aliquam sagittis, risus sapien luctus nisi, sit amet convallis risus metus a mauris. Curabitur aliquam ultrices est. Pellentesque felis. Mauris luctus orci id justo. Mauris tincidunt massa nec pede. Proin auctor suscipit augue.</p>
<p class="mute">Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.</p>
</div>
<div class="example">
<div class="ppy" id="ppy3">
<ul class="ppy-imglist">
<li><a href="http://farm4.static.flickr.com/3142/3053892214_390c0365df.jpg"><img src="http://farm4.static.flickr.com/3142/3053892214_390c0365df_m.jpg" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras euismod risus non diam." /></a></li>
<li><a href="http://farm4.static.flickr.com/3014/3053902638_7871e32230.jpg"><img src="http://farm4.static.flickr.com/3014/3053902638_7871e32230_m.jpg" alt="In tempus consequat purus. Curabitur in massa nec purus semper adipiscing. Donec convallis odio nec nibh. Nam viverra, tortor nec cursus accumsan, purus purus ultricies mauris, in dignissim orci dui at est. Morbi non quam at ante cursus posuere. Sed ornare sem vitae diam tempor blandit. Nam risus diam, faucibus eget, fermentum et, dignissim eu, tellus. Praesent non justo. Proin vestibulum diam at mi. Cras molestie eleifend mi. Morbi massa enim, auctor at, rhoncus nec, consequat nec, diam. In laoreet lacus vel velit. Sed vulputate commodo ligula." /></a></li>
<li><a href="http://farm4.static.flickr.com/3136/3053075339_ca3f303a6d.jpg"><img src="http://farm4.static.flickr.com/3136/3053075339_ca3f303a6d_m.jpg" alt="Sed consequat tincidunt sapien." /></a></li>
<li><a href="http://farm4.static.flickr.com/3234/3053054359_090927b527.jpg"><img src="http://farm4.static.flickr.com/3234/3053054359_090927b527_m.jpg" alt="Proin aliquam libero ac lectus. Sed consequat tincidunt sapien. Suspendisse hendrerit porta ante. Proin aliquam libero ac lectus. Sed consequat tincidunt sapien. Suspendisse hendrerit porta ante." /></a></li>
<li><a href="http://farm4.static.flickr.com/3161/3053878060_16a1ed4786.jpg"><img src="http://farm4.static.flickr.com/3161/3053878060_16a1ed4786_m.jpg" alt="Aenean tristique pellentesque quam. Proin aliquam libero ac lectus." /></a></li>
<li><a href="http://farm4.static.flickr.com/3247/3053897646_df5b74c794.jpg"><img src="http://farm4.static.flickr.com/3247/3053897646_df5b74c794_m.jpg" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3225/3053039525_2d3ef0c58e.jpg"><img src="http://farm4.static.flickr.com/3225/3053039525_2d3ef0c58e_m.jpg" alt="Suspendisse hendrerit porta ante." /></a></li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-nav">
<div class="nav-wrap">
<a class="ppy-prev" title="Previous image">Previous image</a>
<a class="ppy-play" title="Play Slideshow">Play Slideshow</a>
<a class="ppy-pause" title="Stop Slideshow">Stop Slideshow</a>
<a class="ppy-next" title="Next image">Next image</a>
</div>
</div>
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
</div>
</div>
<div class="ppy-caption">
<span class="ppy-text"></span>
</div>
</div>
</div>
<h2>Example 3</h2>
<p>Here you can see the <strong>slideshow</strong> in action. Just click the play/pause button to toggle the slideshow on and off. Works in both normal and enlarged mode.</p>
<p>In addition, in this example I'm using some fancy new CSS features like semitransparent gradients that probably won't work in the next 500 Versions of Internet Explorer.</p>
<p class="mute">Vivamus ut nisi id libero interdum pretium. Vestibulum lorem. Sed suscipit justo at lectus. Ut viverra eros in urna. Pellentesque augue libero, bibendum eu, pellentesque a, convallis vitae, neque. Duis vel leo et mauris laoreet porttitor. Fusce venenatis libero a elit. Nunc tincidunt, mi id ornare rhoncus, elit purus suscipit neque, ut semper quam leo vel dolor. Aenean ultrices. Pellentesque vel purus. Maecenas ultricies ipsum at libero. Aenean sed turpis. Mauris eleifend, lectus tempus hendrerit dignissim, odio sem interdum pede, at tristique urna ligula vitae eros. Proin feugiat consequat tellus. Morbi odio lectus, pharetra ac, auctor eu, rutrum vel, dui. Sed nec lectus ac velit sollicitudin pharetra. Pellentesque magna nunc, tincidunt vitae, iaculis quis, convallis hendrerit, enim. Nam eu mauris non odio sollicitudin cursus. Nulla hendrerit.</p>
<p class="mute">Nam viverra, tortor nec cursus accumsan, purus purus ultricies mauris, in dignissim orci dui at est. Morbi non quam at ante cursus posuere. Sed ornare sem vitae diam tempor blandit. Nam risus diam, faucibus eget, fermentum et, dignissim eu, tellus. Praesent non justo. Proin vestibulum diam at mi. Cras molestie eleifend mi. Morbi massa enim, auctor at, rhoncus nec, consequat nec, diam. In laoreet lacus vel velit. Sed vulputate commodo ligula.</p>
</div>
<div class="legal">
<p>All flickr photos used in the demonstration are released under Creative Commons 2.0 and, if they were not taken by Christoph Schüßler, they are attributed to the photographers in the source code. The icon set used in the link buttons is <a href="http://pictoico.com/">Pictoico</a> by <a href="http://www.lukapensa.com">Luka Pensa</a>. jQuery.popeye is free software released under the <a href="http://creativecommons.org/licenses/GPL/2.0/">GPL 2.0</a>. This site is maintained by Christoph Schüßler, E-Mail: <a href="mailto:schreib@herr-schuessler.de">schreib@herr-schuessler.de</a>, Web: <a href="http://herr-schuessler.de">herr-schuessler.de</a>.</p>
</div>
</div>
<!-- [example js] begin -->
<script type="text/javascript">
<!--//<![CDATA[
$(document).ready(function () {
var options1 = {
}
var options2 = {
caption: false,
navigation: 'permanent',
direction: 'left'
}
var options3 = {
caption: 'permanent',
opacity: 1
}
$('#ppy1').popeye(options1);
$('#ppy2').popeye(options2);
$('#ppy3').popeye(options3);
});
//]]>-->
</script>
<!-- [example js] end -->
</body>
</html>