• Gender: Male
  • From: Indiana
  • Registered: 2009-02-26
  • Posts: 51

Topic: photo gallery officially online

I have finally got this site up and fully functional and being used. I still think it could be a lot sleeker looking and would definitely like to speed up some of the load times.

While floatbox was easy as breathing and has done me well I am still thinking of changing it (depending on the answers in another topic, plus I've seen a few that seem... prettier).
I was thinking of Orangoo Labs' lightbox clone, but I don't think it will "fit" the site's current look. Awesome Box and phatfusion seem nice and are very responsive.

I mentioned in another topic my want to use Reflection.JS to add a reflection of the photos but I worry this will greatly slow the site. It seems to take quite awhile to load.

Please comment on the site, don't try to help what I've talked about (lightbox clones & reflection) as those were notes on ideas for the site. I already have topic(s) posted for questions involving the tech side of all this.

Remember, I am looking for beauty and speed (within reason, it is a photo gallery)

  • Gender: Female
  • From: Tenerife, Spain
  • Registered: 2008-12-29
  • Posts: 358

Re: photo gallery officially online

Where's the link to your site?????

  • Gender: Male
  • From: Indiana
  • Registered: 2009-02-26
  • Posts: 51

Re: photo gallery officially online

wow. ok, that was a failure on my part, mostly cuz it was late and i was really tired. Sorry

Daybreak Photography dot org

I'd put the link directly but the site isn't all that popular as of yet and i noticed forum links i had previously posted showing up in google, some even above it.

  • Gender: Female
  • From: Tenerife, Spain
  • Registered: 2008-12-29
  • Posts: 358

Re: photo gallery officially online

The reason the site loads slowly is that the photographs have not been optimized for the web, I looked at 3 at random. The resolution for the web should be 72. Some of the photos are 240 and 700kb, that's huge.

As for the beauty of the site, I really like the dark colours, but I'm not enchanted with the white background for the photo thumbnails and to look more balanced it should be at least the same width as the header.

The navigation buttons with the big pink border look a little clunky, a smaller border would look more refined. I think it would look better if you left the button background the same colour and just used the change from top right to bottom left border to indicate the hover.

I would make the header the full width of the site and move the navigation down level with the content. I also find the logo "Daybreak Photography" very fuzzy and difficult to read on the home page. Ideally the header and the logo should be the same on all pages with maybe just a change in the image on the right hand side for the different categories which would depict them visually. By that I mean - Engagement maybe an engagement ring, Scenery - a landscape, Weddings - a bride or a wedding cake.

Have a look at the photo gallery in this site for a different idea of display
maraz uldelsur.co m/gallery.html

  • Gender: Male
  • From: Indiana
  • Registered: 2009-02-26
  • Posts: 51

Re: photo gallery officially online

your right, i threw the site up in a hurry originally and forgot to change the DPIs of the photos.
I never liked the white background much either, but left it until I revised the site as I wanted to use a reflection js in the gallery and was not sure what the final color would be.
The width of the header and body were the same but somehow i messed that up and i never got around to fixing it, my plan for the revised site is to have the header stretch across (like you suggested) and place the 'descriptive' photo over the menu to the right of the site/company title OR to make a single elongated logo for every page.
I have been playing around a bit and plan to make the buttons for my revision match the colors better (i hated the pink too) by making some custom buttons in PS. I may try to implement these without flash but I don't know a better way to make mouseover and click animations (requested by client).
The logo is the same on all pages, but it has transparency and the bg color is different, I will take this into account and had not noticed this at all so I'm really happy you pointed out the awkwardness of it.
I looked over many gallery types and the lightbox type of method was the visual she preferred.
I tried at one point to move the menu down, but at the time i did not know enough to manage this without destroying everything else. I feel I know enough to do the site from scratch thanks to you guys and tek-tips dot com

  • Gender: Male
  • From: Indiana
  • Registered: 2009-02-26
  • Posts: 51

Re: photo gallery officially online

i'm trying to find a relevant tutorial on how to cut down my html. This means 2 things to me.

I have a weird footer according to some, but it works. I was trying to find a way to add something at the end of the html to refer to a file for it. I was told elsewhere to use includes but got no more relevant info. I don't know how to use INCludes or if they are still used these days.

I also see a pattern of having to manually add the same info over and over for the different pages that are alike and then having to repeat info inside for my gallery. I am aware my separation of design from style is not great currently and I am trying to get it right this time around, but I don't see this ending my need to load 20+ files per page all named PIC01.jpg PIC02.jpg......

  • Gender: Female
  • From: Tenerife, Spain
  • Registered: 2008-12-29
  • Posts: 358

Re: photo gallery officially online

Try Eric's tutorial
http://www.visibilityinherit.com/code/php-includes.php

  • Gender: Male
  • From: Indiana
  • Registered: 2009-02-26
  • Posts: 51

Re: photo gallery officially online

The php includes really helped with the footer, tho I have don't really need it for that anymore since I am only loading one page with many hidden DIVs. Still awesome though.

I was hoping to find something that could count thru my photos so I didn't need to manually add a million lines for each photo. I haven't found anything tho so not too worried about it.

The real reason I showed up tonight was to ask if there's a way to center the leftover photos at the bottom. I have the DIVs to Float: Left and that works well until there's a few extra on the last line.
I have thought of setting them up with a clearer to start a new line, but there's not really any way to make them all even this way. I also have the container DIV set to a percentage in case of different size monitors.

  • Gender: Male
  • From: Indiana
  • Registered: 2009-02-26
  • Posts: 51

Re: photo gallery officially online

ok, here's the goal: to center a group of DIVs
visual example:
______________________________v______________________________
                   ---------   ---------   ---------   ---------
                   |          |  |           |   |          |  |          |
                   |          |  |           |   |          |  |          |
                   |          |  |           |   |          |  |          |
                   ---------   ---------   ---------   ---------

the v is center of page. I have seen a lot of tutorials/examples for make 2 or 3 columns centered, the 3 column method usually having set widths. I have been trying to implement them with no success.
I was hoping for success by adding a 1px wide DIV in center float outward from, but with the others outside of it they float to borders of parent DIV, when inside they become mangled together.
Ideas?

Point is I want to make 4 and 5 (maybe 6 for skinny pics) DIV lines (to avoid having to cut out photos because of 3 leftovers). I want them centered looking at any acceptable resolution (1024*768 and up).
My plan is to set a background behind each row of 4 or 5 photos to help make each row stand out more, I feel like they currently blend together too much.

Last edited by AndaleTheGreat (2009-10-13 03:47:09)