+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\r
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
-
-<!-- This is a multi purpose file used for:
- 1. running jsUnit tests
- 2. as a stand alone example of the Lightbox
- 3. as the RSF template for the image gallery tool
- Note that the RSF ids throughout this template are used by the gallery tool and are only necessary when using RSF.-->
- \r
-<html xmlns="http://www.w3.org/1999/xhtml" \r
- xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"\r
- xmlns:aaa="http://www.w3.org/2005/07/aaa"\r
- xmlns:rsf="http://ponder.org.uk/rsf">\r
- \r
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
- <title>Fluid Lightbox</title>\r
- <link href="../css/Lightbox.css" rsf:id="scr=contribute-style" type="text/css" rel="stylesheet" media="all" />
-
- <!-- These are the required javascript modules for the Lightbox
- eventually to be replaced with a single build generated file -->
- <script type="text/javascript" src="../js/jquery/jquery-1.2.1.js" rsf:id="scr=contribute-script"></script>\r
- <script type="text/javascript" src="../js/jquery.tabindex/jquery.tabindex.js" rsf:id="scr=contribute-script"></script>
- <script type="text/javascript" src="../js/jquery.ui-1.0/ui.mouse.js" rsf:id="scr=contribute-script"></script>
- <script type="text/javascript" src="../js/jquery.ui-1.0/ui.draggable.js" rsf:id="scr=contribute-script"></script>
- <script type="text/javascript" src="../js/jquery.ui-1.0/ui.droppable.js" rsf:id="scr=contribute-script"></script>
- <script type="text/javascript" src="../js/fluid/Fluid.js" rsf:id="scr=contribute-script"></script>\r
- <script type="text/javascript" src="../js/fluid/Reorderer.js" rsf:id="scr=contribute-script"></script>\r
- <script type="text/javascript" src="../js/fluid/Lightbox.js" rsf:id="scr=contribute-script"></script>\r
- \r
- <!-- These are test-time dependencies and will be removed at render time by RSF. -->\r
- <link href="../test/tests/TestStyles.css" type="text/css" rel="stylesheet" media="all" />
- <script type="text/javascript" src="../test/jsunit/app/jsUnitCore.js"></script>\r
- <script type="text/javascript" src="../test/tests/LightboxTestConstants.js"></script>\r
- <script type="text/javascript" src="../test/tests/TestUtils.js"></script>
-
- <!-- These are the jsUnit tests -->\r
- <script type="text/javascript" src="../test/tests/ItemInfosTests.js"></script>
- <script type="text/javascript" src="../test/tests/GridLayoutHandlerTests.js"></script>\r
- <script type="text/javascript" src="../test/tests/LightboxTests.js"></script> \r
- <script type="text/javascript" src="../test/tests/LightboxPersistenceTests.js"></script> \r
-
- <!-- Ensure jQuery plays nice with other toolkits - must be called after all the javascript is loaded. -->
- <script type="text/javascript" rsf:id="scr=contribute-script">
- jQuery.noConflict();
- </script>
- </head>\r
- <body>\r
- <p id="para1">This is the Lightbox demo page.</p>\r
-
- <!--
- The Lightbox uses hidden inputs as the strategy for posting the item order back
- to the server, therefore the orderables need to be enclosed in a form.
- -->\r
- <form id="reorder-form">\r
-
- <!-- lightbox-parent is used for testing setup and teardown -->
- <div rsf:id="lightbox:" id="lightbox-parent" >
-
- <!--\r
- Declare the thumbnails as an ARIA grid, that is single-selectable, writeable, and, when\r
- first receives focus, has the first thumbnail focussed. The ARIA state 'aaa:activedescendent'\r
- declares the id of the active thumbnail, and is provided here for documentation. The\r
- actual value is set by the JavaScript as the user navigates among the thumbnails.\r
- -->\r
- <div rsf:id="lightbox-temp-container:" id="gallery:::gallery-thumbs:::" tabindex="0" class="image-container"\r
- role="wairole:grid"\r
- aaa:multiselectable="false"\r
- aaa:readonly="false"\r
- aaa:activedescendent="gallery:::gallery-thumbs:::lightbox-cell:0:"\r
- aaa:disabled="false">\r
-
- <!--
- Orderable items are divs denoted by ids in the following form.
- [lightbox-container-id] + lightbox-cell: + [index] + :
- The initLightbox() function expects this format when attaching the javascript behaviour of the Lightbox.
- -->
- <div rsf:id="lightbox-cell:" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:0:" \r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- \r
- <div rsf:id="lightbox-client-cell:">
-
- <!-- The RSF gallery contains the markup for this inner div in another template. -->\r
- <div class="image-inner-container">\r
- \r
- <a id="focus-element1" href="../images/Dragonfruit.jpg">\r
- <img id="fluid.img.first" src="../images/Dragonfruit.jpg" border="0" alt="Dragonfruit"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Dragonfruit.jpg" >Dragonfruit</a>\r
- </div>\r
- </div>
- \r
- <!-- \r
- This input is used for posting the new order back to the server.\r
- The value is the index of the thumbnail in a virtual array of thumbnails.\r
- That is, 'value="0"' denotes the 0'th thumbnail; 'value="1"' the 1st,\r
- and so on.\r
- -->\r
- <input rsf:id="reorder-index" id="gallery:::gallery-thumbs:::lightbox-cell:0:reorder-index" value="0" type="hidden"/>\r
- </div>\r
-
- <!-- The remainder of the lightbox cells are used for the stand alone lightbox and the tests, not the RSF gallery -->\r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:1:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Kiwano.jpg" >\r
- <img id="fluid.img.second" src="../images/Kiwano.jpg" border="0" alt="Kiwano"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Kiwano.jpg" >Kiwano</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:1:reorder-index" value="1" type="hidden"/> \r
- </div>\r
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:2:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Blackberry.jpg" >\r
- <img id="fluid.img.3" src="../images/Blackberry.jpg" border="0" alt="Blackberry"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Blackberry.jpg" >Blackberry</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:2:reorder-index" value="2" type="hidden"/>\r
- </div>\r
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:3:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Cherry.jpg">\r
- <img id="fluid.img.4" src="../images/Cherry.jpg" border="0" alt="Cherry"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Cherry.jpg" >Cherry</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:3:reorder-index" value="3" type="hidden"/>\r
- </div>
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:4:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported" aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Fig.jpg">\r
- <img id="fluid.img.5" src="../images/Fig.jpg" border="0" alt="Fig"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Fig.jpg" >Fig</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:4:reorder-index" value="4" type="hidden"/> \r
- </div>
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:5:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"\r
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Grapes.jpg">\r
- <img id="fluid.img.6" src="../images/Grapes.jpg" border="0" alt="Grapes"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Grapes.jpg" >Grapes</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:5:reorder-index" value="5" type="hidden"/>\r
- </div>
-
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:6:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Kiwi.jpg" >\r
- <img id="fluid.img.7" src="../images/Kiwi.jpg" border="0" alt="Kiwi"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Kiwi.jpg" >Kiwi</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:6:reorder-index" value="6" type="hidden"/>\r
- </div>
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:7:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Kumquat.jpg">\r
- <img id="fluid.img.8" src="../images/Kumquat.jpg" border="0" alt="Kumquat"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Kumquat.jpg" >Kumquat</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:7:reorder-index" value="7" type="hidden"/>\r
- </div>
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:8:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Lemon.jpg">\r
- <img id="fluid.img.9" src="../images/Lemon.jpg" border="0" alt="Lemon"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Lemon.jpg" >Lemon</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:8:reorder-index" value="8" type="hidden"/>\r
- </div>
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:9:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Orange.jpg">\r
- <img id="fluid.img.10" src="../images/Orange.jpg" border="0" alt="Orange"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Orange.jpg" >Orange</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:9:reorder-index" value="9" type="hidden"/>\r
- </div>
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:10:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/RedApple.jpg">\r
- <img id="fluid.img.11" src="../images/RedApple.jpg" border="0" alt="RedApple"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/RedApple.jpg" >RedApple</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:10:reorder-index" value="10" type="hidden"/>\r
- </div>
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:11:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Tamarillo.jpg">\r
- <img id="fluid.img.12" src="../images/Tamarillo.jpg" border="0" alt="Tamarillo"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Tamarillo.jpg" >Tamarillo</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:11:reorder-index" value="11" type="hidden"/>\r
- </div>
- \r
- <div rsf:id="scr=ignore" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:12:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported" aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Mangosteen.jpg">\r
- <img id="fluid.img.secondLast" src="../images/Mangosteen.jpg" border="0" alt="Mangosteen"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Mangosteen.jpg" >Mangosteen</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:12:reorder-index" value="12" type="hidden"/>\r
- </div>
- \r
- <div rsf:id="scr=ignore" class="float orderable-default orderable" id="gallery:::gallery-thumbs:::lightbox-cell:13:"\r
- role="wairole:gridcell"\r
- aaa:selected="true"\r
- aaa:readonly="false"\r
- aaa:disabled="false"\r
- aaa:grab="supported"
- aaa:dropeffect="move">\r
- <div>\r
- <div class="image-inner-container">\r
- <a href="../images/Banana.jpg">\r
- <img id="fluid.img.last" src="../images/Banana.jpg" border="0" alt="Banana"/>\r
- </a>\r
- </div>\r
- <div class="caption image-title">\r
- <a href="../images/Banana.jpg" >Banana</a>\r
- </div>\r
- </div>\r
- <input id="gallery:::gallery-thumbs:::lightbox-cell:13:reorder-index" value="13" type="hidden"/>\r
- </div>\r
- </div>
-
- <!-- Attach the javascript functionality to the markup by using initLightbox() -->\r
- <script type="text/javascript" rsf:id="init-script">\r
- fluid.initLightbox ("gallery:::gallery-thumbs:::", "message-bundle:");\r
- </script>\r
- </div>
- \r
- <!-- Sample instruction message. In the RSF gallery, this is supplied by the server. -->\r
- <div id="message-bundle:" class="lightbox-instructions">\r
- <div class="lightbox-downarrow"></div><div id="message-bundle:thumbnailInstructions">\r
- View an image by pressing Enter. Move an image using CTRL+Arrow Key.
- </div>\r
- </div>\r
- </form>\r
- </body>\r
-</html>\r
projects / atutor.git / blobdiff