--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
+<html>\r
+<head>\r
+<title>Rico LiveGrid-Photo Example</title>\r
+\r
+<?php\r
+require "LoadRicoClient.php";\r
+?>\r
+<link href="../demo.css" type="text/css" rel="stylesheet" />\r
+\r
+<script type='text/javascript'>\r
+Rico.loadModule('LiveGridAjax','LiveGridMenu');\r
+\r
+var photoGrid, photoBuffer, imgctl, img_popup, animator;\r
+\r
+Rico.onLoad( function() {\r
+ imgctl=new Rico.TableColumn.image();\r
+ var opts = { \r
+ prefetchBuffer: false,\r
+ defaultWidth : 100,\r
+ useUnformattedColWidth:false,\r
+ headingSort : 'hover',\r
+ columnSpecs : [{control:imgctl,width:90},,,\r
+ {type:'datetime'},{width:200}]\r
+ };\r
+ photoBuffer=new Rico.Buffer.AjaxXML('flickrPhotos.php');\r
+ photoGrid=new Rico.LiveGrid ('photogrid', photoBuffer, opts);\r
+ photoGrid.menu=new Rico.GridMenu();\r
+ \r
+ // do something special when the mouse hovers over an image\r
+ for (var i=0; i<imgctl._img.length; i++) {\r
+ Rico.eventBind(imgctl._img[i],'mouseover',Rico.eventHandle(window,'img_mouseover'));\r
+ Rico.eventBind(imgctl._img[i],'mouseout',Rico.eventHandle(window,'img_mouseout'));\r
+ }\r
+ img_popup=document.getElementById('img_popup');\r
+});\r
+\r
+function img_mouseover(e) {\r
+ Rico.eventStop(e);\r
+ var elem=Rico.eventElement(e);\r
+ img_popup.style.display='block';\r
+ var imgPos=Rico.cumulativeOffset(elem);\r
+ img_popup.src=elem.src.replace(/_s\.jpg/,'_m.jpg');\r
+ img_popup.style.left=(imgPos.left+elem.offsetWidth+10)+'px';\r
+ var winHt=Rico.windowHeight();\r
+ window.status='winHt='+winHt+' imgTop='+imgPos.top\r
+ if (imgPos.top > winHt/2) {\r
+ img_popup.style.bottom=(winHt-imgPos.top-elem.offsetHeight)+'px';\r
+ img_popup.style.top='';\r
+ } else {\r
+ img_popup.style.top=(imgPos.top)+'px';\r
+ img_popup.style.bottom='';\r
+ }
+}\r
+\r
+function img_mouseout(e) {\r
+ Rico.eventStop(e);\r
+ img_popup.style.display='none';\r
+}\r
+\r
+function UpdateGrid() {\r
+ var tags=document.getElementById('tags').value;\r
+ if (tags) {\r
+ photoGrid.resetContents(false);\r
+ photoBuffer.fetchData=true; // force another XML fetch\r
+ photoBuffer.options.requestParameters=[{name:'tags',value:tags}];\r
+ photoGrid.filterHandler();\r
+ } else {\r
+ alert('Please enter one or more keywords separated by commas');\r
+ }\r
+}\r
+</script>\r
+\r
+<style type="text/css">\r
+.ricoLG_bottom div.ricoLG_cell { height:80px; } /* thumbnails are 75x75 pixels */\r
+#explanation * { font-size: 8pt; }\r
+</style>\r
+\r
+</head>\r
+\r
+<body>\r
+\r
+<table id='explanation' border='0' cellpadding='0' cellspacing='5' style='clear:both'><tr valign='top'><td>\r
+<form onsubmit='UpdateGrid(); return false;'>\r
+<p>Get <a href="http://www.flickr.com">Flickr</a> photos tagged with these keywords (separate words with commas):\r
+<p><input type='text' id='tags'>\r
+<input type='submit' value='Get Photos'>\r
+</form>\r
+</td><td>\r
+<p>Base Library: \r
+<script type='text/javascript'>\r
+document.write(Rico.Lib+' '+Rico.LibVersion);\r
+</script>\r
+<hr>\r
+When fetching data, this script issues an XMLHttpRequest to a proxy script which uses the Flickr API\r
+to process the query and format the response in the Rico LiveGrid XML format.\r
+<p>Try moving your cursor over each photo...\r
+</td>\r
+<td>\r
+<script type="text/javascript"><!--\r
+google_ad_client = "pub-7218597156507462";\r
+/* 125x125, created 5/11/09 */\r
+google_ad_slot = "9298106441";\r
+google_ad_width = 125;\r
+google_ad_height = 125;\r
+//-->\r
+</script>\r
+<script type="text/javascript"\r
+src="http://pagead2.googlesyndication.com/pagead/show_ads.js">\r
+</script>\r
+</td>\r
+</tr></table>\r
+\r
+<p class="ricoBookmark"><span id="photogrid_bookmark"> </span></p>\r
+<table id="photogrid" class="ricoLiveGrid" cellspacing="0" cellpadding="0">\r
+ <tr>\r
+ <th>Photo</th>\r
+ <th>Title</th>\r
+ <th>Owner</th>\r
+ <th>Date Taken</th>\r
+ <th>Tags</th>\r
+ </tr>\r
+</table>\r
+\r
+<img id='img_popup' style='display:none;position:absolute;'>\r
+\r
+</body>\r
+</html>\r
+\r
projects / infodrom / rico3 / blobdiff