473,396 Members | 1,990 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

fluid image gallery

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

Sep 22 '07 #1
1 1682
On Sep 22, 1:10 am, RobG <rg...@iinet.net.auwrote:
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).
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

Sep 22 '07 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Perttu Pulkkinen | last post by:
Does anybody know a php-based image gallery, where final looks of the actual site would not be determined by the application? I mean that there would only be a php-library of objects/functions that...
8
by: Chris Dewin | last post by:
Hi. I run a website for my band, and the other guys want an image gallery. I'm thinking it would be nice and easy, if we could just upload a jpg into a dir called "gallery/". When the client...
10
by: ste | last post by:
Hi there, I'm trying to query a MySQL database (containing image data) and to output the results in a HTML table of 3 columns wide (and however many rows it takes) in order to create a basic...
4
by: RE Kochanski | last post by:
I have attempted to use the CSS techniques from two or three sites to create a CSS only image gallery. I am muddling the affair by placing the thumbnails in one float, the page text in another...
1
by: gescom | last post by:
My goal is to create essentially two galleries on a single page, in which the first gallery determines what the second gallery displays. For instance, the first gallery refers to the contents of the...
0
by: numbnutz | last post by:
Hi, I am currently working on an XML Gallery for my girlfriend's brother who is a photographer. I have created a flash front end template and am using an XML database to load the images and...
5
by: dabhand | last post by:
Hi This page http://www.dabhand.co.nz/ayupdev/gallery-riders.html works great in IE but not in Firefox... any help would be appreciated. It refers to an external javascript file which I have...
10
by: cjparis | last post by:
Hello everyone. If anyone can give me a hand I would be gratefull Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE...
18
by: Nik Coughlin | last post by:
I am halfway through writing a tutorial on image slicing for fluid CSS layouts, I would love some feedback on what I've done up until this point: http://nrkn.com/index.html I am still writing...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.