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