PDA

Click to See Complete Forum and Search --> : Need a gallery page

itchybrain
07-25-2003, 08:38 AM
Hi, I'm new here and as you can tell my brain is really itchy right now. I'm not trying to be a Webmaster, just trying to put a site together for myself. I've been trying to create an online portfolio of art. Went to Angelfire and they had a gallery template to use but there are no explanations of how to set the thing up. All my images are loaded, including thumbnail images but I can't figure out how to get it all together.

The part that I can't seem to understand is where do I identify the original image. In the following I've put my info in except I don't know what to do with what they have called "gallery1-1a.html" in the link thumnails to original versions section. Is this a page that I have to set up first with the original images in, in addition to my images directory?

Thanks for looking and hope someone can help me.

Here's the gallery page:

<HTML>
<!-- This page originated from the Angelfire.com HTML Library -->

<HEAD>
<TITLE>

My Name Goes Here - Gallery

</TITLE>
</HEAD>


<BODY BGCOLOR="#FFFFFF">

<BR>
<BR>

<CENTER>
<TABLE WIDTH="70%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP">
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="+2" COLOR="#000000">
<B>

<!-- you can put a title for your gallery in here -->
Still Life Gallery

</B></FONT>
</TD>
</TR>
</TABLE>

<BR>

<TABLE WIDTH="70%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP">
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">

<!-- describe your photo gallery -->
All paintings are original 8 x 10 pastels.
<BR></FONT>

</TD>
</TR>
</TABLE>

<BR>

<TABLE CELLSPACING="10" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1a.html"><IMG SRC="images/Lemonsthumb.jpg" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">
<!-- describe your photos -->
Four Lemons

</FONT>
</TD>

<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1b.html"><IMG SRC="images/onionthumb.jpg" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">
<!-- describe your photos -->
Spring Onion

</FONT>
</TD>

<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1c.html"><IMG SRC="images/Staffordshirethumb.jpg" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">
<!-- describe your photos -->
Staffordshire & Eggs

</FONT>
</TD>

<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1d.html"><IMG SRC="images/Bananasthumb.jpg" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">
<!-- describe your photos -->
Two Bananas, One Apple

</FONT>
</TD>
</TR>
</TABLE>

<TABLE CELLSPACING="10" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1e.html"><IMG SRC="images/Milk_bottlethumb.jpg" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif"SIZE="2" COLOR="#000000">
<!-- describe your photos -->
Milk Bottle

</FONT>
</TD>

<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1f.html"><IMG SRC="images/Peachesthumb.gif" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">
<!-- describe your photos -->
Peaches

</FONT>
</TD>

<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1g.html"><IMG SRC="images/Pearthumb.jpg" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">
<!-- describe your photos -->
The Bartlett Pear

</FONT>
</TD>

<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1h.html"><IMG SRC="images/Pears2thumb.jpg" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">
<!-- describe your photos -->
Bosc Pears

</FONT>
</TD>
</TR>
</TABLE>

<TABLE CELLSPACING="10" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1i.html"><IMG SRC="images/Gravyboatthumb.jpg" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">
<!-- describe your photos -->
Gravy Boat

</FONT>
</TD>

<TD ALIGN="CENTER" VALIGN="TOP">
<!-- link your thumbnails to the full-size versions -->
<A HREF="gallery1_1j.html"><IMG SRC="images/Fancy_gravyboatthumb.jpg" WIDTH="40" HEIGHT="40" BORDER="0"></A>

<BR>
<FONT FACE="Arial, Helvetica, Verdana, Sans Serif" SIZE="2" COLOR="#000000">
<!-- describe your photos -->
The Fancy Gravy Boat


</FONT>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>




:confused:
CyCo
07-25-2003, 08:51 AM
...according to your code, you'll need to create 10 pages with the appropriate images on each page

gallery1_1a.html...
through...
gallery1_1j.html
itchybrain
07-25-2003, 09:33 PM
Thanks for looking cyco - this is exactly why my brain is so itchy. Can't I just leave all my images and thumbnails in one directory and refer to them by their names? This gallery page is supposed to have 10 or so thumbnails showing and when you click on one you can see the larger original image. So what you're telling me is that I have to create a page for each image and then this bunch of html will collect them and attach the thumbnails. Am I understanding? If that is what I'm supposed to do, then my next dilemma is what goes on those "pages" :confused: just the html that identifies the image?
PeOfEo
07-25-2003, 10:40 PM
You could always just make one page using a server side language and let it dynamically do the rest for you :) But that is not for someone who is new to web design by any means. I dont see why would you have to make one html doccument for each image though, cant you just directly link the thumnails to the larger image and do something in the link like target="_blank" so that just the image opens in a new window? Does that sound like a solution to you or not or did I totally miss what you are talking about. Oh and by the way by your code it looks like you are just makeing large images smaller witht he width attribute when you should actually make thumbnails to lower the load time. Maybe that is what they were refering to, make a thumb for each of your images.
itchybrain
07-26-2003, 06:58 AM
Thanks PeO, you're right I'm too new to web design and maybe I bit off more than I can chew trying to do this myself, but now I'm feeling like I'm close to what I want and just have to try to accomplish this. So, the target="_blank" thing sounds like something that would work. Yes I do just want the page to open with just the image on it, after clicking the thumbnail. I'll go look up how to use target now.
PeOfEo
07-26-2003, 11:26 AM
Say this is the link from your thumbnail to your image, it would look like <a href="./myimage.jpg" target="_blank"><img src="./mythumb.jpg"></a> that will trigger the link to open the image up in a new window.
itchybrain
07-26-2003, 01:11 PM
Thanks again PeO, I'll test that and see how it works!:)
PeOfEo
07-27-2003, 04:07 PM
no problem