Photo Gallery. What is best practice? List or Divs?

[Els]

On Jan 28, 8:07 am, Ed <ex@directory> wrote:

[linked thumbnails on a page]

This is where some simple Flash really shines.

I agree especially if you want a slide show type effect where a user
clicks on an arrow and the next pic is visible.

HTML is easy enough for arrows between pictures.

Well yes it does. But it does depend on what you want to do.
You I guess could add a Javascript event to the arrow which would
animate the images but it's offen just easier done in Flash as you can
have the images and everything in one file, but if file size and
accessibility are a concern then obviously Flash would not be a good
tool. Unless you like doing extra work to make it accessible.

From this explanation of yours, I think I misunderstood what you meant
by clicking an arrow to go to the next picture. I now see that you
probably meant to click it only once, and then the next pictures would
keep rolling in, automated. I was only talking about a link. A simple,
Flash / JavaScript-less link, to go to the next image.

 

[Els]

Flash may not be the best tool for this job. But it does do slide
shows well, so the OP should at least take a look at it.

Not objecting to that, although his question was really only about how
to lay out the thumbnails on the page ;-)

 

[Chaddy2222]

Chaddy2222 wrote:
[linked thumbnails on a page]
This is where some simple Flash really shines.
I agree especially if you want a slide show type effect where a user
clicks on an arrow and the next pic is visible.
HTML is easy enough for arrows between pictures.

Well yes it does. But it does depend on what you want to do.
You I guess could add a Javascript event to the arrow which would
animate the images but it's offen just easier done in Flash as you can
have the images and everything in one file, but if file size and
accessibility are a concern then obviously Flash would not be a good
tool. Unless you like doing extra work to make it accessible.

From this explanation of yours, I think I misunderstood what you meant
by clicking an arrow to go to the next picture. I now see that you
probably meant to click it only once, and then the next pictures would
keep rolling in, automated. I was only talking about a link. A simple,
Flash / JavaScript-less link, to go to the next image.

Yes that is what I was on about and yes I do know what you ment.

 

[Travis Newbury]

Not objecting to that, although his question was really only about how
to lay out the thumbnails on the page ;-)

Right, and the layout is part of what you would do in Flash.

 

[Els]

Right, and the layout is part of what you would do in Flash.

But then you'd have no advantage over a table layout. Or does Flash
have a way to know how wide the browser window is and use that to
calculate how many thumbnails would be sitting in each row?

 

[Chaddy2222]

But then you'd have no advantage over a table layout. Or does Flash
have a way to know how wide the browser window is and use that to
calculate how many thumbnails would be sitting in each row?

Well Flash users Action Script which is kind of like Java, so yes I
would say that is how it does work.
But it might be a bit of overkill for a simple photo page.
I would just use a table personally and have done so on one of the
sites I worked on *which I can't post a link too.

 

[Travis Newbury]

But then you'd have no advantage over a table layout. Or does Flash
have a way to know how wide the browser window is and use that to
calculate how many thumbnails would be sitting in each row?

Yes, I could find the width of the window that I am sitting in and
make the appropriate modifications in the xScale and yScale properties
of the sprite(s) I load the thumb into.

 

[Travis Newbury]

Well Flash users Action Script which is kind of like Java, so yes I
would say that is how it does work.
But it might be a bit of overkill for a simple photo page.

It sounds like overkill to you because you (I am assuming here) are
not a Flash developer. Thumb based slide show is quite simple to make
in Flash. Even adding the code to get the window size and adjust the
thumbs appropriately is not that big of a deal to code in Flash.

 

[Chaddy2222]

It sounds like overkill to you because you (I am assuming here) are
not a Flash developer.  Thumb based slide show is quite simple to make
in Flash.  Even adding the code to get the window size and adjust the
thumbs appropriately is not that big of a deal to code in Flash.

Hmmm yeah.
I think I have said similar things to people who say that CSS for
layout is too hard as well.

 

[Els]

Yes, I could find the width of the window that I am sitting in and
make the appropriate modifications in the xScale and yScale properties
of the sprite(s) I load the thumb into.

As I'm not sure what sprites are in this respect, does that mean the
thumb would get smaller in a smaller window, or that instead of 5
thumbs there'd be 4? I've seen enough Flash that scales with the
window, but it only means that on small windows the text gets *really*
unreadable

Anyway, if the number of thumbs per row can be dependent on window
width, then I agree Flash wouldn't be that bad for it. Except still
for accessibility of course...

 

[Nico Schuyt]

Anyway, if the number of thumbs per row can be dependent on window
width, then I agree Flash wouldn't be that bad for it. Except still
for accessibility of course...

Is accessibility in this case (a photo gallery) really an issue here Els?

 

[Els]

Is accessibility in this case (a photo gallery) really an issue here Els?

How do you tab from link to link with no mouse? Even if your eyes work
perfectly?

Besides, I think the discussion about the motives for good values for
alt attributes for images is too old to start it up again ;-)

 

[Nico Schuyt]

How do you tab from link to link with no mouse? Even if your eyes work
perfectly?

Navigation through such a site will be difficult anyway without a mouse.

