A picture gallery

thewebkid · #1 Nov 15th, 2007, 04:08

What is the best way to display images on a web page? I am building a site and I have several pages dedicated to displaying images in several rows going down each page. Should I just use a table?

alexgeek · #2 Nov 15th, 2007, 07:22

Lightbox - probably th best for what you want!

thewebkid · #3 Nov 15th, 2007, 10:47

Oh I already have that, I meant the page itself. What's the best way of displaying them so that i doesn't look all thrown together.

Lchad · #4 Nov 15th, 2007, 13:20

No you should use tables. I would set up a div class such as
.gallery

Set each with a width and possibly a height, float it left and have each one follow the next across the page. Inside the div place your image.

You can even put a caption in the div by using <p></p> tags.

thewebkid · #5 Nov 15th, 2007, 13:40

I want to create thumbnails and once they click on the image, it will show up in a lightbox, is this how it should go:

Code: Select all

 
<table>
<tr>
<td>
<div class="gallery"><a href="image.jpg" rel="lightbox"><img src="image.jpg" width="100" height="100" /></a>
</div>
</td>

<td><div class="gallery"><a href="image.jpg" rel="lightbox"><img src="image.jpg" width="100" height="100" /></a>
</div>
</td>
</tr>
</table>

and the css:

Code: Select all

.gallery {float: left}

Lchad · #6 Nov 15th, 2007, 15:44

Oh my gosh... I'm sorry I had a typo in my last reply. You should not use tables... contrary to what I posted last time.
UGH.

You should be using div's instead of tables. Tables are for tabulated data, not images.

Sorry about that.

thewebkid · #7 Nov 15th, 2007, 16:02

So should I do this:

Code: Select all

 
<div class="gallery><a href="image"><im src="image" width="100"  height="100"></div>
<div class="gallery><a href="image"><im src="image" width="100"  height="100"></div>

Then:

Code: Select all

 
.gallery {float: left}

Also, will these images be displayed vertically or horizontally? I want them to be displayed vertically.

alexgeek · #8 Nov 16th, 2007, 06:52

You would need many divs inside an overall container div.
I think the last code you posted will not work.
Try something like:
<div id="photos">
<div class="gallery><a href="image"><im src="image" width="100" height="100"></div>
<div class="gallery><a href="image"><im src="image" width="100" height="100"></div>
<div class="gallery><a href="image"><im src="image" width="100" height="100"></div>
</div>

#Photos having a set width etc.

thewebkid · #9 Nov 16th, 2007, 13:09

Ah! Thank you, I will definitely try that.

thewebkid · #10 Nov 16th, 2007, 20:25

O sorry I asked the wrong, I meant that I want to display them horizontally, not vertically. I wanted to display them in rows.

thewebkid · #11 Nov 19th, 2007, 13:20

This image is the gallery from stockvault.net. I would like the same layout for my gallery, because not all my thumbnails are the same. My thumbnails are 96x144 and 144x96.

alexgeek · #12 Nov 19th, 2007, 19:57

That should work, if the images are large enough to fit on one row.
If you had float: left on the images remove that.

thewebkid · #13 Nov 19th, 2007, 21:02

So what code should I use?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Help with picture upload	Pss	PHP Forum	2	Apr 21st, 2008 20:37
Created Flash Photo Gallery in PhotoShop. How can I put this Gallery INSIDE a page??	BlackReef	Flash & Multimedia Forum	3	Dec 13th, 2007 18:30
Help wanted with picture gallery for my website	sexyemma	Starting Out	5	May 9th, 2007 17:09
create a picture gallery	afuller	Web Page Design	2	Aug 23rd, 2006 16:44
Random picture survey picture help	Jould	Web Page Design	6	Feb 25th, 2004 14:07

		Webforumz.com > Main Forums > Planning Your Website > Website Planning
A picture gallery