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

[Ed]

I know some HTML and CSS and want to use these tools, avoiding the use
of tables, to set up a gallery of thumbnail images which I can click on
to see the full sized image.

From what I read here and elsewhere, there seems to be two approaches:

One is to create a basic unordered list of thumbnails (and any
associated text) and float these.

The second, is to put each thumbnail within its own div (with associated
text) and float these.

Is there any significant advantages/disadvantages to using the list
approach to using the div approach?


Many thanks,
Ed

 

[Andy Dingley]

Is there any significant advantages/disadvantages to using the list
approach to using the div approach?

No, absolutely none. For any "significant" advantage at least.

What _is_ significant is that a sequence of floated boxes (either way
you describe) has better fluid behaviour than <table> markup.

<ul><li>... markup is arguably more appropriate than meaningless
<div>s, as there is some vague notion of a "list" structure to these
thumbnails. That's pretty tenuous though.

Default CSS rendering of <div> is likely to be more appropriate than
for <ul><li>, in some fallback cases.

Neither of these distinctions is major. I'd use <div>

 

[Sid]

: I know some HTML and CSS and want to use these tools, avoiding the use
: of tables


But tables is the most convenient tool for this...

Sid

 

[Travis Newbury]

Is there any significant advantages/disadvantages to using the list
approach to using the div approach?

This is where some simple Flash really shines.

 

[Chaddy2222]

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.

 

[Els]

[linked thumbnails on a page]

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.

 

[Jeff]

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

Not exactly hard to do using javascript. And amongst the general
populace, javascript is widely left on.

Jeff

 

[A-OK-SITE]

I know some HTML and CSS and want to use these tools, avoiding the use
of tables, to set up a gallery of thumbnail images which I can click on
to see the full sized image.

From what I read here and elsewhere, there seems to be two approaches:

One is to create a basic unordered list of thumbnails (and any
associated text) and float these.

The second, is to put each thumbnail within its own div (with associated
text) and float these.

Is there any significant advantages/disadvantages to using the list
approach to using the div approach?

Many thanks,
Ed

Ed,

Check out this software it works great and creates valid pages
http://jalbum.net/

For a working example visit http://a-ok-site.com/carrie_underwood/carrie_underwood_gallery/index.html

Daniel

http://a-ok-site.com

 

[Travis Newbury]

HTML is easy enough for arrows between pictures.

But does it "shine"?

 

[A-OK-SITE]

But does it "shine"?

I think so, but you need to check it out to see if it meets your
needs. It is fully customizable and offers many ready made skins. It
is free to use and runs on your computer, so download it play around
and see what you think. It also has FTP capabilities. I think you be
pleasantly surprised, and I love it.

Daniel

http://a-ok-site.com

 

[Els]

But does it "shine"?

Only if I adjust my screen's brightness, but I'd say that goes for
Flash as well ;-)

(btw - I didn't respond to your message, because I have no idea about
Flash being better for this job or not (apart from accessibility of
course). Just said that for having a clickable arrow to go to the next
image, you don't need Flash)

 

[Els]

I think so, but you need to check it out to see if it meets your
needs. It is fully customizable and offers many ready made skins. It
is free to use and runs on your computer, so download it play around
and see what you think. It also has FTP capabilities. I think you be
pleasantly surprised, and I love it.

I think you're mistakenly thinking Travis responded to your reply to
the OP

(hint: there's no mention of 'jalbum' in this thread you're replying
to)

 

[A-OK-SITE]

I think you're mistakenly thinking Travis responded to your reply to
the OP

(hint: there's no mention of 'jalbum' in this thread you're replying
to)

Yep, I noticed that to late, sorry all.

Daniel

 

[SigelsTankMage]

google javascript lightbox

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Mon, 28 Jan 2008 13:07:52 GMT
Ed scribed:

I know some HTML and CSS and want to use these tools, avoiding the use
of tables, to set up a gallery of thumbnail images which I can click on
to see the full sized image.

From what I read here and elsewhere, there seems to be two approaches:

One is to create a basic unordered list of thumbnails (and any
associated text) and float these.

The second, is to put each thumbnail within its own div (with associated
text) and float these.

Well, you either read wrong or what you read is wrong.

Is there any significant advantages/disadvantages to using the list
approach to using the div approach?

They both suck.

From your "specs" above, all you need are simple inline images and links.
If you want a somewhat symmetrical appearance, size your thumbs similarly
and use margins and/or paddings appropriately.

 

[Nik Coughlin]

: I know some HTML and CSS and want to use these tools, avoiding the use
: of tables


But tables is the most convenient tool for this...

They don't flow

 

[dorayme]

: I know some HTML and CSS and want to use these tools, avoiding the use
: of tables


But tables is the most convenient tool for this...

Not if you don't want to decide how many images should occupy a
row nor to allow the greatest flexibility for the users.

 

[Chaddy2222]

[linked thumbnails on a page]

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.

 

[Travis Newbury]

Only if I adjust my screen's brightness, but I'd say that goes for
Flash as well ;-)
(btw - I didn't respond to your message, because I have no idea about
Flash being better for this job or not (apart from accessibility of
course). Just said that for having a clickable arrow to go to the next
image, you don't need Flash)

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.

 

[Nico Schuyt]

I know some HTML and CSS and want to use these tools, avoiding the use
of tables, to set up a gallery of thumbnail images which I can click
on to see the full sized image.
From what I read here and elsewhere, there seems to be two approaches:
One is to create a basic unordered list of thumbnails (and any
associated text) and float these.
The second, is to put each thumbnail within its own div (with
associated text) and float these.
Is there any significant advantages/disadvantages to using the list
approach to using the div approach?

It looks like you want to use captions and (probably) different
orientations.
Best solution here is using a small floating table for each image. One row
for the image and another for the caption.
Example: http://www.hermansmith.nl/thema_reis.php
Alternatives: http://www.cs.tut.fi/~jkorpela/www/captions.html

If you have some knowledge of php, you can write a script that creates a
gallery out of the pictures in a directory.