Besides, I think the discussion about the motives for good values for
alt attributes for images is too old to start it up again ;-)

Your arguments are (generally spoken) valid (of course!!), but in something
graphically like a photo gallery ...
The advantages of a Flash presentation may* be greater than the
disadvantages.
* I'm not so enthousiast myself about the average Flash gallery: the
resizing of images leads to bad quality on the screen.

 

[Els]

Navigation through such a site will be difficult anyway without a mouse.

How so?

Excercise for you:
http://locusmeus.com/dimage-gallery01.html
Don't use your mouse. How difficult is it?

 

[Travis Newbury]

As I'm not sure what sprites are in this respect, does that mean the
thumb would get smaller in a smaller window, or that instead of 5
thumbs there'd be 4? I've seen enough Flash that scales with the
window, but it only means that on small windows the text gets *really*
unreadable

I scale the individual images. I would not (necessarily) scale the
entire Flash Stage. And you are right, just changing the size of the
stage could cause the fonts for become too small.

Anyway, if the number of thumbs per row can be dependent on window
width, then I agree Flash wouldn't be that bad for it. Except still
for accessibility of course...

yep, you will never lose all the accessibility issues you get when you
use Flash.

 

[Els]

I scale the individual images. I would not (necessarily) scale the
entire Flash Stage.

Not sure if you answered my question though: say you are doing a Flash
gallery, with 20 thumbnails. Each thumbnail being 180px wide. You're
thinking of a window of 800px, so with a bit of space between them,
you'll build the thing to hold 4 thumbnails per row, and there will be
5 rows.
Is, or isn't it, possible to programm the Flash so, that if the window
would be 600px wide, only 3 thumbnails would be shown per row, thus
making 7 rows instead of 5, while if the window would be 1200px wide,
there's be only 4 rows, and 6 images per row? As in 'flexible'?

From your answer, I'm guessing it isn't, and you just make each
thumbnail smaller, so there are still 4 in a row.

 

[Nico Schuyt]

Nico Schuyt wrote:

How so?
Excercise for you:
http://locusmeus.com/dimage-gallery01.html

The page needs some time to stabilize (IE6). Clear your cache and see what I
mean

Don't use your mouse. How difficult is it?

Almost impossible

- First tab -> 'Skip to content'. Pressed Enter and expected to have focus
on the first image (that *is* the content imo) but it takes another 12 tab's
to get to the first photo.
- It's hard too see which image has focus (must be my age of course)
- Image enlarged with Enter. How do I return? I read somewhere it should be
ALT + LEFT ARROW + BACKSPACE, but that doesn't seem to work.
Well, it can be doen but I'm glad I have a mouse

Nice photographs however!

 

[Els]

The page needs some time to stabilize (IE6). Clear your cache and see what I
mean

I know - it's because I don't give the width and height of each image
in the HTML.

Almost impossible

- First tab -> 'Skip to content'. Pressed Enter and expected to have focus
on the first image (that *is* the content imo)

No, there is text before the images.

but it takes another 12 tab's
to get to the first photo.

In Firefox one tab (after the "skip to content") goes straight to the
first picture - I'll have a look why it doesn't in IE. The page does
scroll up, so we do arrive at #content, but then the next tab goes to
the top of the page again. Makes no sense to me.

It also doesn't help that IE7 needs 8 (!) tabs to get to the page at
all. (address bar, refresh button, Google search box, Google search
box button, favourites button, page tab, home button)

Use Firefox!

- It's hard too see which image has focus (must be my age of course)

It has both the browser's own focus outline, and a subtle colour
change. But...we were talking motor skills, not eye strain - it's a
photo gallery after all, remember? ;-)

- Image enlarged with Enter. How do I return? I read somewhere it should be
ALT + LEFT ARROW + BACKSPACE, but that doesn't seem to work.

That's one thing I could add, yes, a back link. Without a mouse, there
is no indication that the image itself leads back to the thumbnails,
although it is the case in almost every photo gallery I've ever seen.

Well, it can be doen but I'm glad I have a mouse

I find it easier without the mouse to be honest! No need to find the
pointer on my screen, no need to stretch my arm onto my desk, no risk
of throwing over my tea... ;-)

That is, unless I'd be stuck with IE :\

Nice photographs however!

Thanks.

 

[Nico Schuyt]

Nico Schuyt wrote:

I know - it's because I don't give the width and height of each image
in the HTML.

Any specific reason for that?

I'll be surprised if there isn't a standard key for that in IE

That's one thing I could add, yes, a back link. Without a mouse, there
is no indication that the image itself leads back to the thumbnails,
although it is the case in almost every photo gallery I've ever seen.

I should have noticed that back link on the image. Maybe the image should
get the focus in order to return with one Enter instead of 3 Tabs + Enter

I find it easier without the mouse to be honest!

You're young. At my age one needs some tools (glasses, hearing device,
mouse, ..)

 

[Bergamot]

- Image enlarged with Enter. How do I return? I read somewhere it should be
ALT + LEFT ARROW + BACKSPACE, but that doesn't seem to work.

Try just ALT + left arrow