Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Tips on photo gallery 1

Status
Not open for further replies.
LonnieJohnson

LonnieJohnson

Programmer
Apr 16, 2001
2,628
US
I have been made the keeper of my church's web site because I work in the computer industry. I am by no means a web expert. I will be implementing a photo gallery. I have a couple of questions that may be web design 101 for you guys.

1. I figured I would put my pics on a page in a table. The pic would be links to image files in a folder. Is this the most efficient way to do this?

2. I was wanting them to be like thumbnails and the viewer could click on the image and a larger image would pop up. Is there a standard command or process by which this "larger popup" comes open.

I'm lost....

Thanks in advance

ProDev, MS Access Applications
Visit me at ==> Contact me at ==>lonniejohnson@prodev.us

May God bless you beyond your imagination!!!
 
Sort by date Sort by votes
>> 1. I figured I would put my pics on a page in a table. The pic would be links to image files in a folder. Is this the most efficient way to do this?

Yes, and no. In terms of being efficient for you to code with limited HTML experience yes. In terms of rendering in the browser, tables are not usually the best way.

Then again, in my very limited exposure to church web-sites, they don't seem to be the fastest sites around, so - if you feel more comfortable with tables go for it.

>> 2. I was wanting them to be like thumbnails and the viewer could click on the image and a larger image would pop up. Is there a standard command or process by which this "larger popup" comes open.

You will need two versions of each image, the regular sized one and a smaller thumbnail image. Even though you can resize the displayed image using HTML, if you resize a 40kb 500px by 500px jpeg down to 50x50 using html, it will still download the entire 40kb file to the user's machine. If you take nothing else out of anything anyone says in this forum, write that one down. You will need to make the thumbnail images separate files from the regular photographs.

There are a number of ways of implementing the pop-up functionality. For the record, I don't see why photo-galleries need to go opening new windows all over the place, but if that's the way you'd like it here are your options:

Using plain old HTML:
[tt]
<a href=&quot;images/largeImage.jpg&quot; target=&quot;_blank&quot;><img src=&quot;images/smallImage.jpg&quot;></a>
[/tt]

Using JavaScript:

- To simply display the large image:
[tt]
<script>
function openImage(strImageSrc){
var newWin = window.open(strImageSrc);
}
</script>
<a href=&quot;images/largeImage.jpg&quot; onclick=&quot;openImage(this.href); return false;&quot;><img src=&quot;images/smallImage.jpg&quot;></a>
[/tt]

- To display the large image in a HTML file with some explanatory text:
[tt]
<script>
function openImage(objLink){
var strTitle = objLink.title;
var strDesc = objLink.alt;
var strSrc = objLink.href;
var newWin = window.open();
newWin.document.write('<html><head><title>' + strTitle +
'</title></head><body>' +
'<div style=&quot;width:100%;text-align:center;&quot;>' +
'<img src=&quot;' + strSrc + '&quot;></div>' +
'<div style=&quot;width:100%;text-align:center;&quot;>' +
strDesc + '</div></body></html>');
}
</script>
<a href=&quot;images/largeImage.jpg&quot; title=&quot;Church Picnic&quot; alt=&quot;Picture of the church picnic showing people having fun.&quot; onclick=&quot;openImage(this); return false;&quot;><img src=&quot;images/smallImage.jpg&quot;></a>
[/tt]

That's a handful of options - there are literally thousands of ways to skin this particular cat. Have a look around the web, see what photo galleries you like and don't like - write down what it is about each one that you do or don't like, then set about designing yours so that it does the things you like and doesn't do the things you don't.

Good luck.

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
 
Upvote 0 Downvote
Thanks dwarfthrower,

You are right about church websites. This one and the others that my church are modeling from are way too slow and have way too much flash.

They hired a guy that did half of it in Flash and half in html. He sent them a huge bill which was justifiable because they had no clue what they were asking for when they kept asking for these &quot;pretty&quot; things and 'bells n whistles'.

Anyway, they gave it to me and I am getting a CRASH course in web development.

Thanks again for your promptness, your patience and keeping it simple.



ProDev, MS Access Applications
Visit me at ==> Contact me at ==>lonniejohnson@prodev.us

May God bless you beyond your imagination!!!
 
Upvote 0 Downvote
A word of advice on design issues - design for your audience.

Work out who your audience is, put yourself in their shoes and figure out what they need to see on your site. For a church web site, I see your audience as being divided into two fairly separate groups.

Newcomers - people who have recently moved to the area or visitors who are looking for a place to worship. these people will be looking for things like - dates and times of services, (depending on your particular denomination) when confession is offered, perhaps a couple of recent sermons. The sort of things that will make them go &quot;This looks like the place for us&quot;.

Old-timers - the people who are long-term parts of the church community. They'll be after things like the photo gallery, news of coming events - church fetes, working bees etc, and also - again depending on your church, rosters for bible readings, taking communion to the sick etc.

It will be difficult to reconcile the needs of these two groups, but a clean, well laid out site should be able to accomplish it well. I'd be trying to do away with as many of the &quot;bells and whistles&quot; as possible. Your parishioners are more than likely to be accessing your site from their homes - probably on dialup connections, perhaps using older computers. Flash and other assorted gimmickry will only get in the way of your message.

Well, there you have it - &quot;An Atheists Guide to Building Church Websites&quot;. Welcome to the world of web-development, I hope it goes well for you - remember we're always here to help and be sure to post a link so we can see the fruits of your endeavors when you're finished.

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
 
Upvote 0 Downvote
If you are able to use CGI programs on your host (probably true if you pay for your hosting, probably not if it's a free host) try using a script to automate the whole image gallery process - otherwise you're making a whole load of work for yourself each time you add a new picture to the collection.

Here's a link with plenty to choose from...


If you've got some kind of computing background you shouldn't find the code involved too scary.

-- Chris Hunt
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
797
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
206
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
740
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
919
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top