fluid image gallery

C

Cartoper

I am a seasoned application programmer that is playing around in the
world of web development. I found this web site that has nice fluid
image galleries and I am wondering how they are doing it:

http://pahountis.zenfolio.com/p925877948

I know they are putting each thumbnail in div and letting them just
flow. When the page is resized, the number of div changes. What I
don't understand what exactly are they doing to determine how many
images/div to display.

With a desktop application, I can determine the rectangle of the
thumbnail area and determine the rectangle of if thumbnail widget
(image N name) and determine how many total images I can display.
Logically it seems to me that if you where to have one div to fill the
space between the header and footer, I can use that size as the
rectangle of the thumbnail area, but it does seem I can do that type
of thing with a div.

Any and all suggestions and help is appreciated!

Cartoper
 
R

RobG

Cartoper said:
I am a seasoned application programmer that is playing around in the
world of web development. I found this web site that has nice fluid
image galleries and I am wondering how they are doing it:

http://pahountis.zenfolio.com/p925877948

I know they are putting each thumbnail in div and letting them just
flow. When the page is resized, the number of div changes. What I
don't understand what exactly are they doing to determine how many
images/div to display.

With a desktop application, I can determine the rectangle of the
thumbnail area and determine the rectangle of if thumbnail widget
(image N name) and determine how many total images I can display.
Logically it seems to me that if you where to have one div to fill the
space between the header and footer, I can use that size as the
rectangle of the thumbnail area, but it does seem I can do that type
of thing with a div.

Any and all suggestions and help is appreciated!
Click to expand...

Use Firefox, save as "web page, complete". You now have all the files
you need. While the page looks good to me, I think the underlying
implementation is less than optimal.

Use the Firebug add-on to inspect the document.

The page in question uses over 270kB of script files to do what it does
- and if scripting is disabled, you see no thumbnails at all. I expect
if you approach it from a CSS and HTML perspective, it would require
only a very simple script that monitors the size of a div element. When
its changes size, it should work out how many thumbnails to display (a
fairly simple mathematics problem).

The thumbnails themselves can just float inside the div with appropriate
CSS to ensure they sit nicely on a well spaced grid. The page uses
about 17 nested divs for each thumbnail, most of which don't seem to add
anything at all to the layout.
 
C

Cartoper

Cartoper wrote:

http://pahountis.zenfolio.com/p925877948

The page in question uses over 270kB of script files to do what it does
- and if scripting is disabled, you see no thumbnails at all. I expect
if you approach it from a CSS and HTML perspective, it would require
only a very simple script that monitors the size of a div element. When
its changes size, it should work out how many thumbnails to display (a
fairly simple mathematics problem).
Click to expand...

I have no desire to right a quarter meg of JavaScript;) What I am
trying to figure out is how to implement this with CSS/HTML. Thanks
to your replay, after reading your reply to what I asked, I realized I
am not asking the right question;) Considering this is a JavaScript
forum and not a CSS forum, I am going to go post it there. But never
the less, here it is anyway:

Here is the basic HTML:

<body>
<div id="header">my header</div>
<div id="body">my body which is an image</div>
<div id="footer">my footer</div>
</body>

Via CSS2, how do I go about putting the footer at the bottom of the
page and most importantly making the body fill in between the header
and footer so that the text (or image) is centered vertically as well
as horizontally?

Cartoper
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Gallery - mosiac/grid layout with filtering and information page popup 1
How to properly insert a landing page within same container beneath an image element? 0
Stuck with html and css 25
Animate a background image 0
Background image not showing up on html page 3
Image on header 2
Put image over the top of another image on hover 3
Clickable Div Block 1

Members online

Total: 79 (members: 1, guests: 78)
Robots: 440

Forum statistics

Threads
473,995
Messages
2,570,231
Members
46,820
Latest member
GilbertoA5

Latest Threads

Top