Thumbnail gallery without tables?

[Andrew Urquhart]

Re: Thumbnail gallery without tables?

"Eric Bohlman" <ebohlman@earth link.net> wrote in message
news:Xns949A971 AC1ECDebohlmano msdevcom@130.13 3.1.4...[color=blue]
> "Andrew Urquhart" <reply_via_cont act_page@websit e_in.sig> wrote in
> news:HKF_b.2618 $Vv.1980@newsfe 2-gui.server.ntli .net:
>[color=green]
> > 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[/color][/color]
image[color=blue][color=green]
> > has a rather large onclick handler attached that really beefs-up the
> > markup.[/color]
>
> You can probably refactor your code to achieve a large space saving.[/color]
It[color=blue]
> sounds to me like there's a whole lot of code duplicated in each[/color]
handler;[color=blue]
> figure out what's common, write functions with parameters to do the[/color]
common[color=blue]
> stuff, and have the individual handlers simply call the functions with[/color]
the[color=blue]
> right parameters. That way the common code appears in only one place
> rather than duplicated for every image.[/color]

Hi Eric, if you _look_ you'll see that that is exactly how it already
works.
--
Andrew Urquhart
Reply: https://www.andrewu.co.uk/about/cont...sgroup_althtml

[Eric Bohlman]

Re: Thumbnail gallery without tables?

"Andrew Urquhart" <reply_via_cont act_page@websit e_in.sig> wrote in
news:gH8%b.1119 $bJ1.416@newsfe 1-win:
[color=blue]
> "Eric Bohlman" <ebohlman@earth link.net> wrote in message
> news:Xns949A971 AC1ECDebohlmano msdevcom@130.13 3.1.4...[color=green]
>> You can probably refactor your code to achieve a large space saving.[/color]
> It[color=green]
>> sounds to me like there's a whole lot of code duplicated in each[/color]
> handler;[color=green]
>> figure out what's common, write functions with parameters to do the[/color]
> common[color=green]
>> stuff, and have the individual handlers simply call the functions with[/color]
> the[color=green]
>> right parameters. That way the common code appears in only one place
>> rather than duplicated for every image.[/color]
>
> Hi Eric, if you _look_ you'll see that that is exactly how it already
> works.[/color]

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]

Re: Thumbnail gallery without tables?

"Eric Bohlman" <ebohlman@earth link.net> wrote in message
news:Xns949AECA 8DA940ebohlmano msdevcom@130.13 3.1.4...[color=blue]
> "Andrew Urquhart" <reply_via_cont act_page@websit e_in.sig> wrote in
> news:gH8%b.1119 $bJ1.416@newsfe 1-win:
>[color=green]
> > "Eric Bohlman" <ebohlman@earth link.net> wrote in message
> > news:Xns949A971 AC1ECDebohlmano msdevcom@130.13 3.1.4...[color=darkred]
> >> 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.[/color]
> >
> > Hi Eric, if you _look_ you'll see that that is exactly how it[/color][/color]
already[color=blue][color=green]
> > works.[/color]
>
> 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.[/color]

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!
:o)

Thanks for the interest.

Best,
--
Andrew Urquhart
Reply: https://www.andrewu.co.uk/about/cont...ewsgroup_ciwas

[Roy Reed]

Re: Thumbnail gallery without tables?

Steve R. wrote:[color=blue]
> Craig wrote in message ...[color=green]
>> Each div is float: left; with the same height and width.
>> http://www.amd-m.com/guys/[/color]
>
> 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.[/color]

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

https://www.reeddesign.co.uk

[Lauri Raittila]

Re: Thumbnail gallery without tables?

In article Andrew Urquhart wrote:[color=blue]
> "Sid Ismail" <elsid@nospam.c om> wrote in message
> news:l37l301amm f5jv979kpst4tuc uqde91fro@4ax.c om...[color=green]
> > On Tue, 24 Feb 2004 10:44:37 +1300, Max Quordlepleen <maxq@nonags.co m>
> > wrote:
> >
> > : and one example of an
> > : approach that worked was
> > : http://www.student.oulu.fi/~egea/Pho...ry/Virpiniemi/. This page
> > : renders properly for me in my Gecko browsers, and iCapture shows it as
> > : rendering properly in Safari, but in IE6, the thumbnails are lined up
> > : vertically in a single column. I am very pleased to have been able to
> > : avoid using any tables at all so far, and would love to keep this
> > : up. May I ask for suggestions on how to achieve a plain, boring
> > : table-like gallery in CSS2, sans tables?
> >
> >
> > What in heaven's name is wrong with using tables for this application?
> > Especially if you have text captions under/above each image.[/color][/color]

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.)
[color=blue][color=green]
> > Tables is more universal than souped-up morse code.[/color][/color]

