swat.obsolete/apps/qooxdoo-examples/example/Gallery_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10
  11   <style type="text/css">
  12 .qx_ui_embed_Gallery .galleryFrame{
  13   padding: 2px;
  14 }
  15
  16 .qx_ui_embed_Gallery .galleryCell{
  17   border: 1px solid #444;
  18   background: #fff;
  19   margin: 2px;
  20   float: left;
  21   overflow: hidden;
  22
  23   font-family: Tahoma, Verdana, sans-serif;
  24   font-size: 10px;
  25
  26   cursor: default;
  27
  28   -moz-user-select: none;
  29   user-select: none;
  30 }
  31
  32 .qx_ui_embed_Gallery .galleryCell img{
  33   vertical-align: bottom;
  34   display: block;
  35 }
  36
  37 .qx_ui_embed_Gallery .galleryCell .galleryTitle,
  38 .qx_ui_embed_Gallery .galleryCell .galleryComment{
  39   background: #eee;
  40   padding: 3px 6px;
  41   text-align: center;
  42   cursor: default;
  43   overflow: hidden;
  44   white-space: nowrap;
  45 }
  46
  47 .qx_ui_embed_Gallery .galleryCell .galleryTitle{
  48   border-bottom: 1px solid #aaa;
  49 }
  50
  51 .qx_ui_embed_Gallery .galleryCell .galleryComment{
  52   border-top: 1px solid #aaa;
  53 }
  54
  55 .qx_ui_embed_Gallery .galleryCell-Selected{
  56   background: #DCE8F6;
  57   border: 1px solid #2760A1;
  58 }
  59
  60 .qx_ui_embed_Gallery .galleryCell-Selected .galleryTitle,
  61 .qx_ui_embed_Gallery .galleryCell-Selected .galleryComment{
  62   background: #9BBFE7;
  63 }
  64
  65 .qx_ui_embed_Gallery .galleryCell-Selected .galleryTitle{
  66   border-bottom: 1px dotted #2760A1;
  67 }
  68
  69 .qx_ui_embed_Gallery .galleryCell-Selected .galleryComment{
  70   border-top: 1px dotted #2760A1;
  71 }
  72   </style>
  73 </head>
  74 <body>
  75   <script type="text/javascript" src="../../script/layout.js"></script>
  76
  77   <div id="demoDescription">
  78     <p>Test file for qx.ui.embed.Gallery</p>
  79   </div>
  80
  81   <script type="text/javascript">
  82     qx.core.Init.getInstance().defineMain(function()
  83     {
  84       var imgPath = qx.manager.object.AliasManager.getInstance().resolvePath("icon/64/chart.png");
  85
  86       var galleryList = [];
  87
  88       for (var i=0; i<100; i++)
  89       {
  90         galleryList.push({
  91           display : "bmzN9ci5",
  92           width : 350,
  93           height : 350,
  94           thumbWidth : 64,
  95           thumbHeight : 64,
  96           title : "gohome.png",
  97           timestamp : Math.random().toString(),
  98           comment : "Cool Comment",
  99           id : "7686191121780974-10682",
 100           src : imgPath
 101         });
 102       };
 103
 104       var gallery = new qx.ui.embed.Gallery(galleryList);
 105
 106       gallery.setLeft(20);
 107       gallery.setRight(335);
 108       gallery.setTop(48);
 109       gallery.setBottom(48);
 110       gallery.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
 111
 112       qx.ui.core.ClientDocument.getInstance().add(gallery);
 113     });
 114   </script>
 115 </body>
 116 </html>