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 \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.AjaxLoadOnce('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