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