Thumbnail gallery without tables?

[Els]

Ah ha!
I tried something like that too:
http://www.edgehill.net/html/css/gallery4.htm
http://www.edgehill.net/html/css/gallery5.htm

You know, I never thought about the possibility of floating
the tables themselves!

Then I boiled yours down to the basics and color coded to make sense of
it: http://www.edgehill.net/html/css/gallery6.htm

And true, there's no need for the height of the table to be
specified. Taking that out....

The div version was 18.345 bytes on the server, the li
version 17.912, without the height it's now 17.897, and just
uploaded the div version without the divs: 16.645 bytes

The width and height of each thumb I don't specify though,
cause it's a hassle, as they're all different.
I would (to make the page load in a more stable way) specify
a max-width for each thumb, as they are never wider or
higher than 100px, but I don't know how to do that. As soon
as I specify a width, in html or in css, the picture
stretches to become that width...

 

[Steve R.]

Els wrote in message ...

The width and height of each thumb I don't specify though,
cause it's a hassle, as they're all different.

'Frontpage' users do all that with a simple click of the button :~)

 

[Els]

Els wrote in message ...


'Frontpage' users do all that with a simple click of the button :~)

Blasphemist! :-D

 

[Nik Coughin]

Nik Coughin wrote in message ...

That page took forever to load on a dial-up, but I couldn't
understand why.

Maybe tables *are* quicker :~)

That page uses tables, not CSS

It probably took a long time to load because of the way the XSL stylesheet
(nothing to do with CSS) translates the XML. When I wrote that page I knew
nothing about XSL so it doesn't exactly produce optimal code.

 

[Eric Bohlman]

2. This gallery has a DHTML-based display mechanism (for those that
support it, for those that don't there's an alternative) so each image
has a rather large onclick handler attached that really beefs-up the
markup.

You can probably refactor your code to achieve a large space saving. It
sounds to me like there's a whole lot of code duplicated in each handler;
figure out what's common, write functions with parameters to do the common
stuff, and have the individual handlers simply call the functions with the
right parameters. That way the common code appears in only one place
rather than duplicated for every image.

 

[Andrew Urquhart]

You can probably refactor your code to achieve a large space saving. It
sounds to me like there's a whole lot of code duplicated in each handler;
figure out what's common, write functions with parameters to do the common
stuff, and have the individual handlers simply call the functions with the
right parameters. That way the common code appears in only one place
rather than duplicated for every image.

Hi Eric, if you _look_ you'll see that that is exactly how it already
works.

 

[Eric Bohlman]

Hi Eric, if you _look_ you'll see that that is exactly how it already
works.

You could knock off about 4K right away by having ShowPhoto prepend the
path to the photo URIs; that would save you several hundred
"/andrewu/pix/photos/". Another factor contributing to the bloat is the
long directory names.

 

[Andrew Urquhart]

You could knock off about 4K right away by having ShowPhoto
prepend the path to the photo URIs; that would save you several
hundred "/andrewu/pix/photos/". Another factor contributing to the
bloat is the long directory names.

Hi Eric. I wrote the XML and XSLT behind the gallery (links to those
files at bottom of gallery) to be flexible enough for others to use if
they want to. So whilst I could introduce tweaks of this nature the code
becomes less general purpose. All of the data is in the XML, all of the
processing is in the XSLT and photo.js is a blackbox that provides
additional DHTML functionality for those browsers that support
javascript. I don't want to cross those boundaries and put data in the
DHTML module for example. If I gave the impression that I was puzzled as
to why the page was large then I apologise as this is not the case. The
long directory and filenames have been lifted directly from my offline
store of photos where they have a purpose in reminding me what they are
by how they are named, they have not been optimised for the web other
than in making them URI-safe. I posted the link as it provided an
example of how to use CSS with semantic HTML to display thumbnails in a
gallery, I wouldn't post it to a thread about file-size optimisation!
)

Thanks for the interest.

Best,

 

[Roy Reed]

Craig wrote in message ...

Many of your thumbnails are very poorly web-optimised, especially on
a page which carries so many images. Pity the poor dial-up user (60%
or more of all users)

