422bb20f9cc8647c331e146179ef351012739d2e
[infodrom/rico3] / examples / dotnet / photos.aspx
1 <%@ Page Language="VB" ResponseEncoding="iso-8859-1" %>\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>Find 100 <a href="http://www.flickr.com">Flickr</a> photos tagged with the keywords you type below (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