1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
4 <title>Rico LiveGrid-Photo Example</title>
\r
7 require "LoadRicoClient.php";
\r
9 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
11 <script type='text/javascript'>
\r
13 var photoGrid, photoBuffer, imgctl, img_popup, animator;
\r
15 Rico.onLoad( function() {
\r
16 imgctl=new Rico.TableColumn.image();
\r
18 prefetchBuffer: false,
\r
20 useUnformattedColWidth:false,
\r
21 headingSort : 'hover',
\r
22 columnSpecs : [{control:imgctl,width:90},,,
\r
23 {type:'datetime'},{width:200}]
\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
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
34 img_popup=document.getElementById('img_popup');
\r
37 function img_mouseover(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
50 img_popup.style.top=(imgPos.top)+'px';
\r
51 img_popup.style.bottom='';
\r
55 function img_mouseout(e) {
\r
57 img_popup.style.display='none';
\r
60 function UpdateGrid() {
\r
61 var tags=document.getElementById('tags').value;
\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
68 alert('Please enter one or more keywords separated by commas');
\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
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
90 <script type='text/javascript'>
\r
91 document.write(Rico.Lib+' '+Rico.LibVersion);
\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
100 require "info.php";
\r
105 <p class="ricoBookmark"><span id="photogrid_bookmark"> </span></p>
\r
106 <table id="photogrid" class="ricoLiveGrid" cellspacing="0" cellpadding="0">
\r
111 <th>Date Taken</th>
\r
116 <img id='img_popup' style='display:none;position:absolute;'>
\r