1 <%@ Page Language="VB" ResponseEncoding="iso-8859-1" %>
\r
2 <%@ Register TagPrefix="Rico" Assembly="Rico" NameSpace="Rico" %>
\r
4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
7 <title>Rico LiveGrid-Photo Example</title>
\r
9 <Rico:LoadClient checkQueryString='true' runat='server' />
\r
10 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
12 <script type='text/javascript'>
\r
15 function photos_InitComplete() {
\r
16 // do something special when the mouse hovers over an image
\r
17 var c0=photos.grid.columns[0];
\r
18 for (var i=0; i<c0._img.length; i++) {
\r
19 Rico.eventBind(c0._img[i],'mouseover',Rico.eventHandle(window,'img_mouseover'));
\r
20 Rico.eventBind(c0._img[i],'mouseout',Rico.eventHandle(window,'img_mouseout'));
\r
22 img_popup=Rico.$('img_popup');
\r
25 function img_mouseover(e) {
\r
27 var elem=Rico.eventElement(e);
\r
28 img_popup.style.display='block';
\r
29 var imgPos=Rico.cumulativeOffset(elem);
\r
30 img_popup.src=elem.src.replace(/_s\.jpg/,'_m.jpg');
\r
31 img_popup.style.left=(imgPos.left+elem.offsetWidth+10)+'px';
\r
32 var winHt=Rico.windowHeight();
\r
33 window.status='winHt='+winHt+' imgTop='+imgPos.top
\r
34 if (imgPos.top > winHt/2) {
\r
35 img_popup.style.bottom=(winHt-imgPos.top-elem.offsetHeight)+'px';
\r
36 img_popup.style.top='';
\r
38 img_popup.style.top=(imgPos.top)+'px';
\r
39 img_popup.style.bottom='';
\r
43 function img_mouseout(e) {
\r
45 img_popup.style.display='none';
\r
48 function UpdateGrid() {
\r
49 var tags=Rico.$('tags').value;
\r
51 photos['buffer'].options.requestParameters=['tags='+tags];
\r
52 photos['grid'].filterHandler();
\r
54 alert('Please enter one or more keywords separated by commas');
\r
59 <style type="text/css">
\r
60 #explanation * { font-size: 8pt; }
\r
67 <div id='explanation'><form onsubmit='UpdateGrid(); return false;'>
\r
68 Base Library: <script type='text/javascript'>document.write(Rico.Lib+' '+Rico.LibVersion);</script>
\r
69 <hr><p>Find 100 <a href="http://www.flickr.com">Flickr</a> photos tagged with the keywords you type below (separate words with commas):
\r
70 <p><input type='text' id='tags'>
\r
71 <input type='submit' value='Get Photos'>
\r
72 <p>Then try moving your cursor over each photo...
\r
75 <Rico:LiveGrid runat='server' id='photos' prefetchBuffer='false' DataRowHt='80px' DataWrapText='true' dataProvider="'flickrPhotos.aspx'">
\r
76 <Rico:Column runat='server' heading='Photo' width='90' control='new Rico.TableColumn.image()' />
\r
77 <Rico:Column runat='server' heading='Title' width='100' />
\r
78 <Rico:Column runat='server' heading='Owner' width='100' />
\r
79 <Rico:Column runat='server' heading='Date Taken' width='100' DataType='datetime' />
\r
80 <Rico:Column runat='server' heading='Tags' width='200' />
\r
83 <img id='img_popup' style='display:none;position:absolute;'>
\r