[WIP] My website

[Timo]

I've had a couple of websites up over the past few years, to host larger pictures for an old rotating photo sig. Now that I have a bit of time on my hands, i'm keen to make something a bit more professional. So far i've been able to hunt down a free flash photo viewer, which is very nice for its price:

http://timo.modacity.net/

So far I want to have a basic page with a few featured photos using that flash program, which links off to year albums, along with a bit of a biography about myself. However, i'm stumped for ideas for a layout. Attached is something I think might work. Thoughts/Ideas?

[Joshflighter]

Off topic: I went through every photo, and WOW. The sunset was truly one of the most epic I have ever seen. Beautiful.

[MetKiller Joe]

If you want to be professional about photography and use a flash gallery, don't make people wait for either.

The majority of the hits I get on my site are < 30s; not saying that's bad because a lot of people that visit my site are from the industry, and they have better things to do.

Just make it simple, my two cents; don't make people "cut through the crap" to get to your content.

[FluffyDucky™]

^ Speaks the truth. Hey I had a thought.. cause you have so many photos, why not group them? Countryside, beach, flowers, etc depending on what works the best? Might make it easier for someone to find something when they are trying to get to something specific. :)

[Sever]

Also, if you group them and some fit into multiple groups, you can always cross-reference. Be sure to have one group that has everything, though.

[Timo]

http://timo.modacity.net/homepage/index2.html

Basic layout, but i'm keen to get some text for updates somewhere on the page. Is it possible to 'crop' flash files in dreamweaver? Most of the page is taken up by blank space from the flash part.

Also, is it possible to have the flash file change without the entire page refreshing? So I can have each gallery load on the main page instead of redirecting to another.

[FluffyDucky™]

Less white around big pics please? You could even do with moving it closer to the header.

[Timo]

Better? I've taken out a portrait image that I thought was stretching the flash up, but it didn't change anything. What about having text ontop of a flash file?

[MetKiller Joe]

Its getting there. I still suggest you take out the flash gallery, but its your call and this'll be the last time I bug you about it.

Other than that, the site needs to have a defined shape (bars on the sides that sort of thing).

If you need any help with the html/css PM me.

[Timo]

What would you suggest I used to show everything, if a flash gallery isn't a good idea?

[MetKiller Joe]

Javascript gallery. You'd have thumbnails as you do now, and when you click them, you get pretty much the same effect as you do now only as much larger versions.

It is called LightBox2. Flash isn't great because, like Java, it needs its own run-time. Javascript runs natively in the browser.

I don't use anything for my resume (http://www.bluhill.net/mark). Then again, I could be wrong and making people scroll through your website might not be the best idea.

[Timo]

Sounds like a good idea. Although, is there any way to make setting this up automated? I'm not too keen on writing out hundreds of lines ;)

[MetKiller Joe]

Sounds like a good idea. Although, is there any way to make setting this up automated? I'm not too keen on writing out hundreds of lines ;)

Here is a code template you could use in dreamweaver:



<a href="<larger image directory goes here>" rel="lightbox[<category goes here]">
<img src="<thumbnail image goes here" />
</a>
Just put down some relevant directories (like images/largeimage.jpg and images/thumbnail.jpg) and you are set. You'd put that in some <p></p> tags. The category is optional. It is only there if you want to have more than one gallery per page.

But if you need something automatic, give me a couple of days and I could write you a simple app that does it.

[Timo]

Thanks for the template, i'll give it a go tomorrow. Don't worry about the app, i'm not that lazy ;)

[Limited]

Doesnt load for me, is it down for everyone?

[kid908]

God waiting for the load is annoying. Make it load then upon click. instead of in order. Try organizing them in gallaries. It improve the search and let people look for what they're interested in. Right now it's all random pictures.

[SnaFuBAR]

It loaded really fast for me...then again I am on a fiber optic connection. How long is it taking for everyone else?

[Reaper Man]

God waiting for the load is annoying. Make it load then upon click. instead of in order. Try organizing them in gallaries. It improve the search and let people look for what they're interested in. Right now it's all random pictures.
Simpleviewer should load on click...

[Timo]

It preloads all this pictures - i'll try getting up Metkiller's idea in the next few days. I'm dead after snowboarding today, no exercise in the past two years -_-;

[Reaper Man]

Sounds like a good idea. Although, is there any way to make setting this up automated? I'm not too keen on writing out hundreds of lines ;)
There's automated scripts for simpleviewer too (though I assume you used it already, seeing how many images you have)

