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. as a stand alone example of the Lightbox
6 2. as the RSF template for the image gallery tool
7 Note that the RSF ids throughout this template are used by the gallery tool and are only necessary when using RSF.-->
9 <html xmlns="http://www.w3.org/1999/xhtml"
\r
10 xmlns:rsf="http://ponder.org.uk/rsf">
\r
13 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
14 <title>Fluid Image Reorderer</title>
\r
15 <link href="../../../framework/fss/css/fss-reset.css" type="text/css" rel="stylesheet" media="all" />
\r
16 <link href="../css/Reorderer.css" rsf:id="scr=contribute-style" type="text/css" rel="stylesheet" media="all" />
\r
17 <link href="../css/ImageReorderer.css" rsf:id="scr=contribute-style" type="text/css" rel="stylesheet" media="all" />
19 <!-- Required javascript modules for the Image Reorderer which can be replaced with the build generated file Fluid-all.js -->
20 <script type="text/javascript" src="../../../lib/jquery/core/js/jquery.js" rsf:id="scr=contribute-script"></script>
\r
21 <script type="text/javascript" src="../../../lib/jquery/ui/js/ui.core.js" rsf:id="scr=contribute-script"></script>
\r
22 <script type="text/javascript" src="../../../lib/jquery/ui/js/ui.draggable.js" rsf:id="scr=contribute-script"></script>
\r
23 <script type="text/javascript" src="../../../framework/core/js/jquery.keyboard-a11y.js" rsf:id="scr=contribute-script"></script>
24 <script type="text/javascript" src="../../../framework/core/js/Fluid.js" rsf:id="scr=contribute-script"></script>
\r
25 <script type="text/javascript" src="../../../framework/core/js/FluidDOMUtilities.js" rsf:id="scr=contribute-script"></script>
\r
26 <script type="text/javascript" src="../../reorderer/js/GeometricManager.js" rsf:id="scr=contribute-script"></script>
\r
27 <script type="text/javascript" src="../../reorderer/js/Reorderer.js" rsf:id="scr=contribute-script"></script>
\r
28 <script type="text/javascript" src="../../reorderer/js/ImageReorderer.js" rsf:id="scr=contribute-script"></script>
\r
30 <!-- Ensure jQuery plays nice with other toolkits - must be called after all the javascript is loaded. -->
31 <script type="text/javascript" rsf:id="scr=contribute-script">
36 <p id="para1">This is the Image Reorderer demo page.</p>
\r
39 The Lightbox uses hidden inputs as the strategy for posting the item order back
40 to the server, therefore the orderables need to be enclosed in a form.
42 <form id="reorder-form">
\r
44 <!-- lightbox-parent is used for testing setup and teardown -->
45 <div rsf:id="lightbox:" id="lightbox-parent" >
\r
46 <div rsf:id="lightbox-temp-container:" id="gallery:::gallery-thumbs:::" class="fl-reorderer-image-container" tabindex="2">
\r
49 Orderable items are divs denoted by ids in the following form.
50 [lightbox-container-id] + lightbox-cell: + [index] + :
51 The createLightboxFromId() function expects this format when attaching the javascript behaviour of the Lightbox.
53 <div rsf:id="lightbox-cell:" id="gallery:::gallery-thumbs:::lightbox-cell:0:">
\r
55 <div rsf:id="lightbox-client-cell:">
57 <!-- The RSF gallery contains the markup for this inner div in another template. -->
\r
58 <div class="fl-reorderer-image-inner-container">
\r
60 <a id="focus-element1" href="../images/Dragonfruit.jpg">
\r
61 <img id="fluid.img.first" src="../images/Dragonfruit.jpg" alt="Dragonfruit"/>
\r
64 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
65 <a href="../images/Dragonfruit.jpg" >Dragonfruit</a>
\r
70 This input is used for posting the new order back to the server.
\r
71 The value is the index of the thumbnail in a virtual array of thumbnails.
\r
72 That is, 'value="0"' denotes the 0'th thumbnail; 'value="1"' the 1st,
\r
75 <input rsf:id="reorder-index" id="gallery:::gallery-thumbs:::lightbox-cell:0:reorder-index" value="0" type="hidden"/>
\r
78 <!-- The remainder of the lightbox cells are used for the stand alone lightbox and the tests, not the RSF gallery -->
\r
79 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:1:">
\r
81 <div class="fl-reorderer-image-inner-container">
\r
82 <a href="../images/Kiwano.jpg" >
\r
83 <img id="fluid.img.second" src="../images/Kiwano.jpg" alt="Kiwano"/>
\r
86 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
87 <a href="../images/Kiwano.jpg" >Kiwano</a>
\r
90 <input id="gallery:::gallery-thumbs:::lightbox-cell:1:reorder-index" value="1" type="hidden"/>
\r
93 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:2:">
\r
95 <div class="fl-reorderer-image-inner-container">
\r
96 <a href="../images/Blackberry.jpg" >
\r
97 <img id="fluid.img.3" src="../images/Blackberry.jpg" alt="Blackberry"/>
\r
100 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
101 <a href="../images/Blackberry.jpg" >Blackberry</a>
\r
104 <input id="gallery:::gallery-thumbs:::lightbox-cell:2:reorder-index" value="2" type="hidden"/>
\r
107 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:3:">
\r
109 <div class="fl-reorderer-image-inner-container">
\r
110 <a href="../images/Cherry.jpg">
\r
111 <img id="fluid.img.4" src="../images/Cherry.jpg" alt="Cherry"/>
\r
114 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
115 <a href="../images/Cherry.jpg" >Cherry</a>
\r
118 <input id="gallery:::gallery-thumbs:::lightbox-cell:3:reorder-index" value="3" type="hidden"/>
\r
121 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:4:">
\r
123 <div class="fl-reorderer-image-inner-container">
\r
124 <a href="../images/Fig.jpg">
\r
125 <img id="fluid.img.5" src="../images/Fig.jpg" alt="Fig"/>
\r
128 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
129 <a href="../images/Fig.jpg" >Fig</a>
\r
132 <input id="gallery:::gallery-thumbs:::lightbox-cell:4:reorder-index" value="4" type="hidden"/>
\r
135 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:5:">
\r
137 <div class="fl-reorderer-image-inner-container">
\r
138 <a href="../images/Grapes.jpg">
\r
139 <img id="fluid.img.6" src="../images/Grapes.jpg" alt="Grapes"/>
\r
142 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
143 <a href="../images/Grapes.jpg" >Grapes</a>
\r
146 <input id="gallery:::gallery-thumbs:::lightbox-cell:5:reorder-index" value="5" type="hidden"/>
\r
149 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:6:">
\r
151 <div class="fl-reorderer-image-inner-container">
\r
152 <a href="../images/Kiwi.jpg" >
\r
153 <img id="fluid.img.7" src="../images/Kiwi.jpg" alt="Kiwi"/>
\r
156 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
157 <a href="../images/Kiwi.jpg" >Kiwi</a>
\r
160 <input id="gallery:::gallery-thumbs:::lightbox-cell:6:reorder-index" value="6" type="hidden"/>
\r
163 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:7:">
\r
165 <div class="fl-reorderer-image-inner-container">
\r
166 <a href="../images/Kumquat.jpg">
\r
167 <img id="fluid.img.8" src="../images/Kumquat.jpg" alt="Kumquat"/>
\r
170 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
171 <a href="../images/Kumquat.jpg" >Kumquat</a>
\r
174 <input id="gallery:::gallery-thumbs:::lightbox-cell:7:reorder-index" value="7" type="hidden"/>
\r
177 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:8:">
\r
179 <div class="fl-reorderer-image-inner-container">
\r
180 <a href="../images/Lemon.jpg">
\r
181 <img id="fluid.img.9" src="../images/Lemon.jpg" alt="Lemon"/>
\r
184 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
185 <a href="../images/Lemon.jpg" >Lemon</a>
\r
188 <input id="gallery:::gallery-thumbs:::lightbox-cell:8:reorder-index" value="8" type="hidden"/>
\r
191 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:9:">
\r
193 <div class="fl-reorderer-image-inner-container">
\r
194 <a href="../images/Orange.jpg">
\r
195 <img id="fluid.img.10" src="../images/Orange.jpg" alt="Orange"/>
\r
198 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
199 <a href="../images/Orange.jpg" >Orange</a>
\r
202 <input id="gallery:::gallery-thumbs:::lightbox-cell:9:reorder-index" value="9" type="hidden"/>
\r
205 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:10:">
\r
207 <div class="fl-reorderer-image-inner-container">
\r
208 <a href="../images/RedApple.jpg">
\r
209 <img id="fluid.img.11" src="../images/RedApple.jpg" alt="RedApple"/>
\r
212 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
213 <a href="../images/RedApple.jpg" >RedApple</a>
\r
216 <input id="gallery:::gallery-thumbs:::lightbox-cell:10:reorder-index" value="10" type="hidden"/>
\r
219 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:11:">
\r
221 <div class="fl-reorderer-image-inner-container">
\r
222 <a href="../images/Tamarillo.jpg">
\r
223 <img id="fluid.img.12" src="../images/Tamarillo.jpg" alt="Tamarillo"/>
\r
226 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
227 <a href="../images/Tamarillo.jpg" >Tamarillo</a>
\r
230 <input id="gallery:::gallery-thumbs:::lightbox-cell:11:reorder-index" value="11" type="hidden"/>
\r
233 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:12:">
\r
235 <div class="fl-reorderer-image-inner-container">
\r
236 <a href="../images/Mangosteen.jpg">
\r
237 <img id="fluid.img.secondLast" src="../images/Mangosteen.jpg" alt="Mangosteen"/>
\r
240 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
241 <a href="../images/Mangosteen.jpg" >Mangosteen</a>
\r
244 <input id="gallery:::gallery-thumbs:::lightbox-cell:12:reorder-index" value="12" type="hidden"/>
\r
247 <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:13:">
\r
249 <div class="fl-reorderer-image-inner-container">
\r
250 <a href="../images/Banana.jpg">
\r
251 <img id="fluid.img.last" src="../images/Banana.jpg" alt="Banana"/>
\r
254 <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
\r
255 <a href="../images/Banana.jpg" >Banana</a>
\r
258 <input id="gallery:::gallery-thumbs:::lightbox-cell:13:reorder-index" value="13" type="hidden"/>
\r
262 <!-- Attach the javascript functionality to the markup by using createLightboxFromId() -->
\r
263 <script type="text/javascript" rsf:id="init-script">
\r
264 fluid.reorderImages("[id='gallery:::gallery-thumbs:::']");
\r
268 <!-- Sample instruction message. In the RSF gallery, this is supplied by the server. -->
\r
269 <div class="fl-reorderer-instructions">
\r
270 <div class="fl-reorderer-screen-reader-instructions" tabindex="1">Image Reorderer: To use the keyboard:
\r
271 Screen reader users turn off virtual cursor (insert + z).
\r
272 Select an image using i, k, m or j.
\r
273 Move an image using CTRL + i, k, m or j.
\r
274 View an image by pressing Enter.</div>
\r
275 <div class="fl-reorderer-downarrow"></div>
\r
276 <div tabindex="-1">
\r
277 To use the keyboard:<br/>
\r
278 Select an image using i, k, m or j, or the arrow keys.<br/>
\r
279 View an image by pressing Enter.<br/>
\r
280 Move an image using CTRL + a direction key.