/
index.html
executable file
·235 lines (181 loc) · 11.8 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Lightbox JS v3.0 | Test Page</title>
<script type="text/javascript">
// Set your specific lightbox options here
window.LightboxOptions = {overlayOpacity: 0.75};
</script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="video-js/video-js.css" type="text/css" media="screen" title="Video JS">
<script type="text/javascript" charset="utf-8">
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
</script>
<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
pre{ border:1px solid #ccc; background: #eee; padding:10px; }
a img{ border:0 }
</style>
</head>
<body>
<h1><a href="#">Lightbox JS <em>v3.0</em></a></h1>
<p><a href="#">by Jeremy Green</a></p>
<h3>Based on <a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox JS <em>v2.04</em></a></h3>
<p><a href="http://www.lokeshdhakar.com">by Lokesh Dhakar</a></p>
<hr/>
<h2>Example</h2>
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
<a href="images/image-2.jpg" rel="lightbox"><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
<h2>How to Use:</h2>
<h3>Part 1 - Setup</h3>
<ol>
<li>Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.
<pre><code><script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</code></pre>
</li>
<li>Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<pre><code><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</code></pre>
</li>
<li>Check the CSS and make sure the referenced <code>prevlabel.gif</code> and <code>nextlabel.gif</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>closelabel.gif</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li>
</ol>
<h3>Part 2 - Activate</h3>
<ol>
<li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate the lightbox. For example:
<pre><code><a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
</code></pre>
<em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption.
<br/>
<em>Optional: </em>Use the <code>description</code> attribute if you want to show a longer description underneath the caption.
<br/>
</li>
<li>If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<pre><code><a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
</code></pre>
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
</ol>
<h2>Linked Galleries</h2>
<a href="images/image-1.jpg" rel="lightbox[gallery]" title="Leaves" description="Here is description info. Here is description info. Here is description info. Here is description info. Here is description info. Here is description info. Here is description info. Here is description info. Here is description info. Here is description info. Here is description info. Here is description info. "><img src="images/thumb-1.jpg" width="100" height="40" alt="Leaves" /></a>
<a href="images/image-2.jpg" rel="lightbox[gallery]" title="Kubota Garden" description="Another description"><img src="images/thumb-2.jpg" width="100" height="40" alt="Kubota Garden" /></a>
<a href="images/image-5.jpg" rel="lightbox[gallery]" title="Boomer!" description="Another description"><img src="images/thumb-5.jpg" width="100" height="40" alt="Boomer!" /></a>
<h2>Links to inline content</h2>
<a href="#inline-content" rel="lightbox[gallery]" title="HTML Fragment" params="lightbox_width=300;lightbox_height=200"><img src="images/thumb-2.jpg" width="100" height="40" alt="Kubota Garden" /></a>
<pre>
<code>
<a href="#inline-content" rel="lightbox[gallery]" title="HTML Fragment" params="lightbox_width=300;lightbox_height=200">
<img src="images/thumb-2.jpg" width="100" height="40" alt="Kubota Garden" />
</a>
<div id="inline-content">
<h3>This is inline content</h3>
</div>
</code>
</pre>
<div id="inline-content">
<h3>This is inline content</h3>
<p>You could have anything in here. Really.</p>
<a href="images/image-2.jpg" rel="lightbox"><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
</div>
<h2>Links to external content loaded via AJAX</h2>
<a href="fragment.html" rel="lightbox[gallery]" title="HTML Fragment"><img src="images/thumb-2.jpg" width="100" height="40" alt="Kubota Garden" /></a>
<p>
(This fails in Chrome when this page is visited locally - via file://... )
</p>
<h2>Video JS</h2>
<a href="http://development-images.webapeel.com/apeel/assets/2010/12/7/34917/tiny.mp4.mp4"
rel="lightbox[gallery]"
title="Tornado!"
description="Glimpse the awesome power of Mother Nature!"
params="alt_src=http://development-images.webapeel.com/apeel/assets/2010/12/7/34917/tiny.mp4.webm,http://development-images.webapeel.com/apeel/assets/2010/12/7/34917/tiny.mp4.ogv;lightbox_width=720;lightbox_height=480">
<img src="images/thumb-3.jpg" width="100" height="40" alt="Tornado!" /></a>
<a href="http://video-js.zencoder.com/oceans-clip.mp4"
rel="lightbox[gallery]"
title="Oceans"
description="Experience the wonders of the deep!"
params="alt_src=http://video-js.zencoder.com/oceans-clip.webm,http://video-js.zencoder.com/oceans-clip.ogv;lightbox_width=640;lightbox_height=246">
<img src="images/thumb-4.jpg" width="100" height="40" alt="Oceans" /></a>
<p>
With videos (and inline and AJAX content) you should always specify the <code>lightbox_width</code> and <code>lightbox_height</code> params.
</p>
<pre>
<code>
<a href="clip.mp4"
rel="lightbox[gallery]"
title="Oceans"
params="alt_src=clip.webm,clip.ogv;lightbox_width=640;lightbox_height=246">
<img src="images/thumb-4.jpg" width="100" height="40" alt="Oceans" /></a>
</code>
</pre>
<h2>External Pages in an iframe</h2>
<p>
Pass the <code>content_mode</code> param with a value of <code>iframe</code> to turn any link into an iframe in a lightbox.
</p>
<a href="http://www.octolabs.com/" title="Octolabs" rel="lightbox[gallery]" params="lightbox_width=990;lightbox_height=650;content_mode=iframe"><img src="http://www.rarearth.tv/images/octo_logo.png" width="71" height="75" alt="Octolabs"/></a>
<h2>Video sharing sites</h2>
<a href="http://www.youtube.com/watch?v=zYe5NsxeB6M" title="Youtube video" rel="lightbox[gallery]" params="lightbox_width=480;lightbox_height=390"><img src="http://www.google.com/help/hc/images/logos/youtube_logo.gif"></a>
<a href="http://vimeo.com/20412632" title="Vimeo video" rel="lightbox[gallery]" params="lightbox_width=400;lightbox_height=225"><img src="http://a.vimeocdn.com/images/logo_vimeo.png"></a>
<p> </p>
<hr/>
<p> </p>
<h2>Link Params</h2>
<p>
Additional configuration parameters can be passed into the lightbox by way of the 'params' attribute.<br/>
Parameters are passed in pairs, with each pair seperated by a semicolon (';').<br/>
Multiple values for a parameter can be seperated by a comma (',').
</p>
<p>
Avaliable parameters:
</p>
<ul>
<li>
<em>lightbox_height</em> : <i>integer</i> - The height of the lightbox, in pixels, for this content.
<pre><a params="lightbox_height=200" src="...">..</a></pre>
</li>
<li>
<em>lightbox_width</em> : <i>integer</i> - The width of the lightbox, in pixels, for this content.
<pre><a params="lightbox_width=400;lightbox_height=200" src="...">..</a></pre>
</li>
<li>
<em>src</em> : <i>string</i> - One or more URLs (relative or fully qualified) for fallback media sources. Multiple sources should be serated by a comma.
<pre><a params="alt_src=movie.webm,http://somedomain.com/movie.ogv" src="movie.mp4">..</a></pre>
</li>
</ul>
<hr/>
<select name="testSelect">
<option>This is just a test.</option>
</select>
<!--
<div class="video-js-box"><video class="video-js" width="720" height="480" controls preload autoplay><source src="http://development-images.webapeel.com/apeel/assets/2010/12/7/34917/tiny.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><object id="flash_fallback_1" class="vjs-flash-fallback" width="720" height="480" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"><param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":[{"url": "http://development-images.webapeel.com/apeel/assets/2010/12/7/34917/tiny.mp4.mp4","autoPlay":true,"autoBuffering":true}]}' /></object></video><p class="vjs-no-video"><strong>Download Video:</strong><a href="http://videojs.com">HTML5 Video Player</a> by VideoJS</p></div>
-->
<!--
<div class="video-js-box">
<video class="video-js" width="640" height="264" controls preload autoplay poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":true,"autoBuffering":true}]}' />
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
<p class="vjs-no-video"><strong>Download Video:</strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
<a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p>
</div>
-->
</body>
</html>