[Timo]

Yeah lightroom automatically compiles everything for simpleviewer, it's awesome. It's the main reason I used simpleviewer in the first place ;)

[Timo]

http://timo.modacity.net/

I think i'll stick with this javascript, but I need to get some nice borders going before I start anything else. and make the thumbs smaller. Irfanview likes to make jaggies though :\

Should I figure out how to use css or just stick with tables when it comes to layout? I know there's a bunch of css templates around, but I don't know how to use them :x

[Timo]

For some reason Firefox doesn't like my menu on the left, centering it height wise in the table instead of sitting it at the top. It looks fine in Opera. Any ideas?

[MetKiller Joe]

You are using tables for organization. I made that mistake in the early versions of my website. While tables are fun and very easy to use, they just cause trouble when you render.

Div tags are much better suited for what you have there.

If you want to learn how to tag your site properly and with a Web 2.0-ish feel, check out this (https://addons.mozilla.org/en-US/firefox/addon/60) plugin for firefox. It is really useful and a great learning tool. Check out my site (http://www.bluhill.net) and Bungie.net's, (http://www.bungie.net) go to CSS -> view Style Information, and, if you hover over elements on a website, you will see how it is organized and how they did it. I wanted the same "fade out to background" thing that Bungie had going, so I simply did what they did (background div encompassing a body div with a repeat-y image then on top of that you have your content), so the tool is really quite useful if you want to duplicate some effect and don't know how. I also taught myself div's using it.

Check out div id's and classes (I used id's nonconventionally/repeatedly on my site, but it renders it anyway; so you might find it somewhat unneccessary to use classes). Once you learn div's, I can almost guarantee you will look back at tables and wonder how in the hell you got used to it.

[Reaper Man]

The javascript sure takes a while to load the first time you click on an image... Seems pretty instantaneous when you press next within the frame, but when you close then reopen it.. I wonder if you could preload the javascript.

[Timo]

You are using tables for organization. I made that mistake in the early versions of my website. While tables are fun and very easy to use, they just cause trouble when you render.

Div tags are much better suited for what you have there.

If you want to learn how to tag your site properly and with a Web 2.0-ish feel, check out this (https://addons.mozilla.org/en-US/firefox/addon/60) plugin for firefox. It is really useful and a great learning tool. Check out my site (http://www.bluhill.net) and Bungie.net's, (http://www.bungie.net) go to CSS -> view Style Information, and, if you hover over elements on a website, you will see how it is organized and how they did it. I wanted the same "fade out to background" thing that Bungie had going, so I simply did what they did (background div encompassing a body div with a repeat-y image then on top of that you have your content), so the tool is really quite useful if you want to duplicate some effect and don't know how. I also taught myself div's using it.

Check out div id's and classes (I used id's nonconventionally/repeatedly on my site, but it renders it anyway; so you might find it somewhat unneccessary to use classes). Once you learn div's, I can almost guarantee you will look back at tables and wonder how in the hell you got used to it.

After slamming my head into the desk for a couple of hours I got each site setup nicely with css (uploading into the wrong directory doesn't help). The only little peeve I have right now is that the lack of a scroll bar on the front page means the images on it aren't lined up with the other pages. Is there a line I need to add to the css somewhere?

I think i'm more or less done content wise, but the website is lacking definition. I don't know if I should keep it really simple as it is now or add a backdrop of somesort.

The javascript sure takes a while to load the first time you click on an image... Seems pretty instantaneous when you press next within the frame, but when you close then reopen it.. I wonder if you could preload the javascript.

This is true, but it does load quicker than simpleviewer did.

[MetKiller Joe]

What I have immediately after my body tag is a <div id="content_container">, and it has a property of:



#content_container{
width:100%;
}
So, it should stretch out the site that way, and you just encompass the entire website with it.

As for the definition, imo, that navbar should be on the top and horizontal so that it simply looks like: Home Bio 2009 etc...