This one for example is 19K ..
http://www.amd-m.com/guys/thumbs/jonathanh_jpg.jpg

and this one 19K ...
http://www.amd-m.com/guys/thumbs/tomwastintime_jpg.gif

Thumbnails that pixel size can easily be around 3K - 4K maximum.

It's not the JPG optimisation that's the problem. The images still have EXIF
data embedded. That's probably between 10K and 15K of the file size.

--
Must fly

Roy

www.reeddesign.co.uk

 

[Lauri Raittila]

Do you mean by wrapping whole thing to one table? - Everything. Try it in
big/small window for example.

Or every image? - I don't think doing that just to get pre CSS browsers
tile images would be worth hassle.

Or like I suggest further this message?

Or do you mean inline styles? Those are bad, I admit. They are generated
automatically, and I intend to move them to stylesheet when I have time.
(I don't want to hardcode them to stylesheet.)

Depends much how you use them.

As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
alone]

I have thought about

<table>
<tr><th>Caption<td>image
<tr><td>Caption1<td>image1
</table>

And then making it look like my example using CSS. I think that is much
better than abusing dl's. I haven't had time to test it unfortunately.

 

[Lauri Raittila]

IIANM, you can read image path using JS somehow...

Hi Eric. I wrote the XML and XSLT behind the gallery (links to those ....
example of how to use CSS with semantic HTML to display thumbnails in a
gallery, I wouldn't post it to a thread about file-size optimisation!
)

Anyway, if you have that big website, you should use some faster
connected host. Took ages to load it on fast broadband.

You could safe loads of bandwith by not using XHTML, btw.

 

[Els]

Or every image? - I don't think doing that just to get pre CSS browsers
tile images would be worth hassle.

Or like I suggest further this message?

Or do you mean inline styles? Those are bad, I admit. They are generated
automatically, and I intend to move them to stylesheet when I have time.
(I don't want to hardcode them to stylesheet.)

Depends much how you use them.

As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
alone]

I have thought about

<table>
<tr><th>Caption<td>image
<tr><td>Caption1<td>image1
</table>

And then making it look like my example using CSS. I think that is much
better than abusing dl's. I haven't had time to test it unfortunately.

Lauri, I'm just wondering how you think about how I did it
on these example pages:
W:\Rachel's Site\Rachel\thumbswithcaptionslist.html
W:\Rachel's Site\Rachel\thumbswithcaptions.html
W:\Rachel's Site\Rachel\thumbswithcaptionscentered.html

 

[Paul Furman]

As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of
markup
alone]

I have thought about

<table>
<tr><th>Caption<td>image
<tr><td>Caption1<td>image1
</table>

And then making it look like my example using CSS. I think that is
much better than abusing dl's. I haven't had time to test it
unfortunately.

Lauri, I'm just wondering how you think about how I did it on these
example pages:
W:\Rachel's Site\Rachel\thumbswithcaptionslist.html
W:\Rachel's Site\Rachel\thumbswithcaptions.html
W:\Rachel's Site\Rachel\thumbswithcaptionscentered.html

Perhaps you missed the recent discussion, see the gallery pages for
experiments: http://www.edgehill.net/html/css Els' approach is
prototypeed in #6 and #2 comes real close to doing this with spans & divs.

 

[Lauri Raittila]

Lauri Raittila wrote:

[Using one table and making it fluid using CSS]

Lauri, I'm just wondering how you think about how I did it
on these example pages:
W:\Rachel's Site\Rachel\thumbswithcaptionslist.html
W:\Rachel's Site\Rachel\thumbswithcaptions.html
W:\Rachel's Site\Rachel\thumbswithcaptionscentered.html

Your URLs are bit hard to follow... I suppose these are the same as the
one on black background.

Anyway, I think your method is not totally wrong, but it is not very good
either. Better than list IMHO

 

[Els]

Els wrote:

Your URLs are bit hard to follow... I suppose these are the same as the
one on black background.

Duh! Stupid me :S
Here goes:
http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptionslist.html
http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptions.html
http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptionscentered.html