473,325 Members | 2,828 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,325 software developers and data experts.

Gallery of images and alignment

I've written a number of "image gallery" pages before, but I'm trying
to do something a little different.

All the images are rectangular (these are just pictures from my
camera), and the thumbnail images I have are uniform in size in the
sense that the longest dimension is fixed, and the shortest dimension
is fixed. That is, if it's a horizontal image, the width is X, if
it's a vertical image, the height is X.

I used to create galleries like this by creating a table, all the
table data elements were set to a fixed size so that there was some
nice white space around each image, and each image is centered within
the table data.

Doing this looks fine, but it seems to me that, coming from a purists
perspective, that limits the user in width of of the browser. In
other words, if each table data is 200 width, then using 640x480 as a
lowest common denominator says that I can only have three thumbnail
images across.

What I'd like to do is create a virtual box around each image so that
the box size is, for example, 200x200 pixels. Whatever... some box
known to be larger than the thumbnails, but uniform in height and
width. The idea is that the page has a uniform appearance - images in
a row are aligned in their center, even though some are vertical and
some are horizontal, and images in each column (these are not table
rows and columns, just boxes that will get aligned that way) will be
aligned on center even though some are vertical and some are
horizontal.

Using my example, then, the browser would ideally show three images
neatly in a row at 640, but if the user expands to 800 or more, it'll
show 4 in a row, 1280 would show 6... this is supposed to be the
design ideal for HTML, yet I can't figure out how to do it neatly with
pictures.

I even tried each image in a separate table, but not only is that very
undesireable (tables kill rendering times, and we are talking about
over 100 images), but it doesn't work - neither NS or IE is rendering
multiple tables in a row. I might find a way to avoid this (<nobr>
maybe), but then the browser doesn't know when it *should* break.

Is there some way to do this? Maybe with stylesheets? For image,
obviously width and height don't work, because that resizes the image.
Padding and margins don't work, because some images are vertical and
some are horizontal - the left and right padding for a horizontal
image would be smaller than a vertical image - so it's not just white
space, consider it uniform spacing on centers of the images.

I could simply look at the size of each image, but I'm writing a perl
script to write the HTML, and it'd be nice to keep it more generic.

TIA,
Fred
Jul 20 '05 #1
3 4470
Fred wrote:
I've written a number of "image gallery" pages before, but I'm trying
to do something a little different.

All the images are rectangular (these are just pictures from my
camera), and the thumbnail images I have are uniform in size in the
sense that the longest dimension is fixed, and the shortest dimension
is fixed. That is, if it's a horizontal image, the width is X, if
it's a vertical image, the height is X. I could simply look at the size of each image, but I'm writing a perl
script to write the HTML, and it'd be nice to keep it more generic.


Do you have captions? If not:

img {vertical-align:middle}

<img> <img> <img> ...

Maybe with margin to make them as wide, if you wish.

If captions, wrap them to divs that have at least common height.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Image Gallery</title>
<style type="text/css">
div {float:left;margin:0.5em;}
div div {height:200px;float:none;}
div div.caption {height:2.5em;overflow:auto;}
/* assign width to some of them to get them similar sized*/

/* this so that axample images aren't needed:*/
img {background:blue;}
</style>

<div><div><img width="100" height="200"></div><div
class="caption">caption</div></div>
<div><div><img width="200" height="100"></div><div
class="caption">caption</div></div>
<div><div><img width="140" height="140"></div><div
class="caption">caption</div></div>

Or something like that. An example:
http://www.student.oulu.fi/~atlas/ku...003/index.html

More you can find googling back some weeks, there was talk about this not
long ago.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #2
Fred wrote:
I've written a number of "image gallery" pages before, but I'm trying
to do something a little different.

All the images are rectangular (these are just pictures from my
camera), and the thumbnail images I have are uniform in size in the
sense that the longest dimension is fixed, and the shortest dimension
is fixed. That is, if it's a horizontal image, the width is X, if
it's a vertical image, the height is X.

