mods/photo_album/fluid/component-templates/html/Lightbox.html

   1 <!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\r
   2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   3
   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.-->
   9       \r
  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
  14   \r
  15   <head>
  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" />
  19
  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
  30     \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>
  36
  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
  42
  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">
  45       jQuery.noConflict();
  46     </script>
  47   </head>\r
  48   <body>\r
  49     <p id="para1">This is the Lightbox demo page.</p>\r
  50
  51     <!--
  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.
  54     -->\r
  55     <form id="reorder-form">\r
  56
  57       <!-- lightbox-parent is used for testing setup and teardown -->
  58       <div rsf:id="lightbox:" id="lightbox-parent" >
  59
  60         <!--\r
  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
  65         -->\r
  66         <div rsf:id="lightbox-temp-container:" id="gallery:::gallery-thumbs:::" tabindex="0" class="image-container"\r
  67           role="wairole:grid"\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
  72
  73           <!--
  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.
  77           -->
  78           <div rsf:id="lightbox-cell:" class="float orderable-default" id="gallery:::gallery-thumbs:::lightbox-cell:0:" \r
  79             role="wairole:gridcell"\r
  80             aaa:selected="true"\r
  81             aaa:readonly="false"\r
  82             aaa:disabled="false"\r
  83             aaa:grab="supported"
  84             aaa:dropeffect="move">\r
  85         \r
  86             <div rsf:id="lightbox-client-cell:">
  87
  88               <!--  The RSF gallery contains the markup for this inner div in another template. -->\r
  89               <div class="image-inner-container">\r
  90               \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
  93                 </a>\r
  94               </div>\r
  95               <div class="caption image-title">\r
  96                 <a href="../images/Dragonfruit.jpg" >Dragonfruit</a>\r
  97               </div>\r
  98             </div>
  99           \r
 100             <!--  \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
 104               and so on.\r
 105             -->\r
 106             <input rsf:id="reorder-index" id="gallery:::gallery-thumbs:::lightbox-cell:0:reorder-index" value="0" type="hidden"/>\r
 107           </div>\r
 108
 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
 115             aaa:grab="supported"
 116             aaa:dropeffect="move">\r
 117             <div>\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
 121                 </a>\r
 122               </div>\r
 123               <div class="caption image-title">\r
 124                 <a href="../images/Kiwano.jpg" >Kiwano</a>\r
 125               </div>\r
 126             </div>\r
 127             <input id="gallery:::gallery-thumbs:::lightbox-cell:1:reorder-index" value="1" type="hidden"/>      \r
 128           </div>\r
 129               \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
 135                   aaa:grab="supported"
 136                   aaa:dropeffect="move">\r
 137                         <div>\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
 141                             </a>\r
 142                           </div>\r
 143                           <div class="caption image-title">\r
 144                             <a href="../images/Blackberry.jpg" >Blackberry</a>\r
 145                           </div>\r
 146                         </div>\r
 147                         <input id="gallery:::gallery-thumbs:::lightbox-cell:2:reorder-index" value="2" type="hidden"/>\r
 148                       </div>\r
 149       \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
 155                   aaa:grab="supported"
 156                   aaa:dropeffect="move">\r
 157                   <div>\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
 161                             </a>\r
 162                           </div>\r
 163                           <div class="caption image-title">\r
 164                             <a href="../images/Cherry.jpg" >Cherry</a>\r
 165                           </div>\r
 166                         </div>\r
 167                         <input id="gallery:::gallery-thumbs:::lightbox-cell:3:reorder-index" value="3" type="hidden"/>\r
 168                       </div>
 169       \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
 176                         <div>\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
 180                             </a>\r
 181                           </div>\r
 182                           <div class="caption image-title">\r
 183                             <a href="../images/Fig.jpg" >Fig</a>\r
 184                           </div>\r
 185                         </div>\r
 186                   <input id="gallery:::gallery-thumbs:::lightbox-cell:4:reorder-index" value="4" type="hidden"/>        \r
 187                       </div>
 188       \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
 196                         <div>\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
 200                             </a>\r
 201                           </div>\r
 202                           <div class="caption image-title">\r
 203                             <a href="../images/Grapes.jpg" >Grapes</a>\r
 204                           </div>\r
 205                         </div>\r
 206                   <input id="gallery:::gallery-thumbs:::lightbox-cell:5:reorder-index" value="5" type="hidden"/>\r
 207                       </div>
 208
 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
 214                   aaa:grab="supported"
 215                   aaa:dropeffect="move">\r
 216                         <div>\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
 220                             </a>\r
 221                           </div>\r
 222                           <div class="caption image-title">\r
 223                             <a href="../images/Kiwi.jpg" >Kiwi</a>\r
 224                           </div>\r
 225                         </div>\r
 226                         <input id="gallery:::gallery-thumbs:::lightbox-cell:6:reorder-index" value="6" type="hidden"/>\r
 227                       </div>
 228       \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
 234                   aaa:grab="supported"
 235                   aaa:dropeffect="move">\r
 236                         <div>\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
 240                             </a>\r
 241                           </div>\r
 242                           <div class="caption image-title">\r
 243                             <a href="../images/Kumquat.jpg" >Kumquat</a>\r
 244                           </div>\r
 245                         </div>\r
 246                         <input id="gallery:::gallery-thumbs:::lightbox-cell:7:reorder-index" value="7" type="hidden"/>\r
 247                       </div>
 248       \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
 254                   aaa:grab="supported"
 255                   aaa:dropeffect="move">\r
 256                         <div>\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
 260                             </a>\r
 261                           </div>\r
 262                           <div class="caption image-title">\r
 263                             <a href="../images/Lemon.jpg" >Lemon</a>\r
 264                           </div>\r
 265                         </div>\r
 266                         <input id="gallery:::gallery-thumbs:::lightbox-cell:8:reorder-index" value="8" type="hidden"/>\r
 267                       </div>
 268       \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
 274                   aaa:grab="supported"
 275                   aaa:dropeffect="move">\r
 276                         <div>\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
 280                             </a>\r
 281                           </div>\r
 282                           <div class="caption image-title">\r
 283                             <a href="../images/Orange.jpg" >Orange</a>\r
 284                           </div>\r
 285                         </div>\r
 286                         <input id="gallery:::gallery-thumbs:::lightbox-cell:9:reorder-index" value="9" type="hidden"/>\r
 287                       </div>
 288       \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
 294                   aaa:grab="supported"
 295                   aaa:dropeffect="move">\r
 296                         <div>\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
 300                             </a>\r
 301                           </div>\r
 302                           <div class="caption image-title">\r
 303                             <a href="../images/RedApple.jpg" >RedApple</a>\r
 304                           </div>\r
 305                         </div>\r
 306                         <input id="gallery:::gallery-thumbs:::lightbox-cell:10:reorder-index" value="10" type="hidden"/>\r
 307                       </div>
 308       \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
 314                   aaa:grab="supported"
 315                   aaa:dropeffect="move">\r
 316                         <div>\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
 320                             </a>\r
 321                           </div>\r
 322                           <div class="caption image-title">\r
 323                             <a href="../images/Tamarillo.jpg" >Tamarillo</a>\r
 324                           </div>\r
 325                         </div>\r
 326                         <input id="gallery:::gallery-thumbs:::lightbox-cell:11:reorder-index" value="11" type="hidden"/>\r
 327                       </div>
 328       \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
 335                         <div>\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
 339                             </a>\r
 340                           </div>\r
 341                           <div class="caption image-title">\r
 342                             <a href="../images/Mangosteen.jpg" >Mangosteen</a>\r
 343                           </div>\r
 344                         </div>\r
 345                         <input id="gallery:::gallery-thumbs:::lightbox-cell:12:reorder-index" value="12" type="hidden"/>\r
 346                       </div>
 347       \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
 353                   aaa:grab="supported"
 354                   aaa:dropeffect="move">\r
 355                         <div>\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
 359                             </a>\r
 360                           </div>\r
 361                           <div class="caption image-title">\r
 362                             <a href="../images/Banana.jpg" >Banana</a>\r
 363                           </div>\r
 364                         </div>\r
 365                         <input id="gallery:::gallery-thumbs:::lightbox-cell:13:reorder-index" value="13" type="hidden"/>\r
 366                       </div>\r
 367                     </div>
 368
 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
 372         </script>\r
 373       </div>
 374       \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.
 379         </div>\r
 380       </div>\r
 381     </form>\r
 382   </body>\r
 383 </html>\r