Google Images - Display Method - How is it done?

davidbehan · #1 (**permalink**) 10-01-2007, 05:21 PM

Ok, have a look at http://images.google.ie/images?q=fir...f&start=0&sa=N

Now my browser window is at 1288x1004 at the moment and Google is displaying 6 images per row on 3 rows (18 results). If I reduce my firefox window to 1024x768... Google changes the display to 5 images per row on 4 rows (20 results) without a refresh. Now resize again to 800x600 and it's 4 images per row on 5 rows (20 results). And lastly, resize to 640x480 and it's 3 per row on 6 rows (18 results). I'm using FF Web Developer Toolbar to resize my window BTW.

This looks and works very neat I think. You always have an even amount of results going across the page. Now I'm hoping to achieve something similar. If you have a look at http://www.raymondpotterton.com/v2/listings.asp?cat=1 you'll see that there are 5 images on each of the 2 rows, but this is a fixed width website catering for 800x600 and above. What I'm hoping to do for a different client is build a 100% width website and having the display of the properties per page, match that to the users window width. Does that make sense? In other words:

- if you have a screen resolution (or window size) of 1280x1024 then display 8 images across on 3 rows down,
- if you have a screen resolution of 1024x768 (or window size) then display 6 images across on 2 rows down,
- if you have a screen resolution of 800x600 (or window size) then display 5 images across on 2 rows down,

Something like that. So, the bigger your screen resolution, the bigger the amount of information will be displayed on the page.

So, I presume Google are using AJAX to first check the window size, add x amount of results based on that screen size using a select case (or nested if) and displaying a certain amount per rows based on the above as well. If the window size changes, a listener runs the script again and either adds/subtracts results to the list (or does nothing if not needed). I presume the images per row is done using CSS and having AJAX modify the CSS to suit each window size or possibly rewriting the xhtml on the page each time the page is resized (and loaded).

I suppose the simple way to do it would be to have the css handle as many per row as possible and add as many as is needed to "even" it out at the end so there is no "white space" on the page. Here's an example of what I don't want to happen:

http://www.istockphoto.com/file_sear...0390950&page=3

Am I on the right lines with this do you think? Anyone know of any scripts out there to handle this kinda thing? I can't imagine so as it seems rather unique. Is there an easier way of doing this and I've just over complexed things? Anyone want to point me in the right direction for doing this or possible offering their services (for payment of course)???

Thanks in advance.

Rgds,

Dave

daviddoran · #2 (**permalink**) 10-01-2007, 05:40 PM

It shouldn't require AJAX really. Using Javascript the screen width could be determined easily enough, and the table refactored. However, being google the page is a total spaghetti of code so I might try and decipher later.

davidbehan · #3 (**permalink**) 10-01-2007, 05:53 PM

I had a feeling you would be first to reply to this. Just thinking that if the maximum amount of results were loaded up into the page at any time, e.g. 24 (8x3) and you used js to find the screen width. Based on that width you would set the display css value = none on the last 0, 2, 4, 6, 8, or whatever divs (that wrapped each property box) that needed to be hidden. If the window was resized, you would just change the display css value on the ones you want to display/hide. Then no AJAX would be needed.

Would that work do you think? Anyone foresee any problems with that approach?

louie · #4 (**permalink**) 10-01-2007, 06:09 PM

if you look at the code is mostly java. There a piece of the code that makes it work:

Code:

