Need Feedback On My Portfolio Site sonesayi.com/si

[sonesay 7]

Just an update. I seem to have fixed the rendering problem of the layout box when images are loaded via Ajax that is too large for the current screen. It will load the image then get the image size then set min-width of body.

function loadCanvas(id){		jQuery("div#portfolio_canvas").addClass("min_height300");	jQuery("div#portfolio_canvas").removeClass("min_height100");	jQuery("div#portfolio_canvas img").hide();	var canvas = jQuery("div#portfolio_canvas").css("background-image","url('./images/loading.gif')");			canvas.load("includes/portfolio/loadCanvas.php",{image_id: id},				function(){								   jQuery("div#portfolio_canvas").css("background-image","none");	   				jQuery("div#portfolio_canvas img").fadeIn("slow");				   				setBodyMinWidth();	   									  	 			}		);	}

My solution is rather crude because I had to use a setTimeout() or 500 just so it will force a delay. If I did not force a delay the script will not pick up the correct image size for some reason even though the ajax call is supposedly completed and fired the callback function.

I have only tested on Opera, Safari, and FF3 and it seems to work. anyone with IE7 can check for me please?

updated: I am using the animate() from jquery to smooth the transitions and so far only opera out of the 3 fail.
Edited February 7, 2009 by sonesay (see edit history)

[novoAlias 0]

I previously had a light box gallery but I've chosen to move away from that. Flash gallery I might consider if this doesn't work out well.
Yeah the re size problem is something I just realized since truefusion mentioned it. I'm working on and tested out a javascript solution to get the width of the image and reset the min-width of the body and it seems to work but currently Its buggy since the image is being retrieved by ajax and I get inconsistent width values 0 or its real value. A problem I am currently working on.

You mean create a text description gallery then replace it with full size images when clicked on? Or do you mean show text descriptions on hover then replace with image when selected? that would be a good way to do it. I was considering javascript pop up windows for more description/info but that last idea isn't bad either.


I am going for a layout where it will use the maximum width of a users screen resolution so I will definitely not be using any standard fix width sizes. If it doesn't work then I may have to resort to that.

Also I'm curious to what screen resolution and browser your are using?

Im using FF3, with a resolution of 1680X1050 (X2, dual screens =D)
I had a play with your current gallery style in photoshop... I think this would work well if you made the image go full screen if you clicked on the window.
I think auto resizing is an alright idea but unless you have stupid amounts of information/visual language to fill up the screen it is a bit of a waste...
Anyway this is the result of me having your site open and seeing if i could make it look visually appealing while keeping the same elements/functionality.
Very quick, just the very basics.. Anyway here you go.

[novoAlias 0]

And incidentally here is an example of a full screen website that I would consider to be worthwhile: http://www.cassettenine.com/
You might notice a couple of things about it,
1. It's completely flash/xml based,
2. The actual information is in a trendy small box with the nav bar at the top
3. The music only has three tracks which is really annoying
4. It's got many small touches that are only possible with fullscreen

So really I think you should ask yourself WHY you are using full screen and putting the extra effort into coding if a centered box would be just as effective and a bazillion times easier to code.

Don't worry, I went through exactly this problem while making my website. If you want to see what I did and why heres my process http://novoaliasuni.blogspot.de/search/label/Website

[sonesay 7]

Thats a nice flash site. I will take a good thorough look a little later on. I just happen to fix my rendering problem with images larger then the screen on IE7 and Opera. I found out there are differences on how they read images sizes compared to firefox and safari hence the min-width value not kicking in. You can look at the source code of the si.js if you really want to see.Anything else I missed? I'm interested in building a flash gallery like the one you showed me too so maybe that will be my next project. I have to say flash has advanced a lot since I touched on it a few years back.edit: I just saw your other post. Thats not a bad layout design. I don't think I can change it as easily now even if I really wanted to, since it seems to be ok as of now I will carry on but I would like to create a flash gallery soon just to see what it can do.

Edited February 9, 2009 by sonesay (see edit history)

[sonesay 7]

Gallery and Header updated!I've added a link on the main home page linking to the gallery when you click on the "view full-size image" link. It seems to be working on all browsers (sometimes opera and IE7 fail due to image size not getting obtained. I will need to fix this later when I have some time). I would say it works like 90% of the time on the min-width resizing lol. I changed the header a bit just seeing what will look good. Any bugs I missed please let me know thanks.

[Alex Cicala 0]

I like the new update, very well done. Personally I dont like the width of the site. [anyway dont take that into account I dont like large widths.]I'm rating it 7.5/10, i think the navibar needs a facelift, but everything else is super