1 <%@ Page Language="VB" ResponseEncoding="iso-8859-1" Debug="true" %>
\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 photogrid_InitComplete() {
\r
16 // do something special when the mouse hovers over an image
\r
17 var c0=photogrid['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=document.getElementById('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=$('tags').value;
\r
51 photogrid['buffer'].options.requestParameters=['tags='+tags];
\r
52 photogrid['grid'].filterHandler();
\r
54 alert('Please enter one or more keywords separated by commas');
\r
59 <style type="text/css">
\r
60 .ricoLG_bottom div.ricoLG_cell { height:80px; } /* thumbnails are 75x75 pixels */
\r
61 #explanation * { font-size: 8pt; }
\r
68 <div id='explanation'><form onsubmit='UpdateGrid(); return false;'>
\r
69 <p>Get <a href="http://www.flickr.com">Flickr</a> photos tagged with these keywords (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='photogrid' prefetchBuffer='false' dataProvider='flickrPhotos.aspx' headingSort='hover'>
\r
77 <Rico:Column runat='server' heading='Photo' width='90' control='new Rico.TableColumn.image()' />
\r
78 <Rico:Column runat='server' heading='Title' width='100' />
\r
79 <Rico:Column runat='server' heading='Owner' width='100' />
\r
80 <Rico:Column runat='server' heading='Date Taken' width='100' DataType='datetime' />
\r
81 <Rico:Column runat='server' heading='Tags' width='200' />
\r
85 <img id='img_popup' style='display:none;position:absolute;'>
\r