1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
\r
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
\r
4 <!-- This is a multi purpose file used for:
5 1. running jsUnit tests
6 2. as a stand alone example of the Lightbox
7 3. as the RSF template for the image gallery tool
8 Note that the RSF ids throughout this template are used by the gallery tool and are only necessary when using RSF.-->
10 <html xmlns="http://www.w3.org/1999/xhtml"
\r
11 xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
\r
12 xmlns:aaa="http://www.w3.org/2005/07/aaa"
\r
13 xmlns:rsf="http://ponder.org.uk/rsf">
\r
16 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
17 <title>Fluid Lightbox</title>
\r
18 <link href="../css/Lightbox.css" rsf:id="scr=contribute-style" type="text/css" rel="stylesheet" media="all" />
20 <!-- These are the required javascript modules for the Lightbox
21 eventually to be replaced with a single build generated file -->
22 <script type="text/javascript" src="../js/jquery/jquery-1.2.1.js" rsf:id="scr=contribute-script"></script>
\r
23 <script type="text/javascript" src="../js/jquery.tabindex/jquery.tabindex.js" rsf:id="scr=contribute-script"></script>
24 <script type="text/javascript" src="../js/jquery.ui-1.0/ui.mouse.js" rsf:id="scr=contribute-script"></script>
25 <script type="text/javascript" src="../js/jquery.ui-1.0/ui.draggable.js" rsf:id="scr=contribute-script"></script>
26 <script type="text/javascript" src="../js/jquery.ui-1.0/ui.droppable.js" rsf:id="scr=contribute-script"></script>
27 <script type="text/javascript" src="../js/fluid/Fluid.js" rsf:id="scr=contribute-script"></script>
\r
28 <script type="text/javascript" src="../js/fluid/Reorderer.js" rsf:id="scr=contribute-script"></script>
\r
29 <script type="text/javascript" src="../js/fluid/Lightbox.js" rsf:id="scr=contribute-script"></script>
\r
31 <!-- These are test-time dependencies and will be removed at render time by RSF. -->
\r
32 <link href="../test/tests/TestStyles.css" type="text/css" rel="stylesheet" media="all" />
33 <script type="text/javascript" src="../test/jsunit/app/jsUnitCore.js"></script>
\r
34 <script type="text/javascript" src="../test/tests/LightboxTestConstants.js"></script>
\r
35 <script type="text/javascript" src="../test/tests/TestUtils.js"></script>
37 <!-- These are the jsUnit tests -->
\r
38 <script type="text/javascript" src="../test/tests/ItemInfosTests.js"></script>
39 <script type="text/javascript" src="../test/tests/GridLayoutHandlerTests.js"></script>
\r
40 <script type="text/javascript" src="../test/tests/LightboxTests.js"></script>
\r
41 <script type="text/javascript" src="../test/tests/LightboxPersistenceTests.js"></script>
\r
43 <!-- Ensure jQuery plays nice with other toolkits - must be called after all the javascript is loaded. -->
44 <script type="text/javascript" rsf:id="scr=contribute-script">
49 <p id="para1">This is the Lightbox demo page.</p>
\r
52 The Lightbox uses hidden inputs as the strategy for posting the item order back
53 to the server, therefore the orderables need to be enclosed in a form.
55 <form id="reorder-form">
\r
57 <!-- lightbox-parent is used for testing setup and teardown -->
58 <div rsf:id="lightbox:" id="lightbox-parent" >
61 Declare the thumbnails as an ARIA grid, that is single-selectable, writeable, and, when
\r
62 first receives focus, has the first thumbnail focussed. The ARIA state 'aaa:activedescendent'
\r
63 declares the id of the active thumbnail, and is provided here for documentation. The
\r
64 actual value is set by the JavaScript as the user navigates among the thumbnails.
\r
66 <div rsf:id="lightbox-temp-container:" id="gallery:::gallery-thumbs:::" tabindex="0" class="image-container"
\r
68 aaa:multiselectable="false"
\r
69 aaa:readonly="false"
\r
70 aaa:activedescendent="gallery:::gallery-thumbs:::lightbox-cell:0:"
\r
71 aaa:disabled="false">
\r
74 Orderable items are divs denoted by ids in the following form.
75 [lightbox-container-id] + lightbox-cell: + [index] + :
76 The initLightbox() function expects this format when attaching the javascript behaviour of the Lightbox.
78 <div rsf:id="lightbox-cell:" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:0:"
\r
79 role="wairole:gridcell"
\r
81 aaa:readonly="false"
\r
82 aaa:disabled="false"
\r
84 aaa:dropeffect="move">
\r
86 <div rsf:id="lightbox-client-cell:">
88 <!-- The RSF gallery contains the markup for this inner div in another template. -->
\r
89 <div class="image-inner-container">
\r
91 <a id="focus-element1" href="../images/Dragonfruit.jpg">
\r
92 <img id="fluid.img.first" src="../images/Dragonfruit.jpg" border="0" alt="Dragonfruit"/>
\r
95 <div class="caption image-title">
\r
96 <a href="../images/Dragonfruit.jpg" >Dragonfruit</a>
\r
101 This input is used for posting the new order back to the server.
\r
102 The value is the index of the thumbnail in a virtual array of thumbnails.
\r
103 That is, 'value="0"' denotes the 0'th thumbnail; 'value="1"' the 1st,
\r
106 <input rsf:id="reorder-index" id="gallery:::gallery-thumbs:::lightbox-cell:0:reorder-index" value="0" type="hidden"/>
\r
109 <!-- The remainder of the lightbox cells are used for the stand alone lightbox and the tests, not the RSF gallery -->
\r
110 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:1:"
\r
111 role="wairole:gridcell"
\r
112 aaa:selected="true"
\r
113 aaa:readonly="false"
\r
114 aaa:disabled="false"
\r
116 aaa:dropeffect="move">
\r
118 <div class="image-inner-container">
\r
119 <a href="../images/Kiwano.jpg" >
\r
120 <img id="fluid.img.second" src="../images/Kiwano.jpg" border="0" alt="Kiwano"/>
\r
123 <div class="caption image-title">
\r
124 <a href="../images/Kiwano.jpg" >Kiwano</a>
\r
127 <input id="gallery:::gallery-thumbs:::lightbox-cell:1:reorder-index" value="1" type="hidden"/>
\r
130 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:2:"
\r
131 role="wairole:gridcell"
\r
132 aaa:selected="true"
\r
133 aaa:readonly="false"
\r
134 aaa:disabled="false"
\r
136 aaa:dropeffect="move">
\r
138 <div class="image-inner-container">
\r
139 <a href="../images/Blackberry.jpg" >
\r
140 <img id="fluid.img.3" src="../images/Blackberry.jpg" border="0" alt="Blackberry"/>
\r
143 <div class="caption image-title">
\r
144 <a href="../images/Blackberry.jpg" >Blackberry</a>
\r
147 <input id="gallery:::gallery-thumbs:::lightbox-cell:2:reorder-index" value="2" type="hidden"/>
\r
150 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:3:"
\r
151 role="wairole:gridcell"
\r
152 aaa:selected="true"
\r
153 aaa:readonly="false"
\r
154 aaa:disabled="false"
\r
156 aaa:dropeffect="move">
\r
158 <div class="image-inner-container">
\r
159 <a href="../images/Cherry.jpg">
\r
160 <img id="fluid.img.4" src="../images/Cherry.jpg" border="0" alt="Cherry"/>
\r
163 <div class="caption image-title">
\r
164 <a href="../images/Cherry.jpg" >Cherry</a>
\r
167 <input id="gallery:::gallery-thumbs:::lightbox-cell:3:reorder-index" value="3" type="hidden"/>
\r
170 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:4:"
\r
171 role="wairole:gridcell"
\r
172 aaa:selected="true"
\r
173 aaa:readonly="false"
\r
174 aaa:disabled="false"
\r
175 aaa:grab="supported" aaa:dropeffect="move">
\r
177 <div class="image-inner-container">
\r
178 <a href="../images/Fig.jpg">
\r
179 <img id="fluid.img.5" src="../images/Fig.jpg" border="0" alt="Fig"/>
\r
182 <div class="caption image-title">
\r
183 <a href="../images/Fig.jpg" >Fig</a>
\r
186 <input id="gallery:::gallery-thumbs:::lightbox-cell:4:reorder-index" value="4" type="hidden"/>
\r
189 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:5:"
\r
190 role="wairole:gridcell"
\r
191 aaa:selected="true"
\r
192 aaa:readonly="false"
\r
193 aaa:disabled="false"
\r
194 aaa:grab="supported"
\r
195 aaa:dropeffect="move">
\r
197 <div class="image-inner-container">
\r
198 <a href="../images/Grapes.jpg">
\r
199 <img id="fluid.img.6" src="../images/Grapes.jpg" border="0" alt="Grapes"/>
\r
202 <div class="caption image-title">
\r
203 <a href="../images/Grapes.jpg" >Grapes</a>
\r
206 <input id="gallery:::gallery-thumbs:::lightbox-cell:5:reorder-index" value="5" type="hidden"/>
\r
209 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:6:"
\r
210 role="wairole:gridcell"
\r
211 aaa:selected="true"
\r
212 aaa:readonly="false"
\r
213 aaa:disabled="false"
\r
215 aaa:dropeffect="move">
\r
217 <div class="image-inner-container">
\r
218 <a href="../images/Kiwi.jpg" >
\r
219 <img id="fluid.img.7" src="../images/Kiwi.jpg" border="0" alt="Kiwi"/>
\r
222 <div class="caption image-title">
\r
223 <a href="../images/Kiwi.jpg" >Kiwi</a>
\r
226 <input id="gallery:::gallery-thumbs:::lightbox-cell:6:reorder-index" value="6" type="hidden"/>
\r
229 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:7:"
\r
230 role="wairole:gridcell"
\r
231 aaa:selected="true"
\r
232 aaa:readonly="false"
\r
233 aaa:disabled="false"
\r
235 aaa:dropeffect="move">
\r
237 <div class="image-inner-container">
\r
238 <a href="../images/Kumquat.jpg">
\r
239 <img id="fluid.img.8" src="../images/Kumquat.jpg" border="0" alt="Kumquat"/>
\r
242 <div class="caption image-title">
\r
243 <a href="../images/Kumquat.jpg" >Kumquat</a>
\r
246 <input id="gallery:::gallery-thumbs:::lightbox-cell:7:reorder-index" value="7" type="hidden"/>
\r
249 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:8:"
\r
250 role="wairole:gridcell"
\r
251 aaa:selected="true"
\r
252 aaa:readonly="false"
\r
253 aaa:disabled="false"
\r
255 aaa:dropeffect="move">
\r
257 <div class="image-inner-container">
\r
258 <a href="../images/Lemon.jpg">
\r
259 <img id="fluid.img.9" src="../images/Lemon.jpg" border="0" alt="Lemon"/>
\r
262 <div class="caption image-title">
\r
263 <a href="../images/Lemon.jpg" >Lemon</a>
\r
266 <input id="gallery:::gallery-thumbs:::lightbox-cell:8:reorder-index" value="8" type="hidden"/>
\r
269 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:9:"
\r
270 role="wairole:gridcell"
\r
271 aaa:selected="true"
\r
272 aaa:readonly="false"
\r
273 aaa:disabled="false"
\r
275 aaa:dropeffect="move">
\r
277 <div class="image-inner-container">
\r
278 <a href="../images/Orange.jpg">
\r
279 <img id="fluid.img.10" src="../images/Orange.jpg" border="0" alt="Orange"/>
\r
282 <div class="caption image-title">
\r
283 <a href="../images/Orange.jpg" >Orange</a>
\r
286 <input id="gallery:::gallery-thumbs:::lightbox-cell:9:reorder-index" value="9" type="hidden"/>
\r
289 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:10:"
\r
290 role="wairole:gridcell"
\r
291 aaa:selected="true"
\r
292 aaa:readonly="false"
\r
293 aaa:disabled="false"
\r
295 aaa:dropeffect="move">
\r
297 <div class="image-inner-container">
\r
298 <a href="../images/RedApple.jpg">
\r
299 <img id="fluid.img.11" src="../images/RedApple.jpg" border="0" alt="RedApple"/>
\r
302 <div class="caption image-title">
\r
303 <a href="../images/RedApple.jpg" >RedApple</a>
\r
306 <input id="gallery:::gallery-thumbs:::lightbox-cell:10:reorder-index" value="10" type="hidden"/>
\r
309 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:11:"
\r
310 role="wairole:gridcell"
\r
311 aaa:selected="true"
\r
312 aaa:readonly="false"
\r
313 aaa:disabled="false"
\r
315 aaa:dropeffect="move">
\r
317 <div class="image-inner-container">
\r
318 <a href="../images/Tamarillo.jpg">
\r
319 <img id="fluid.img.12" src="../images/Tamarillo.jpg" border="0" alt="Tamarillo"/>
\r
322 <div class="caption image-title">
\r
323 <a href="../images/Tamarillo.jpg" >Tamarillo</a>
\r
326 <input id="gallery:::gallery-thumbs:::lightbox-cell:11:reorder-index" value="11" type="hidden"/>
\r
329 <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:12:"
\r
330 role="wairole:gridcell"
\r
331 aaa:selected="true"
\r
332 aaa:readonly="false"
\r
333 aaa:disabled="false"
\r
334 aaa:grab="supported" aaa:dropeffect="move">
\r
336 <div class="image-inner-container">
\r
337 <a href="../images/Mangosteen.jpg">
\r
338 <img id="fluid.img.secondLast" src="../images/Mangosteen.jpg" border="0" alt="Mangosteen"/>
\r
341 <div class="caption image-title">
\r
342 <a href="../images/Mangosteen.jpg" >Mangosteen</a>
\r
345 <input id="gallery:::gallery-thumbs:::lightbox-cell:12:reorder-index" value="12" type="hidden"/>
\r
348 <div rsf:id="scr=ignore" class="float orderable-default orderable" id="gallery:::gallery-thumbs:::lightbox-cell:13:"
\r
349 role="wairole:gridcell"
\r
350 aaa:selected="true"
\r
351 aaa:readonly="false"
\r
352 aaa:disabled="false"
\r
354 aaa:dropeffect="move">
\r
356 <div class="image-inner-container">
\r
357 <a href="../images/Banana.jpg">
\r
358 <img id="fluid.img.last" src="../images/Banana.jpg" border="0" alt="Banana"/>
\r
361 <div class="caption image-title">
\r
362 <a href="../images/Banana.jpg" >Banana</a>
\r
365 <input id="gallery:::gallery-thumbs:::lightbox-cell:13:reorder-index" value="13" type="hidden"/>
\r
369 <!-- Attach the javascript functionality to the markup by using initLightbox() -->
\r
370 <script type="text/javascript" rsf:id="init-script">
\r
371 fluid.initLightbox ("gallery:::gallery-thumbs:::", "message-bundle:");
\r
375 <!-- Sample instruction message. In the RSF gallery, this is supplied by the server. -->
\r
376 <div id="message-bundle:" class="lightbox-instructions">
\r
377 <div class="lightbox-downarrow"></div><div id="message-bundle:thumbnailInstructions">
\r
378 View an image by pressing Enter. Move an image using CTRL+Arrow Key.