I used to create galleries like this by creating a table, all the
table data elements were set to a fixed size so that there was some
nice white space around each image, and each image is centered within
the table data.

Doing this looks fine, but it seems to me that, coming from a purists
perspective, that limits the user in width of of the browser. In
other words, if each table data is 200 width, then using 640x480 as a
lowest common denominator says that I can only have three thumbnail
images across.

What I'd like to do is create a virtual box around each image so that
the box size is, for example, 200x200 pixels. Whatever... some box
known to be larger than the thumbnails, but uniform in height and
width. The idea is that the page has a uniform appearance - images in
a row are aligned in their center, even though some are vertical and
some are horizontal, and images in each column (these are not table
rows and columns, just boxes that will get aligned that way) will be
aligned on center even though some are vertical and some are
horizontal.

Using my example, then, the browser would ideally show three images
neatly in a row at 640, but if the user expands to 800 or more, it'll
show 4 in a row, 1280 would show 6... this is supposed to be the
design ideal for HTML, yet I can't figure out how to do it neatly with
pictures.

I even tried each image in a separate table, but not only is that very
undesireable (tables kill rendering times, and we are talking about
over 100 images), but it doesn't work - neither NS or IE is rendering
multiple tables in a row. I might find a way to avoid this (<nobr>
maybe), but then the browser doesn't know when it *should* break.

Is there some way to do this? Maybe with stylesheets? For image,
obviously width and height don't work, because that resizes the image.
Padding and margins don't work, because some images are vertical and
some are horizontal - the left and right padding for a horizontal
image would be smaller than a vertical image - so it's not just white
space, consider it uniform spacing on centers of the images.

I could simply look at the size of each image, but I'm writing a perl
script to write the HTML, and it'd be nice to keep it more generic.

TIA,
Fred

Consider this:
http://www.vladdy.net/demos/gallery.html
--
Vladdy
http://www.klproductions.com
Jul 20 '05 #3
In comp.infosystems.www.authoring.html Vladdy <vl**@klproductions.com> wrote:
Consider this:
http://www.vladdy.net/demos/gallery.html


Neat. As long as all the pics are the same size (I crop my thumbnails),
that'd work nicely.

--
_Deirdre http://deirdre.net
"Ideally pacing should look like the stock market for the year 1999, up
and up and up, but with lots of little dips downwards...."
-- Wen Spencer on plotting a novel
Jul 20 '05 #4

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

Similar topics

2
by: matt | last post by:
I have compiled some code, some written by me, some compiled from various sources online, and basically i've got a very simple flat file photo gallery. An upload form, to upload the photos and give...
5
by: Fred | last post by:
I've written a number of "image gallery" pages before, but I'm trying to do something a little different. All the images are rectangular (these are just pictures from my camera), and the...
54
by: Max Quordlepleen | last post by:
Apologies for the crossposting, I wasn't sure which of these groups to ask this in. I have been lurking in these groups for a week or so, trying to glean what I need to design a simple, clean...
10
by: Florian Brucker | last post by:
There are several tutorials on the net showing you how to create a thumbnail gallery with floating thumbails which automagically uses all horizontal space available (e.g....
1
by: Xah Lee | last post by:
The following is a program to generate thumbnail images for a website. Useful, if you want to do that. It is used to generate the thumbnails for my “Banners, Damsels, and Mores†project...
11
by: ste | last post by:
Hi there, Further to my recent posts where I've received excellent help from Rik and Jerry, I've ended up with an image gallery on my website that displays images in a table, 3 images per row. ...
2
by: Nik | last post by:
I have a simplified version of my image gallery at: http://www.niksally.f2s.com/upload/gallery/mixed_gallery.html Essentially, the format of the html is an in-line list: <ul> <li><img></li>...
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...
3
by: ishkur88 | last post by:
Hello, I'm a starting out web designer, and a client of mine wants a gallery of their products to be displayed. What I have so far works beautifully. Basically what it does is reads the...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.