Depends much how you use them.
[color=blue]
> 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][/color]

I have thought about

<table>
<tr><th>Caption <td>image
<tr><td>Caption 1<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 <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Lauri Raittila]

Re: Thumbnail gallery without tables?

In article Andrew Urquhart wrote:[color=blue]
> "Eric Bohlman" <ebohlman@earth link.net> wrote in message
> news:Xns949AECA 8DA940ebohlmano msdevcom@130.13 3.1.4...[color=green]
> > "Andrew Urquhart" <reply_via_cont act_page@websit e_in.sig> wrote in
> > news:gH8%b.1119 $bJ1.416@newsfe 1-win:
> >[color=darkred]
> > > "Eric Bohlman" <ebohlman@earth link.net> wrote in message
> > > news:Xns949A971 AC1ECDebohlmano msdevcom@130.13 3.1.4...
> > >> 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[/color][/color]
> already[color=green][color=darkred]
> > > works.[/color]
> >
> > 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.[/color][/color]

IIANM, you can read image path using JS somehow...
[color=blue]
> Hi Eric. I wrote the XML and XSLT behind the gallery (links to those[/color]
....[color=blue]
> 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!
> :o)[/color]

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.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Els]

Re: Thumbnail gallery without tables?

Lauri Raittila wrote:
[color=blue]
> In article Andrew Urquhart wrote:
>[color=green]
>>"Sid Ismail" wrote:
>>[color=darkred]
>>>What in heaven's name is wrong with using tables for this application?
>>>Especially if you have text captions under/above each image.[/color][/color]
>
> 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.)
>[color=green][color=darkred]
>>>Tables is more universal than souped-up morse code.[/color][/color]
>
> Depends much how you use them.
>[color=green]
>>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][/color]
>
> I have thought about
>
> <table>
> <tr><th>Caption <td>image
> <tr><td>Caption 1<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.[/color]

Lauri, I'm just wondering how you think about how I did it
on these example pages:
W:\Rachel's Site\Rachel\thu mbswithcaptions list.html
W:\Rachel's Site\Rachel\thu mbswithcaptions .html
W:\Rachel's Site\Rachel\thu mbswithcaptions centered.html

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Paul Furman]

Re: Thumbnail gallery without tables?

Els wrote:
[color=blue]
> Lauri Raittila wrote:
>[color=green]
>>[color=darkred]
>>> 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][/color]
>>
>>
>> I have thought about
>>
>> <table>
>> <tr><th>Caption <td>image
>> <tr><td>Caption 1<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.[/color]
>
>
> Lauri, I'm just wondering how you think about how I did it on these
> example pages:
> W:\Rachel's Site\Rachel\thu mbswithcaptions list.html
> W:\Rachel's Site\Rachel\thu mbswithcaptions .html
> W:\Rachel's Site\Rachel\thu mbswithcaptions centered.html[/color]


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]

Re: Thumbnail gallery without tables?

In article Els wrote:[color=blue]
> Lauri Raittila wrote:[/color]

[Using one table and making it fluid using CSS]
[color=blue][color=green]
> > 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.[/color]
>
> Lauri, I'm just wondering how you think about how I did it
> on these example pages:
> W:\Rachel's Site\Rachel\thu mbswithcaptions list.html
> W:\Rachel's Site\Rachel\thu mbswithcaptions .html
> W:\Rachel's Site\Rachel\thu mbswithcaptions centered.html[/color]

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

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Els]

Re: Thumbnail gallery without tables?



Lauri Raittila wrote:
[color=blue]
> Els wrote:[/color]
[color=blue][color=green]
>>Lauri, I'm just wondering how you think about how I did it
>>on these example pages:
>>W:\Rachel's Site\Rachel\thu mbswithcaptions list.html
>>W:\Rachel's Site\Rachel\thu mbswithcaptions .html
>>W:\Rachel's Site\Rachel\thu mbswithcaptions centered.html[/color]
>
> Your URLs are bit hard to follow... I suppose these are the same as the
> one on black background.[/color]

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

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -