Questions on thumbnail photos and websites

[dummoxe]

I just had a couple of questions about photos and galleries: In Chapter 5, or the book 'Build Your Own Website The Right Way using HTML and CSS" there's a section called "Moving beyond a Simple Gallery". It says you can download programs to make thumbnails of your photos with a link to the full-sized version. I downloaded a program called TGG 2.6.0.0 Bullion-Investor.com_Freeware, following a link you gave in the book. I have hundreds of photos that I made into thumbnails, but I was wondering: what do I do now? How do I use CSS to style the thumbnails and connect it to my main site? Also, I have the date for each photo on there and I was wondering how to take it off.
Please help!

[ralph.m]

Hi dummoxe, welcome to SitePoint!

That page you cited also says "Microsoft .NET Framework 2.0 required." Unless you have that, perhaps there's something missing.

Anyway, there are other free programs out there for resizing images, such as ezThumbs. When you've got your images ready, you could look at the many jQuery galleries out there, such as slimbox2.

[dummoxe]

Thanks for replying, Ralph! You said that there might be something missing if I don't have "Microsoft .NET Framework 2.0." How do I check if I have ""Microsoft .NET Framework 2.0." Also, what exactly do jQuery galleries do? I looked at slimbox and I don't know how to apply to it to my website which I am trying to make. So there is no way to use CSS to format my image gallery? (Also, am I replying to this correctly? Since this is my first post, I'm not sure how to corrdctly reply to my own post!)

[ralph.m]

Thanks for replying, Ralph! You said that there might be something missing if I don't have "Microsoft .NET Framework 2.0." How do I check if I have ""Microsoft .NET Framework 2.0."

It's software you pay for, so you obviously don't have it.

Also, what exactly do jQuery galleries do? I looked at slimbox and I don't know how to apply to it to my website which I am trying to make. So there is no way to use CSS to format my image gallery?

Sure, you can do it with CSS alone. jQuery is just one of many options—for example, Slimbox creates a nice popup effect that is quite popular. CSS galleries are a little less fancy and a bit limited. Anyway, you will probably need to provide some sort of indication of what look you want, how many images you have, and make a start at doing what you can. Then post a link to what you've done, and suggest what you want to do next.

Also, am I replying to this correctly?

Yep, quite correctly.

[dummoxe]

OK I didn't know this just 2 days ago, but I have figured out how to get my photos onto my website. I even have thumbnails that link to each of my photos! You were wondering how many photos I had -- I have about 350. Now I'm wondering: is there an easier way of captioning all 350 photos than manually doing the

<div class="galleryphoto">
<img src="gallery/building.jpg> width="400" height="250"
alt="A nice building"
<p> A building I saw the other day.</p>

for EVERY one of the 350. Also, currently, there is a blue border around unviewed photos and a purple one around viewed ones. I would like this to be replaced with an always-black 1 or 2 pixel-border. Also, I want more space between each thumbnail.
Lastly, should I caption the thumbnail or the photo itself when you click on it?
And when you click on a photo, instead of displaying it in a blank screen, can it be part of my website with the heading and navigation bar and stuff? (or would that be too much work)? thanks!

[ralph.m]

currently, there is a blue border around unviewed photos and a purple one around viewed ones. I would like this to be replaced with an always-black 1 or 2 pixel-border. Also, I want more space between each thumbnail.

Sounds like a border on links. We need to see your code to be of much help here.

should I caption the thumbnail or the photo itself when you click on it?

It's up to you. You could do both. What code are you using for your gallery?

And when you click on a photo, instead of displaying it in a blank screen, can it be part of my website with the heading and navigation bar and stuff? (or would that be too much work)?

That's easy. There are lots of ways to do it, but the easiest is to use something like Slimbox2, as I mentioned.

[dummoxe]

So you want to see my CSS code? here it is:

body {
font-family: Lucida Grande’, ‘Lucida Sans Unicode’, Lucida, Verdana, Helvetica, Arial, sans-serif;
line-height: 135%;
padding: 0;
margin: 0;
background-color: #9edfff;
}
#bodycontent {
margin: 2em;
}
h1, h2, h3, h4 {
font-family: Baskerville, Georgia, Garamond, ‘Times New Roman’, Times, serif;
}
h1 {
font-size: xx-large;
background-color: #B00000;
color: #ffc75d;
padding-top: 1.1em;
padding-bottom: 1.1em;
padding-left: 1em;
padding-right: 1.2em;
margin: 0;
background: #B00000 url(p2p-paris-bg.jpg) repeat-y right;
}
#tagline {
background-color: #b00000;
background: #b00000 url(fading-bg.png) repeat-y right;
border-top: 3px solid #b00000;
border-bottom: 3px solid #b00000;
font-style: italic;
font-family: Baskerville, Georgia, Garamond, ‘Times New Roman’, Times, serif;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .9em;
margin: 0;
background: navy url(navy-bg.jpg) repeat-y right; 
}
.feature {
position: absolute;
top: 329px;
right: 2px;
}
ul#main-nav {
font-family:helvetica,arial,sans-serif;
margin-left:2em;
padding:.2em;
alignment: center;
float:left;
width: 90%;
}
ul#main-nav li {
margin:.2em;
padding:.2em;
list-style:none;
float:left;
margin:0 0.3em 0 0;
}
ul#main-nav li a {
text-decoration:none;
display:block;
padding:0.3em 0.5em;
border-top:0.4em solid navy;
border-bottom:0.4em solid navy;
color: #ffc75d;
background:#b00000;
font-size:0.8em;
width:11em;
text-align:center;
}
ul#main-nav li a:hover {
border-top:0.4em solid #900;
border-bottom:0.4em solid #900;
color:#000000;
text-transform: uppercase;
font-weight: bold;
background-color: #ffc75d;
}
#homep2p {
padding-right: 208px;
}
.journalfoto{
width: 400;
float: right;
}
.journalfoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 300px;
line-height: 1.4em;
text-align: center;
}
.journalalign {
padding-right: 330px;
font-size: small;
line-height: 125%;
}
.journaltext {
position: absolute;
padding: 300px;
font-size: small;
line-height: 125%;
}
.journal {
font-size: small;
line-height: 125%;
}
.galleryrow: {
border: 2px solid black;
padding: 5px;
}

Im REALLY sorry that I copied it like this, put my php code/code thing isn't working right now!

[dummoxe]

in case you didn't want the css, here's the HTML:

<!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Strict//EN"
     "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">      
     <head>
          <title>photos</title>
<meta http-equiv="Content-Type"
               content="text/html; charset=utf-8"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
     </head>
<div id="header">
<div id="sitebranding">
<h1>Yasha's European Adventure</h1>
</div>
<div id="tagline">
<FONT SIZE="+1"><FONT COLOR="#7cfc00">T</FONT><FONT COLOR="#9de100">h</FONT><FONT COLOR="#bec500">e</FONT><FONT COLOR="#dfa800"> </FONT><FONT COLOR="#ff8c00">t</FONT><FONT COLOR="#ffa333">i</FONT><FONT COLOR="#ffba66">m</FONT><FONT COLOR="#ffd29a">e</FONT><FONT COLOR="#ffe9cd"> </FONT><FONT COLOR="#ffffff">o</FONT><FONT COLOR="#ffe9cd">f</FONT><FONT COLOR="#ffd29a"> </FONT><FONT COLOR="#ffba66">m</FONT><FONT COLOR="#ffa333">y</FONT><FONT COLOR="#ff8c00"> </FONT><FONT COLOR="#e6a300">l</FONT><FONT COLOR="#cbb900">i</FONT><FONT COLOR="#b1d000">f</FONT><FONT COLOR="#96e600">e</FONT><FONT COLOR="#7cfc00">!</FONT></FONT> 
</div>
</div> <!-- end of header div -->
<body>
<div id="navigation">
<ul id="main-nav">
<li><a href="home.html">Home</a></li>
<li><a href= "journal.html">My Journal</a></li>
<li><a href= "index.html">Photo Gallery</a></li>
<li><a href= "learned.html">10 Things I Learned</a></li>
<li><a href= "itinerary.html">My Itinerary</a></li>
</ul>
</div> <!-- end of navigation div -->
<tr class="galleryrow"><td><a href='Europe 2010!! 001.jpg'><img src='thumb/Europe 2010!! 001.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 002.jpg'><img src='thumb/Europe 2010!! 002.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 004.jpg'><img src='thumb/Europe 2010!! 004.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 006.jpg'><img src='thumb/Europe 2010!! 006.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 008.jpg'><img src='thumb/Europe 2010!! 008.png' alt='pic'></img></a></td></tr>
<tr class="galleryrow"><td><a href='Europe 2010!! 009.jpg'><img src='thumb/Europe 2010!! 009.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 010.jpg'><img src='thumb/Europe 2010!! 010.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 011.jpg'><img src='thumb/Europe 2010!! 011.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 012.jpg'><img src='thumb/Europe 2010!! 012.png' alt='pic'></img></a></td><td><a href='Europe 2010!! 013.jpg'><img src='thumb/Europe 2010!! 013.png' alt='pic'></img></a></td></tr>
<tr><td><a href='Europe 2010!! 014.jpg'><img src='thumb/Europe 2010!! 014.png' alt='pic'></i.....

so now you have my css and html! so could you walk me through how to style this the way I want (since I'm stilla beginner?) thanks

[dummoxe]

OK I downloaded slimbox but i have NO iDEA what to do with it! I would really appreciate a step-by-step instruction as to how to integrate Slimbox into my photo gallery!

[ralph.m]

The page you download slimbox from does have instructions on it. Firstly, in your head section you need to place two javascript links (see the code they give). In a folder called something like /js/ place the slimbox.js code, and also go to the jQuery site and get the latest version of jQuery. Paste that into a file called jquery.js (or similar) and place that also in the /js/ folder. Then make sure the two links in the head point to those two files.

Also link to the slimbox.css file in the head of your document.

Then paste the slimbox code into your page, and replace the slimbox images with your images. You will probably need to alter the slimbox.css file to match the size of your thumbnails etc, so a bit of tweaking to do.

[dummoxe]

When you say "slimbox code" what code are you referring to?

[dummoxe]

Also, how do I replace slimbox images with my own images?

[ralph.m]

When you say "slimbox code" what code are you referring to?

Sorry, I guess it wasn't very clear if you don't already know. On the Slimbox2 page, there is a vertical menu (with a greyish background) that links to Introduction, Demo... Download. Click the Download button to get all the Slimbox code. Then all you need to do is integrate that code into your page.

I know I'm not being super-helpful here, but it takes time to do this and set it up, and I have paying customers hammering me on the phone. So I have to throw you in the deep end and let you try a bit for yourself... but that will help you in the long run. See if you can make anything of that code, then post back if more help is needed. Ideally, put up a live page of what you've got so we can easily see how it's going.

[dummoxe]

Sorry! I'll try to figure it out myself! It's just that this website has to be finished by September 16,so I don't have too much extra time to spend on trying things for days or even weeks.

Ideally, put up a live page of what you've got so we can easily see how it's going.

I'm not sure how to do this. But again, I'll try to figure it out and if I can't, I'll reply again!

[dummoxe]

OK i tried everything I could do... it won't activate... I don't know what to do, so I'm posting this... you don't have to respond right now though if you have paying customers... I can wait a few days.Thanks!

[ralph.m]

I'm not sure how to do this.

How do you plan to put the site online? If you have upload facilities, upload a page, such as test.html, and a /js/ folder, and an /images/ folder etc. That's all you need. Do you have a system for doing this yet (web hosting, an ftp program etc.)?

[dummoxe]

no. should I find a host?

[Mittineague]

With a little less than 2 weeks, you may be hard pressed to get yourself your own hosting server for testing purposes.

Can you set up a testing directory on your clients server?

Or better yet, install a localhost server (WAMP, XAMPP, EasyPHP etc.) on your machine, configure it as closely to the clients server's set-up as you can and test on that.

Going from "a problem with chapter 5" to "must be live in 2 weeks" is a bit of a jump, but you should still have enough time to at least get this figured out by then.

[ralph.m]

no. should I find a host?

If you want the site up in a couple of weeks, you really should have a game plan for all this. Where do you think the site will reside when finished? You need to organize hosting so that you can put the website somewhere. And of course you need a domain name. Have you planned for any of this? What experience do you have with web design? It sounds like you haven't done a site before, and that you may be biting off more than you can chew. I'd recommend getting a good book on web design and making sure you have covered the bases before promising to have a site up in a few weeks.

I certainly don't mean to sound critical, but unless you have at least a basic handle on all this, it sounds like you should be hiring a web designer rather than trying to take this on yourself—at least at this stage. Learning to build sites yourself is not hard, and is very rewarding and enjoyable... but it does take some time. Getting help in forums is great, but there's a kind of realistic balance between how much you can already do and how much you ask for.

EDIT: Ah heck, I forgot you mentioned you were working through a book in your first post.

[dummoxe]

I got myself a host at 000webhost.com and I have a domain name (im pretty sure). This is my 1st time building a website. And I only need it in two weeks because I have to submit it for a contest where the deadline is the 17th and if I don't finish it, I just won't be able to compete in the contest.

Where do you think the site will reside when finished?

Well, on the contest, it says to sumbit your website's url to a link so I assume I'll do that and that will be pretty much it...

It sounds like you haven't done a site before, and that you may be biting off more than you can chew.

yes you're correct, and I think I did bite off more than I can chew with the photo gallery, at least.
And yes,I worked through the book "how to build your own website the right way using html and cc by Ian lloyd" and I read it and I don't have that much left to do on my website. If I can't get slimbox to work on my 400+ photos, I'll just pick out 25-30 of the best ones and just have them on my website without any links or anything.

[ralph.m]

Well, on the contest, it says to sumbit your website's url to a link so I assume I'll do that and that will be pretty much it...

No, that will be pretty much nothing, I'm afraid. What they are saying is—your site needs to be online, with a web address / url (like www.mysite.com). So when you give them the url, people can click on it and go and visit your site. The url itself—without the site hosted online—is like an address to a house that doesn't exist.

[dummoxe]

no, I have a domain name. You could see a page of my site now, if you wanted. it's my photo gallery. However, the styling isn't on it and the links to the photos don't produce any photos......