Jump to content
Killersites Forums

techniques for photo gallery


Recommended Posts

Before I venture on and try and research the different options available to me to create an interesting photo gallery, what are

some things I should avoid.

 

What I don't want to do is create 2 images (thumbnail/fullsize) for each photo on the site. I know I can do it that way and use the css/html I have learned, but that seems very archaic for a lot of images and time consuming.

 

What I'm looking for is a page that will show categories of photos, which when clicked bring up all the photos in that category as thumbnails, and an option to enlarge then scroll through them.

 

I know there are what I call 3rd party software that create them for you, i.e coffeecup etc.

I know I can do it in Dreamweaver/Fireworks,Javascript (which i have not learned yet) but again I'm not sure if that a good idea.

 

As a beginner is there somethings that I should avoid? Is using software like coffee cup cheating and bad practice?

 

Thanks

Ant

Link to post
Share on other sites

Use a Content Management System. I use CMSMadeSimple.org for nearly everything I do now, and there is a module called Gallery. Incredibly easy to use. After install, create directories on your web server to represent each gallery you want. Upload images to those directories using the CMS or FTP. Then manage your gallery from the CMS admin to design the layout and design of the gallery (there are bunch of preinstalled templates you can use too). Add gallery descriptions, image titles, image descriptions, etc. The gallery automatically creates thumbnails for you based on your thumbnail preferences - the size, ratio, cropped, etc... put a small tag on the page that will hold the gallery and you are done. Easy to manage and edit.

Link to post
Share on other sites

Shelf, thanks I'm reading up on it now.

 

Falken i will look into your links as well.

 

Are these systems preferred over standard html/css because they allow greater control, and visual design options?

 

Ant

Link to post
Share on other sites

The advantage to using a CMS or another system is that they greatly reduce the time spent on simple tasks such as adding and removing files, creating thumbnails, etc. It does take a little bit of time to set up initially, but after that point you don't have to do everything by hand.

Link to post
Share on other sites

I now have a headache. This is the first sentence I read when I went to CMSMS:

 

"CMS Made Simple helps experienced web developers...."

 

I laughed. ;)

 

It seems I have to download the files and then upload them to the server etc..to even begin trying to figure out how it works and placing it's functionality on my sites layout?

Check the requirements with that of the server, setup a MYSQL database, and steps 2-20 which are all foreign to me.

 

 

Guys, i'm just joking and making fun of myself. I'm not downplaying the help you all offered, I appreciate it.

 

I just don't have the knowledge to implement anything from the CMCMS site.

 

Maybe the http://www.zenphoto.org/ is easier.

 

 

 

ONE question. If I was to LEARN any of these options, how would I know how to setup the gallery on my site, when I don't have the site live on a server. Don't these systems have to work on the server ALONG with the site to be functional and begin creating the layout of the gallery on my page?

 

 

Ant

Link to post
Share on other sites

If you didn't want to go the cms route then you could piece it together. Say the first five thumbs are in a jquery tabs type setup. When you click on one of these thumbs it shows all the thumbs from this group. From there, you can either css it (large image shows on hover) or lightbox it (large image pops up in a overlay) and then they could click or scroll through all the images in that group. All the thumbs can be the same image as the large one. Just tell it to be smaller.

Link to post
Share on other sites

Guys, thanks.

 

I will look into the links.

 

Meanwhile, don't I need a server to upload all the necessary files to view my design when using things like PHP etc.

 

If so how do you guys handle that?

 

So far I have just previewed my HTML, but have not uploaded anything to the server.

 

The site I'm trying to REDESIGN as a means to learn all this, is live on a server that I have access to.

 

Can I use that server as my test platform?

 

I assume I can use it to upload temp files, and create a temp site?

 

Whats the RIGHT way to do that?

 