Go to this (http://hookelabs.com/) site you may like the look of the navbar and customize it to your taste. I'd either stretch the banner to fit the width of the four pictures, or make some line defining your main content block from the rest. It would look cool to have some sort of picture in the background surrounding the brownish/greyish content block, but meh, that's just me being persnickety.

[Timo]

You're right again, does look better :).Your idea for width didn't work, searching around it looks like its unavoidable - so I just forced scroll bars. How would I set up a background image like that, ala bungie.net?

[Horns]

looking good so far. Keep up the good work.

[MetKiller Joe]

You're right again, does look better :).Your idea for width didn't work, searching around it looks like its unavoidable - so I just forced scroll bars. How would I set up a background image like that, ala bungie.net?



background-image: url(/myimages/background.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center center;

[Timo]

Thanks. At this point i'm pretty happy with what i've got, except for maybe the background image and the buttons aren't quite centered. Once again thanks for all your help MetKiller :-)

[Corndogman]

On the 2006/2005 page it says "this is the homepage".

[klange]

background-image: url(/myimages/background.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center center;

You don't want the attachment to be scroll for a b.net look, you want it to be fixed. Just for future reference (as Timo already fixed his).

[MetKiller Joe]

You don't want the attachment to be scroll for a b.net look, you want it to be fixed. Just for future reference (as Timo already fixed his).

Hehe, no worries.

[Timo]

Bumping this. I've always wanted to create a Panorama page for my website. I want to integrate it with the website so it fits in nicely with the current design. However each panorama is different in aspect ratio, creating some problems: http://timo.modacity.net/Panoramas

I'm not sure whether I want to leave it as is, restrict height instead of width, or something else. The first panorama is far too intrusive on the page, and the ones 5 down (Lottin Point) don't stand out enough. I'm starting to think that restricting height to around 200px like the Lighthouse is would be a good starting size. Possible reducing it to 150/160px once I get some more up (I have a bunch as a lot of you will know ;o)

If you've tried to click any of the images you'll see my next problem. I want to integrate something like this (http://www.immervision.com/en/multimedia/multimedia_products/multimedia_products_2_2.php) into the lightbox program already running, so it'll load the same as the current system, but will be restricted to the center column of the website. Having it integrated into Lightbox will allow people to move from one panorama to the next, as well as allowing for a description down the bottom. Is it possible to run something like that java app through lightbox (afaik is just a buttload of css)?

[Kalub]

The year buttons kill it for me.

[legionaire45]

I'd restrict it by width. Right now, your images are so large that they won't fit on most people's monitors without forcing them to scroll. Maybe offer a link to a full sized version if someone really wants the full sized image.

[Timo]

The year buttons kill it for me.

Yeah, I need to get some new ones :ugh:

[Timo]

I've quickly whipped up some new buttons: http://timo.modacity.net/Panoramas/

However, I can't get them to hyperlink.

This is the code i'm using on each page:


<div class="photomenuhoriz">
<div class="home"><a href="http://timo.modacity.net"></a></div>
<div class="bio"><a href="http://timo.modacity.net/Bio"></a></div>
<div class="t2009"><a href="http://timo.modacity.net/2009"></a></div>
<div class="t2008"><a href="http://timo.modacity.net/2008"></a></div>
<div class="t2007"><a href="http://timo.modacity.net/2007"></a></div>
<div class="t0506"><a href="http://timo.modacity.net/0506"></a></div>
<div class="gis"><a href="http://timo.modacity.net/gis"></a></div>
<div class="twoten"><a href="http://timo.modacity.net/2010"></a></div>
</div>

the css for photomenuhoriz just boxes the buttons in. The css for each button is:

.home
{
position: relative;
display: block;
width: 100px;
height: 25px;
float: left;
background: url("../images/buttons/home_unselected.gif") ;

}

.home:hover
{
background: url("../images/buttons/home_selected.gif") ;
}

Each with a different name and URLs. What am I doing wrong for the buttons to not hyperlink?

[sdavis117]

You have code saying where each of the hyperlinks should go, right?

[Timo]

Is that not what <a href="http://timo.modacity.net"></a> does? But I take it that that requires some text. :ugh:

[Hunter]

You need text or an image ect between the <a></a> tags of course.

[Timo]

would a 100x25 transparent gif do the trick, or would the mouseover stop working?

[sdavis117]

What is the HTML code you are using inside the <body></body> for the buttons?

Edit: Maybe you should have the <a></a> apply to the background images for each button instead of the entire chunk of CSS.

[Timo]

Decided to cheat and go with my existing code, and just stick an equally sized transparent block over each box.


Also, I found a new script like lightbox (shadowbox) that allows you to view oversized images and "drag" them around. Check it out! Now all I need to do is figure out a good layout for the thumbnails.


e:added a favicon :o/http://timo.modacity.net/favicon.ico