Help with code for a web site photo gallery

Status
Not open for further replies.
TenaxtC

TenaxtC

New member
Aug 31, 2007
21
0
0
I work part time for a non-profit organization that raises awareness and money to help homeless veterans. We are not web programming gurus, but we want to be able to add a new page to our site that has photo galleries from recent events. Something simple, that shows thumbnails of photos in a gallery that you can click to see the larger photo. Does anyone have a snippet of code that we can use with slight modifications and add to a blank page template? That would be greatly appreciated...also simple enough for one of us to add the code into the page and get it work fairly painlessly.

Thanks in advance.

Chris
Veterans Advocacy Organization - Homeless Veterans
 


TenaxtC said:
Veterans Advocacy Organization - Homeless Veterans
Click to expand...

That is some awful typeface. It looks like everything is set in 12px Impact. You can hardly read the content. I would seriously have a look at your usability/accessibility/semantics, especially considering your target audience. I'd also look to move to a CSS/XHTML based structure as opposed to the tabular one you are sporting now.
 
Just use wordpress, it shouldn't take more than 2hrs to transfer the crap you have now to something half decent.
 
Fatbat said:
That is some awful typeface. It looks like everything is set in 12px Impact. You can hardly read the content. I would seriously have a look at your usability/accessibility/semantics, especially considering your target audience. I'd also look to move to a CSS/XHTML based structure as opposed to the tabular one you are sporting now.
Click to expand...

Second. I can't read hardly any of the text in the center on my macbook.
 
DewChugr said:
Second. I can't read hardly any of the text in the center on my macbook.
Click to expand...

I can read it fine on my 13" Macbook. But I think considering the target audience of the site, you'd definitely want a slightly larger font size, as well as increasing the line height.

It's 12px arial btw.

If you want something for a gallery of sort, you could just use SimpleViewer :P hehe. (and then there's that dead simple code I wrote that you drop an image into a folder and it just shows up on the site).
 
I assure you it's not Arial.

As for the photo gallery, you might want to have a look at SlideShowPro. It's an easy to use Flash component that is very customizable and looks fantastic. Combined with their Thumbgrid plugin it is amazingly flexible.

www.slideshowpro.net

I second the WordPress recommendation. It would be perfect for this site.


veterans.jpg
 
Fatbat said:
I assure you it's not Arial.

veterans.jpg
Click to expand...

God damn...

Site looks like this on a mac (I assume due to the CSS rules overriding <font face="">).

cof_safari.png

impact.png


Macs do come with impact. However this is the main style sheet.

Code: 
<style type="text/css">
	A {FONT-SIZE: 9.5pt; COLOR: #FFFFFF; FONT-FAMILY: arial; TEXT-DECORATION: none}
	.a2 { FONT-SIZE: 9pt; COLOR: #4A556B; FONT-FAMILY: arial; TEXT-DECORATION: none;  FONT-WEIGHT:bold }
	.a3 { FONT-SIZE: 9pt; COLOR: #A12D05; FONT-FAMILY: arial; TEXT-DECORATION: none;  FONT-WEIGHT:bold }
	.g-link:hover {text-decoration: none; FONT-WEIGHT: bold; FONT-SIZE: 9.5pt; COLOR: #FFFFFF; FONT-FAMILY: arial}
	td { font-family: arial; } 
	P.news { color: #000000; font-size:9pt; font-family:arial; }
	P.date {  FONT-SIZE: 9pt; COLOR: #FFFFFF; FONT-FAMILY: arial; FONT-WEIGHT:bold  }
	P.header {  FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: arial; FONT-WEIGHT:bold }
	P.text {  FONT-SIZE: 8.75pt; COLOR: #000000; FONT-FAMILY: arial; }
	P.luo {  FONT-SIZE: 7.5pt; COLOR: #FFFFFF; FONT-FAMILY: arial; }
</style>

which is arial.

But This is the line style applied to the text in the center.

Code: 
<p class="text"><font face="Impact">   <p class="header"><strong><big><i>2008 Was a Very Good Year for Circle of Friends!</i></big></strong><br><br>

<p class="text">We have many of you to thank for all your hard work and donations enabling us to continue the fight for American and homeless veterans around the country.</p>
<p class="text"><strong>We had 10 successful rallies in 2008 as a part of OPERATION UNITED REVEILLE IV, but none more successful than the two huge events held at the Republican and Democratic National Conventions. We were able to raise awareness to new heights and encourage more Members of Congress and political leaders to take notice and action.</strong></p>

Course I don't think Safari understands <font face=""> anymore when theres a valid CSS rule present overriding it. (Course wouldn't even be valid if there was an xhtml doctype at the top, since P (capitalized) does not match <p>)

And on FireFox3 on a mac :

cof_firefox.png


But this is what it looks like on XP with IE8 loaded (though impact doesn't show as an installed font, so oddly OSX came with impact, but not XP, least not my copy).

cof_ie.jpg



But ya your screenshot... the OP needs a serious revisit to the site's design and perhaps cross-rowser compatibility (starting with using an actual doctype, and stick to it).
 
In all seriousness though, having seen the not-too-great choice in typeface, and the lack of valid html(xhtml) from the source code. The op might just be best off installing wordpress, and either picking a generic theme, or hiring someone one time to fix up a wordpress theme. Least from there you can grab plugins to suit most needs.

True not everything will be 100% foolproof, but you're either paying the extra money for it to be, or you're paying someone to do it for you. And wordpress by comparison to most is actually quite easy despite it's free nature.
 
+1 to installing wordpress...

You will save yourself a shitload of headache by install WP and the plugins you need to accomplish what your after. Then you can either take your existing design, or get a new design WP-ified
 
Status
Not open for further replies.
Top Bottom