jQuery fill the body with images

views:

answers:

+3 Q:

jQuery fill the body with images

1) We have <body>, it's height and width varies (different resolutions).

2) Many blocks with images inside it, can be more than 50 blocks.

3) width and height are equal for each block.

How can we fill the body with all available images, that can be visible on current resolution, and hide others?

There should be no horizontal/vertical scrollbars.

For example, we have 50 blocks inside <body>. 1024x768 can accommodate only 20, so we show them and hide others. If person changes browser window size to 1280 - we show more blocks and so on.

Actually I don't ask you to write the full script. I need the links on some similar scripts that are already work.

Its better if blocks can change themselves (like slideshow).

Thanks.

+2 A:

Hi,

I'm trying to figure out an algorithm:

1) get the width of container containing the blocks (container should be relative, so that it expands when you resize the window). To get the width use .width or .outerWidth

2) divide the width of the container by the block's width, floor it. Now you know how many blocks fit in one row.

3) To calculate the height, this can be tricky because you may have a header or navigation etc. which cuts the vertical space down. So do this:

3.1) Get the height of the window $(window).height();

3.2) Get the container's top offset $('#container').offset().top

3.3) Subtract the offset from the window height - now you have the "real" height available (note: if you have a footer etc. you have to subtract this reserverd space, too)

4) Divide the real available vertical space through the block's height (spend attention on margins/paddings) and floor this number. Now you know how many rows may fit in your space.

5) multiply max. rows and max. columns we've calculated, that's the maximum amount of blocks that fit in.

6) Get your blocks like $('.block') and iterate thru it $('.block').each(function(index) { ... }); now if the index is bigger than the max. number of blocks we've calculated, hide them!

7) Attach an event handler to $(window).resize(function() { }) and do the steps above on resize

sled 2010-09-10 20:47:23

Put them inside a block which has the CSS overflow:hidden property set. That way you can display them all, but the use will only see as many as will fit into the block. No code required.

Spudley 2010-09-10 21:32:29

you could see a part of the blocks which don't fit in!

sled 2010-09-10 22:19:33

@sled - in which case, a small bit of Javascript to resize the box to the nearest multiple of the known image size. Still relatively easy.

Spudley 2010-09-10 22:28:27

ansaurus

tags:

views:

answers:

jQuery fill the body with images

related questions