1 <%@ Page Language="VB" ResponseEncoding="iso-8859-1" Debug="true" %>
\r
2 <%@ Register TagPrefix="Rico" TagName="LiveGrid" Src="../../plugins/dotnet/LiveGrid.ascx" %>
\r
3 <%@ Register TagPrefix="Rico" TagName="Column" Src="../../plugins/dotnet/GridColumn.ascx" %>
\r
4 <%@ Register TagPrefix="My" TagName="LoadRicoClient" Src="LoadRicoClient.ascx" %>
\r
7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
10 <title>Rico LiveGrid-Photo Example</title>
\r
12 <My:LoadRicoClient id='initlibs' runat='server' />
\r
13 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
15 <script type='text/javascript'>
\r
18 function photogrid_InitComplete() {
\r
19 // do something special when the mouse hovers over an image
\r
20 var c0=photogrid['grid'].columns[0];
\r
21 for (var i=0; i<c0._img.length; i++) {
\r
22 Rico.eventBind(c0._img[i],'mouseover',Rico.eventHandle(window,'img_mouseover'));
\r
23 Rico.eventBind(c0._img[i],'mouseout',Rico.eventHandle(window,'img_mouseout'));
\r
25 img_popup=document.getElementById('img_popup');
\r
28 function img_mouseover(e) {
\r
30 var elem=Rico.eventElement(e);
\r
31 img_popup.style.display='block';
\r
32 var imgPos=Rico.cumulativeOffset(elem);
\r
33 img_popup.src=elem.src.replace(/_s\.jpg/,'_m.jpg');
\r
34 img_popup.style.left=(imgPos.left+elem.offsetWidth+10)+'px';
\r
35 var winHt=Rico.windowHeight();
\r
36 window.status='winHt='+winHt+' imgTop='+imgPos.top
\r
37 if (imgPos.top > winHt/2) {
\r
38 img_popup.style.bottom=(winHt-imgPos.top-elem.offsetHeight)+'px';
\r
39 img_popup.style.top='';
\r
41 img_popup.style.top=(imgPos.top)+'px';
\r
42 img_popup.style.bottom='';
\r
46 function img_mouseout(e) {
\r
48 img_popup.style.display='none';
\r
51 function UpdateGrid() {
\r
52 var tags=$('tags').value;
\r
54 photogrid['buffer'].options.requestParameters=['tags='+tags];
\r
55 photogrid['grid'].filterHandler();
\r
57 alert('Please enter one or more keywords separated by commas');
\r
62 <style type="text/css">
\r
63 .ricoLG_bottom div.ricoLG_cell { height:80px; } /* thumbnails are 75x75 pixels */
\r
64 #explanation * { font-size: 8pt; }
\r
71 <div id='explanation'><form onsubmit='UpdateGrid(); return false;'>
\r
72 <p>Get <a href="http://www.flickr.com">Flickr</a> photos tagged with these keywords (separate words with commas):
\r
73 <p><input type='text' id='tags'>
\r
74 <input type='submit' value='Get Photos'>
\r
75 <p>Then try moving your cursor over each photo...
\r
78 <Rico:LiveGrid runat='server' id='photogrid' prefetchBuffer='false' dataProvider='flickrPhotos.aspx' headingSort='hover'>
\r
80 <Rico:Column runat='server' heading='Photo' width='90' control='new Rico.TableColumn.image()' />
\r
81 <Rico:Column runat='server' heading='Title' width='100' />
\r
82 <Rico:Column runat='server' heading='Owner' width='100' />
\r
83 <Rico:Column runat='server' heading='Date Taken' width='100' DataType='datetime' />
\r
84 <Rico:Column runat='server' heading='Tags' width='200' />
\r
88 <img id='img_popup' style='display:none;position:absolute;'>
\r