<script><!--window.dyn = {};(function() {function Q(a,c,d){var b="on"+c;if(a.addEventListener){a.addEventListener(c,d,false)}else if(a.attachEvent){a.attachEvent(b,d)}else{var e=a[b];a[b]=function(){var g=e.apply(this,arguments),h=d.apply(this,arguments);return g==undefined?h:(h==undefined?g:h&&g)}}};var j=window.dyn,s="tDataImage",m=[],q=0,A="",x="",v="",r=0;j.shouldShowAllImages=false;j.showBigFont=false;var i=3;window.onresize=L;function N(a,c,d,b){A=a;x=c;v=d;r=parseInt(b,10);Q(window,"load",K);var e=u();z(e)}function K(){var a=l("navbar");if(a&&a.getElementsByTagName){var c=a.getElementsByTagName("a");for(var d=0;d<c.length;d++){c[d].onclick=function(){return O(this)}}}}function u(){if(document&&document.body&&document.body.clientWidth){return document.body.clientWidth}else{return window.innerWidth}}function M(){if(document&&document.body&&document.body.clientHeight){return document.body.clientHeight}else{return window.innerHeight}}function p(a){return Math.ceil(17/a)*a}function z(a){var c=0;i=w(a);var d=j.shouldShowAllImages?21:p(i),b=Math.ceil(d/i),e="<table width=100% cellspacing=0 cellpadding=0 border=0>";for(var g=0;g<b;g++){var h="<tr>",k="<tr>";for(var n=0;n<i;n++){h+="<td id="+s+c+" align=center nowrap valign=bottom width="+100/i+"%></td>";k+="<td id=tDataText"+c+" align=center valign=top width="+100/i+"%></td>";c++}h+="</tr>";k+="</tr>";e+=h+k}e+="</table>";l("ImgContent").innerHTML=e}function R(){var a=p(i);B(a);P(a)}function B(a){var c=r,d=parseInt(l("upperLimit").innerHTML,10);if(c<0){return}if(!isNaN(d)&&c>=d){return}var b=j.shouldShowAllImages?m.length:a;if(m.length<b){b=m.length}b=c+b;l("lowerLimit").innerHTML=c+1;l("upperLimit").innerHTML=b}function w(a){var c=0;if(!a){c=4}else if(a<=t(690)){c=3}else if(a<t(800)){c=4}else{c=Math.max(Math.floor(a/t(200)),3)}return c>7?7:c}function t(a){var c;if(c=document.createElement("div")){c.style.width="10em";document.body.appendChild(c);var d=c.offsetWidth/10;document.body.removeChild(c);return d?Math.ceil(12.5*d*a/200):a}return a}function P(a){(new Image).src="/gen_204?bw="+u()+"&bh="+M()+"&ncols="+i+"&nimg="+a}function L(){var a=u();if(w(a)!=i){z(a);var c=p(i);B(c);if(j.shouldShowAllImages){c=m.length}for(var d=0;d<c;d++){y(d)}}}function D(a,c,d,b,e,g,h,k,n,o,E,F,G,H,I){var f=new Image;f.o=a;f.m=c;f.d=d;f.b=b;f.c=e;f.a=g;f.h=h;f.g=k;f.i=n;f.l=o;f.n=E;f.k=F;f.f=G;f.e=H;f.j=I;m[q]=f;var J=p(i);if(q<J||j.shouldShowAllImages){y(q)}q++}function y(a){var c="",d="";if(a>=m.length){return}var b=m[a];l(s+a).style.paddingTop=a<i?"0px":"20px";var e="/imgres?imgurl="+(b.b.indexOf("://")<0?"http://":"")+b.b+"&imgrefurl="+b.o+"&tbnid="+b.d+"&tbnh="+b.a+"&tbnw="+b.c+v+"&prev="+x;c+="<a href="+e+b.m+"><img style='border:1px solid;' src="+b.j+"?q=tbn:"+b.d+b.b;if(b.c!=""&&b.a!=""){c+=" width="+b.c+" height="+b.a}c+="></a>";l(s+a).innerHTML=c;d+="<font face=arial,sans-serif size=-1>";if(j.showBigFont){d+="<font size=3>"+b.h+"</font>"}else{d+=b.h}if(b.i!=""){d+="<span class=m>";if(b.g!=""){d+=" <font dir=ltr>- "+b.g+"</font>"}d+=" <font dir=ltr>- "+b.i+"</font></span>"}d+="<br>"+b.l+"&nbsp;-&nbsp;"+b.n+"<br><font color="+A+">"+b.k+"</font>";if(b.f!=""&&b.e!=""){d+="<br>[&nbsp;<a class=fl href='"+b.f+"'>"+b.e+"</a>&nbsp;]"}d+="</font>";l("tDataText"+a).innerHTML=d}function O(a){var c=document.location,d=a.href,b,e=0,g=p(i);b=r<0?0:r;var h=false,k=a.getElementsByTagName("div");if(k&&k.length>0){h=k[0]}if(a.innerHTML.search("nav_next.gif")!=-1||h&&h.id=="nn"){e=b+g}else if(a.innerHTML.search("nav_previous.gif")!=-1||h&&h.id=="np"){e=b-g;if(e<=0){e=0}}else{var n=/(\d+)\s*$/,o=n.exec(a.innerHTML);if(o&&o[1]){e=o[1]*1*g-g}}d=C(d,"start",e);d=C(d,"ndsp",g);c.href=d;return false}function C(a,c,d){var b=new RegExp("[?&]"+c+"=([^&]*)","i"),e=b.exec(a);if(e&&e.length>1){var g=e[0].charAt(0)+c+"="+d;a=a.replace(b,g)}else{a+="&"+c+"="+d}return a}function l(a){return document.getElementById(a)}j.initialize=N;j.updateStatus=R;j.Img=D;}) ();dyn.initialize("#008000", "/images%3Fq%3Dfirefox%26ndsp%3D18%26svnum%3D10%26hl%3Den%26lr%3D%26newwindow%3D1%26safe%3Doff%26sa%3DN","", "0");dyn.Img("http://mozilla.org.tr/&h=200&w=179&sz=10&hl=en&start=1"," 
......</script>

Of course it's all mangled togheter so is very ureabable.
You can achieve something like this (similar) by using div style="float:left"...
and have a fixed width to fit the screen.

As you can see in google the number of images are automatically updated from 20 to 18 when screen resized so it's a lot more then what you see.

davidbehan · #5 (**permalink**) 10-01-2007, 06:19 PM

Quote:

Originally Posted by louie

if you look at the code is mostly java. There a piece of the code that makes it work:

Code:

<script><!--window.dyn = {};(function() {function Q(a,c,d){var b="on"+c;if(a.addEventListener){a.addEventListener(c,d,false)}else if(a.attachEvent){a.attachEvent(b,d)}else{var e=a[b];a[b]=function(){var g=e.apply(this,arguments),h=d.apply(this,arguments);return g==undefined?h:(h==undefined?g:h&&g)}}};var j=window.dyn,s="tDataImage",m=[],q=0,A="",x="",v="",r=0;j.shouldShowAllImages=false;j.showBigFont=false;var i=3;window.onresize=L;function N(a,c,d,b){A=a;x=c;v=d;r=parseInt(b,10);Q(window,"load",K);var e=u();z(e)}function K(){var a=l("navbar");if(a&&a.getElementsByTagName){var c=a.getElementsByTagName("a");for(var d=0;d<c.length;d++){c[d].onclick=function(){return O(this)}}}}function u(){if(document&&document.body&&document.body.clientWidth){return document.body.clientWidth}else{return window.innerWidth}}function M(){if(document&&document.body&&document.body.clientHeight){return document.body.clientHeight}else{return window.innerHeight}}function p(a){return Math.ceil(17/a)*a}function z(a){var c=0;i=w(a);var d=j.shouldShowAllImages?21:p(i),b=Math.ceil(d/i),e="<table width=100% cellspacing=0 cellpadding=0 border=0>";for(var g=0;g<b;g++){var h="<tr>",k="<tr>";for(var n=0;n<i;n++){h+="<td id="+s+c+" align=center nowrap valign=bottom width="+100/i+"%></td>";k+="<td id=tDataText"+c+" align=center valign=top width="+100/i+"%></td>";c++}h+="</tr>";k+="</tr>";e+=h+k}e+="</table>";l("ImgContent").innerHTML=e}function R(){var a=p(i);B(a);P(a)}function B(a){var c=r,d=parseInt(l("upperLimit").innerHTML,10);if(c<0){return}if(!isNaN(d)&&c>=d){return}var b=j.shouldShowAllImages?m.length:a;if(m.length<b){b=m.length}b=c+b;l("lowerLimit").innerHTML=c+1;l("upperLimit").innerHTML=b}function w(a){var c=0;if(!a){c=4}else if(a<=t(690)){c=3}else if(a<t(800)){c=4}else{c=Math.max(Math.floor(a/t(200)),3)}return c>7?7:c}function t(a){var c;if(c=document.createElement("div")){c.style.width="10em";document.body.appendChild(c);var d=c.offsetWidth/10;document.body.removeChild(c);return d?Math.ceil(12.5*d*a/200):a}return a}function P(a){(new Image).src="/gen_204?bw="+u()+"&bh="+M()+"&ncols="+i+"&nimg="+a}function L(){var a=u();if(w(a)!=i){z(a);var c=p(i);B(c);if(j.shouldShowAllImages){c=m.length}for(var d=0;d<c;d++){y(d)}}}function D(a,c,d,b,e,g,h,k,n,o,E,F,G,H,I){var f=new Image;f.o=a;f.m=c;f.d=d;f.b=b;f.c=e;f.a=g;f.h=h;f.g=k;f.i=n;f.l=o;f.n=E;f.k=F;f.f=G;f.e=H;f.j=I;m[q]=f;var J=p(i);if(q<J||j.shouldShowAllImages){y(q)}q++}function y(a){var c="",d="";if(a>=m.length){return}var b=m[a];l(s+a).style.paddingTop=a<i?"0px":"20px";var e="/imgres?imgurl="+(b.b.indexOf("://")<0?"http://":"")+b.b+"&imgrefurl="+b.o+"&tbnid="+b.d+"&tbnh="+b.a+"&tbnw="+b.c+v+"&prev="+x;c+="<a href="+e+b.m+"><img style='border:1px solid;' src="+b.j+"?q=tbn:"+b.d+b.b;if(b.c!=""&&b.a!=""){c+=" width="+b.c+" height="+b.a}c+="></a>";l(s+a).innerHTML=c;d+="<font face=arial,sans-serif size=-1>";if(j.showBigFont){d+="<font size=3>"+b.h+"</font>"}else{d+=b.h}if(b.i!=""){d+="<span class=m>";if(b.g!=""){d+=" <font dir=ltr>- "+b.g+"</font>"}d+=" <font dir=ltr>- "+b.i+"</font></span>"}d+="<br>"+b.l+"&nbsp;-&nbsp;"+b.n+"<br><font color="+A+">"+b.k+"</font>";if(b.f!=""&&b.e!=""){d+="<br>[&nbsp;<a class=fl href='"+b.f+"'>"+b.e+"</a>&nbsp;]"}d+="</font>";l("tDataText"+a).innerHTML=d}function O(a){var c=document.location,d=a.href,b,e=0,g=p(i);b=r<0?0:r;var h=false,k=a.getElementsByTagName("div");if(k&&k.length>0){h=k[0]}if(a.innerHTML.search("nav_next.gif")!=-1||h&&h.id=="nn"){e=b+g}else if(a.innerHTML.search("nav_previous.gif")!=-1||h&&h.id=="np"){e=b-g;if(e<=0){e=0}}else{var n=/(\d+)\s*$/,o=n.exec(a.innerHTML);if(o&&o[1]){e=o[1]*1*g-g}}d=C(d,"start",e);d=C(d,"ndsp",g);c.href=d;return false}function C(a,c,d){var b=new RegExp("[?&]"+c+"=([^&]*)","i"),e=b.exec(a);if(e&&e.length>1){var g=e[0].charAt(0)+c+"="+d;a=a.replace(b,g)}else{a+="&"+c+"="+d}return a}function l(a){return document.getElementById(a)}j.initialize=N;j.updateStatus=R;j.Img=D;}) ();dyn.initialize("#008000", "/images%3Fq%3Dfirefox%26ndsp%3D18%26svnum%3D10%26hl%3Den%26lr%3D%26newwindow%3D1%26safe%3Doff%26sa%3DN","", "0");dyn.Img("http://mozilla.org.tr/&h=200&w=179&sz=10&hl=en&start=1"," 
......</script>

Of course it's all mangled togheter so is very ureabable.
You can achieve something like this (similar) by using div style="float:left"...
and have a fixed width to fit the screen.

As you can see in google the number of images are automatically updated from 20 to 18 when screen resized so it's a lot more then what you see.

The float: left approach is what I was talking about above and using JS to work out whether to use 18 or 20 images on the page and using display: none to show/hide the ones needed. Would that be sufficient?

louie · #6 (**permalink**) 10-01-2007, 07:59 PM

That should do it but there is not need for hide show part.
Just display a certain amount of images and they will stretch down.

davidbehan · #7 (**permalink**) 10-01-2007, 09:18 PM

But For Example:- if I display 20 images, on a 800x600 window size it would show 5 rows of 4 images; on 1024x768 it would have 3 rows of 6 images plus 2 on a forth row; on 1280x1024 it would have 2 rows of 8 images and 4 images on the third row. This is what I'm trying to avoid. So if the user was on 1280x1024, I want it to either not show the third row or would show an extra 4 images to fill up the extra "whitespace" on the third row. That's the whole point of the post! See the second link in my first post. This is what I'm trying NOT to achieve!

Maybe I didn't explain myself properly! Sorry for that!

louie · #8 (**permalink**) 10-01-2007, 09:21 PM

Use Javascript to get the width and based on that run your code:

onresize javascript get width - Google Search

gary.b · #9 (**permalink**) 12-01-2007, 02:01 AM

Not straight to the point, but a bit of relevant reading:

A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique

davidbehan · #10 (**permalink**) 12-01-2007, 10:29 AM

Quote:

Originally Posted by gary.b

Not straight to the point, but a bit of relevant reading:

A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique

That was a good read Gary. Thanks for that. It lead me to:

Particletree » Dynamic Resolution Dependent Layouts

This is basically what I was looking for and I think I could do exactly what I was thinking with this approach. Thanks.

Dave

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Successful Site in 12 Months with Google Alone	montyauto	Webmaster Articles	11	18-02-2008 01:28 PM
Google Axes SOAP API	daviddoran	Webmaster Discussion	4	31-12-2006 05:30 PM

Sponsored links

Google Images - Display Method - How is it done?

Google Images - Display Method - How is it done?

Similar Threads

Sponsored links