.net server control is almost feature complete and functional. All .net examples...
[infodrom/rico3] / examples / php / photos.php
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
2 <html>\r
3 <head>\r
4 <title>Rico LiveGrid-Photo Example</title>\r
5 \r
6 <?php\r
7 require "LoadRicoClient.php";\r
8 ?>\r
9 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
10 \r
11 <script type='text/javascript'>\r
12 \r
13 var photoGrid, photoBuffer, imgctl, img_popup, animator;\r
14 \r
15 Rico.onLoad( function() {\r
16   imgctl=new Rico.TableColumn.image();\r
17   var opts = {  \r
18     prefetchBuffer: false,\r
19     defaultWidth  : 100,\r
20     useUnformattedColWidth:false,\r
21     headingSort   : 'hover',\r
22     columnSpecs   : [{control:imgctl,width:90},,,\r
23                      {type:'datetime'},{width:200}]\r
24   };\r
25   photoBuffer=new Rico.Buffer.AjaxXML('flickrPhotos.php');\r
26   photoGrid=new Rico.LiveGrid ('photogrid', photoBuffer, opts);\r
27   photoGrid.menu=new Rico.GridMenu();\r
28   \r
29   // do something special when the mouse hovers over an image\r
30   for (var i=0; i<imgctl._img.length; i++) {\r
31     Rico.eventBind(imgctl._img[i],'mouseover',Rico.eventHandle(window,'img_mouseover'));\r
32     Rico.eventBind(imgctl._img[i],'mouseout',Rico.eventHandle(window,'img_mouseout'));\r
33   }\r
34   img_popup=Rico.$('img_popup');\r
35 });\r
36 \r
37 function img_mouseover(e) {\r
38   Rico.eventStop(e);\r
39   var elem=Rico.eventElement(e);\r
40   img_popup.style.display='block';\r
41   var imgPos=Rico.cumulativeOffset(elem);\r
42   img_popup.src=elem.src.replace(/_s\.jpg/,'_m.jpg');\r
43   img_popup.style.left=(imgPos.left+elem.offsetWidth+10)+'px';\r
44   var winHt=Rico.windowHeight();\r
45   window.status='winHt='+winHt+' imgTop='+imgPos.top\r
46   if (imgPos.top > winHt/2) {\r
47     img_popup.style.bottom=(winHt-imgPos.top-elem.offsetHeight)+'px';\r
48     img_popup.style.top='';\r
49   } else {\r
50     img_popup.style.top=(imgPos.top)+'px';\r
51     img_popup.style.bottom='';\r
52   }
53 }\r
54 \r
55 function img_mouseout(e) {\r
56   Rico.eventStop(e);\r
57   img_popup.style.display='none';\r
58 }\r
59 \r
60 function UpdateGrid() {\r
61   var tags=Rico.$('tags').value;\r
62   if (tags) {\r
63     photoGrid.resetContents(false);\r
64     photoBuffer.fetchData=true;  // force another XML fetch\r
65     photoBuffer.options.requestParameters=[{name:'tags',value:tags}];\r
66     photoGrid.filterHandler();\r
67   } else {\r
68     alert('Please enter one or more keywords separated by commas');\r
69   }\r
70 }\r
71 </script>\r
72 \r
73 <style type="text/css">\r
74 .ricoLG_bottom div.ricoLG_cell { height:80px; }  /* thumbnails are 75x75 pixels */\r
75 #explanation * { font-size: 8pt; }\r
76 </style>\r
77 \r
78 </head>\r
79 \r
80 <body>\r
81 \r
82 <table id='explanation' border='0' cellpadding='0' cellspacing='5' style='clear:both'><tr valign='top'><td>\r
83 <form onsubmit='UpdateGrid(); return false;'>\r
84 <p>Get <a href="http://www.flickr.com">Flickr</a> photos tagged with these keywords (separate words with commas):\r
85 <p><input type='text' id='tags'>\r
86 <input type='submit' value='Get Photos'>\r
87 </form>\r
88 </td><td>\r
89 <p>Base Library: \r
90 <script type='text/javascript'>\r
91 document.write(Rico.Lib+' '+Rico.LibVersion);\r
92 </script>\r
93 <hr>\r
94 When fetching data, this script issues an XMLHttpRequest to a proxy script which uses the Flickr API\r
95 to process the query and format the response in the Rico LiveGrid XML format.\r
96 <p>Try moving your cursor over each photo...\r
97 </td>\r
98 <td>\r
99 <?php\r
100 require "info.php";\r
101 ?>\r
102 </td>\r
103 </tr></table>\r
104 \r
105 <p class="ricoBookmark"><span id="photogrid_bookmark">&nbsp;</span></p>\r
106 <table id="photogrid" class="ricoLiveGrid" cellspacing="0" cellpadding="0">\r
107   <tr>\r
108           <th>Photo</th>\r
109           <th>Title</th>\r
110           <th>Owner</th>\r
111           <th>Date Taken</th>\r
112           <th>Tags</th>\r
113   </tr>\r
114 </table>\r
115 \r
116 <img id='img_popup' style='display:none;position:absolute;'>\r
117 \r
118 </body>\r
119 </html>\r
120 \r