git.infodrom.org Git - infodrom/rico3/blob - examples/dotnet/photos.aspx

   1 <%@ Page Language="VB" ResponseEncoding="iso-8859-1" Debug="true" %>\r
   2 <%@ Register TagPrefix="Rico" TagName="LiveGrid" Src="../../plugins/dotnet/LiveGrid.ascx" %>\r
   3 <%@ Register TagPrefix="Rico" TagName="Column" Src="../../plugins/dotnet/GridColumn.ascx" %>\r
   4 <%@ Register TagPrefix="My" TagName="LoadRicoClient" Src="LoadRicoClient.ascx" %>\r
   5 \r
   6 \r
   7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   8 <html>\r
   9 <head>\r
  10 <title>Rico LiveGrid-Photo Example</title>\r
  11 \r
  12 <My:LoadRicoClient id='initlibs' runat='server' />\r
  13 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
  14 \r
  15 <script type='text/javascript'>\r
  16 var img_popup;\r
  17 \r
  18 function photogrid_InitComplete() {\r
  19   // do something special when the mouse hovers over an image\r
  20   var c0=photogrid['grid'].columns[0];\r
  21   for (var i=0; i<c0._img.length; i++) {\r
  22     Rico.eventBind(c0._img[i],'mouseover',Rico.eventHandle(window,'img_mouseover'));\r
  23     Rico.eventBind(c0._img[i],'mouseout',Rico.eventHandle(window,'img_mouseout'));\r
  24   }\r
  25   img_popup=document.getElementById('img_popup');\r
  26 }\r
  27 \r
  28 function img_mouseover(e) {\r
  29   Rico.eventStop(e);\r
  30   var elem=Rico.eventElement(e);\r
  31   img_popup.style.display='block';\r
  32   var imgPos=Rico.cumulativeOffset(elem);\r
  33   img_popup.src=elem.src.replace(/_s\.jpg/,'_m.jpg');\r
  34   img_popup.style.left=(imgPos.left+elem.offsetWidth+10)+'px';\r
  35   var winHt=Rico.windowHeight();\r
  36   window.status='winHt='+winHt+' imgTop='+imgPos.top\r
  37   if (imgPos.top > winHt/2) {\r
  38     img_popup.style.bottom=(winHt-imgPos.top-elem.offsetHeight)+'px';\r
  39     img_popup.style.top='';\r
  40   } else {\r
  41     img_popup.style.top=(imgPos.top)+'px';\r
  42     img_popup.style.bottom='';\r
  43   }\r
  44 }\r
  45 \r
  46 function img_mouseout(e) {\r
  47   Rico.eventStop(e);\r
  48   img_popup.style.display='none';\r
  49 }\r
  50 \r
  51 function UpdateGrid() {\r
  52   var tags=$('tags').value;\r
  53   if (tags) {\r
  54     photogrid['buffer'].options.requestParameters=['tags='+tags];\r
  55     photogrid['grid'].filterHandler();\r
  56   } else {\r
  57     alert('Please enter one or more keywords separated by commas');\r
  58   }\r
  59 }\r
  60 </script>\r
  61 \r
  62 <style type="text/css">\r
  63 .ricoLG_bottom div.ricoLG_cell { height:80px; }  /* thumbnails are 75x75 pixels */\r
  64 #explanation * { font-size: 8pt; }\r
  65 </style>\r
  66 \r
  67 </head>\r
  68 \r
  69 <body>\r
  70 \r
  71 <div id='explanation'><form onsubmit='UpdateGrid(); return false;'>\r
  72 <p>Get <a href="http://www.flickr.com">Flickr</a> photos tagged with these keywords (separate words with commas):\r
  73 <p><input type='text' id='tags'>\r
  74 <input type='submit' value='Get Photos'>\r
  75 <p>Then try moving your cursor over each photo...\r
  76 </form></div>\r
  77 \r
  78 <Rico:LiveGrid runat='server' id='photogrid' prefetchBuffer='false' dataProvider='flickrPhotos.aspx' headingSort='hover'>\r
  79 <GridColumns>\r
  80   <Rico:Column runat='server' heading='Photo' width='90' control='new Rico.TableColumn.image()' />\r
  81   <Rico:Column runat='server' heading='Title' width='100' />\r
  82   <Rico:Column runat='server' heading='Owner' width='100' />\r
  83   <Rico:Column runat='server' heading='Date Taken' width='100' DataType='datetime' />\r
  84   <Rico:Column runat='server' heading='Tags' width='200' />\r
  85 </GridColumns>\r
  86 </Rico:LiveGrid>\r
  87 \r
  88 <img id='img_popup' style='display:none;position:absolute;'>\r
  89 \r
  90 </body>\r
  91 </html>\r
  92 \r