How do you guys use server side scripting(not sure that's the right terminology) when designing a site that uses it, and PREVIEW the design ?

 

 

Every question I ask opens up the pandora box of web design wider.

 

thanks

Ant

Link to post
Share on other sites

There are two ways to do that -- create a temporary directory on the server which you can experiment with, and then delete the directory once you are done, or run something like WAMP (Windows) or MAMP (Mac) which installs an apache server on your local computer with PHP and MySQL support. That would allow you to create databases and preview PHP files on your local machine. Check the stickies in the PHP section of the forum for more info on how to download/install it. Both Stefan and I have screencasts on how to get started.

Link to post
Share on other sites

Falken, thanks for the server answer.

 

I created a test folder on the server where I will place all my test files and see if I can get any of these options working.

So far this one, http://www.dynamicdr...-photoalbum.htm, seems to be missing the 4th necessary file. That one was easy because it was only a few steps to get going. I'll see if I can find another site that offers something similar for me to try.

 

 

Eric, will the javascript based galleries allow me to add to the galleries myself without re-uploading everything?

 

I think the present site is using something like Jalbum. But I guess you cant just add photos without redoing the entire gallery.

 

Ant

Link to post
Share on other sites

Eric, heres the correct link: http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

 

What I think is the 4th file I need has a spinning icon. I checked the source and I don't see a file thats linked with that field.

 

 

 

Yes I want the photos to expand when I click.

 

So, some Javascript type galleries offer a way to upload additional photos? If so I assume it needs to be done by a web designer and not the client.

 

Is it the PHP type gallery that offers EASY client side changes?

 

I'm still trying to understand the difference between these: PHP, Javascript, MySQL...

 

Ant

Link to post
Share on other sites

Here is my way. I myself find easiest when it comes to skin others may have better ways is to get the the eye dropper tool, find a patch of skin that has not blemishes or anything and select the colour, then get a brush, change the opacity of it.

Link to post
Share on other sites

Allright I have gotten pretty far and was able to set up a MAMP and use the dynamic drive photo album from here:

http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

 

Everything was going well, except I cant get the images to load.

 

I have the "format" as shown in the DEMO on the site, but all I have are "?" where the images should be.

 

BTW I have this same question circulating on that site.

 

I figured it couldn't hurt to pool 2 different sources.

 

My problem is I'm getting this error in the activity window of safari for the 5 photos:

http://localhost/myimages/salmon/IMG_7130.jpg cant connect to host

 

I thought the local host should be on port 8888. My other files load and work fine PER THE ACTIVITY viewer in Safari, THEY show: (localhost:888) http://localhost:8888/myimages/salmo....php?id=salmon 0.3kb

 

Why are the images that are not displaying showing a link referencing "localhost"

 

I tried turning on websharing in my OSX Preferences but that didn't work.

 

Thanks

Ant

Link to post
Share on other sites

Hey Ant, check these out! Just built them. Thats all CSS! The small snippets of JS (depending on which version) are for IE and webkit. I hate to brag - but I am a CSS God. Might what to use these instead...

http://www.visibilityinherit.com/projects/lightbox-focus-demo3.php

http://www.visibilityinherit.com/projects/lightbox-target-demo3.php#url

Edited by Eric
Link to post
Share on other sites

Thanks Eric.

 

I like the examples. ;)

 

Any idea why my images are not showing using the MAMP?

 

The

 

Thanks! No idea about the MAMP. I once installed all of it. But only rarely used it so uninstalled it. I just throw everything up live to test PHP.

Edited by Eric
Link to post
Share on other sites

If I use a live server can i just HOUSE all my files in a folder called "temp_site" or something like that which doesn't match another folder on the server with the live files/website?

 

 

I assume thats a safe way of testing things without screwing up the live website?

 

Ant

Link to post
Share on other sites

Ok.

 

I got it to work by uploading all my files to a live server. I ditched the MAMP.

 

My next problem is the thumbnails are all 200px x 100px But not all my images are that size proportionately.

 

When i remove the dimensions in the css the thumbnails load in the native size of the photos..HUGE.

 

Is there a away to tell the css to use the images at their original size but make them thumbnails. So some thumbnails would be 100 x 100, some 200 x150 etc. I don't think a percentage would work because some of my photos may have huge native dimensions and others small native dimensions. I know at some point I need to create a minimum size for all the photos so that when they are clicked on they never exceed "x" width etc. SO i will have to open each one and prepare them in PS.

 

I don't want to create a thumbnail for each image.

 

Thanks

Ant

Link to post
Share on other sites

If you just give the thumbs a width the browser will automatically scale each thumb porportionately. Sounds like that is what your after. Although, I just usually make all the thumbs the same size. Makes it much easier to position. Plus looks better in my opinion. Sure the thumb will be a little skewed, but it's so small it usually doesn't matter. If you want 100% quality, you'll have make small thumbs in PS

Link to post
Share on other sites

Eric, THANK YOU!.

 

That worked.

 

I see what you mean. Now I have thumbs that are 200 x 200 and some that are 200 x 100. So visually they do not create a nice grid.

 

If I do not do it this way, that means I need to open each image and make them all say: 500px x 600px.

 

However, what happens if I get images that are supposed to be wide landscapes. say the native size is sent to me as: 700 x 300

 

I guess theres no way around that. Unless theres a way to show a thumb as 200 x 200, but when it's clicked on it actual shows the TRUE dimensions of 700 x 300. Although, that means the thumb will cut off some of the image etc..

 

Ant

Link to post
Share on other sites

Tried that. THANKS again!

 

Now I need to figure out how what I just did can help a potential client upload photos.

 

 

I assumed there was an interface (login) for clients to go along with this gallery.

Kind of like the cushycms site demo shows.

 

 

 

Ant

Link to post
Share on other sites
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...