Image Gallery Project

Ax3l · 08-13-2012, 03:26 PM

Hello, I am working on a project to create an image gallery. The gallery will look almost exactly like this and this, though I am currently at a roadblock. I am at a loss for how I would go about doing this. The images would also be user submitted and hyperlinked. Here is an example of what I have so far, but it still doesn't look right to me.

I know this is easier than I am making it.

Code:

HTML:
<div class='col'>
    <img />
    <img />
    <img />
</div>

<div class='col'>
    <img />
    <img />
    <img />
</div>

Code:

CSS:
.col{
    width:50%;
    float:left;
}

img{
    width:100%;
}

If anyone has any suggestions they would be greatly appreciated.

DrDOS · 08-13-2012, 04:50 PM

You're going to need a lot more than HTML and CSS to do all this. You're project will need to be on a server, you need a server side language to handle all the scripts required, you almost surely need a database to handle all the links, comments and whatever other data is involved. You need server based image handling software to re-size the images and make thumbnails. The most popular server right now is Apache, and the most popular server side language is PhP, and the most commonly used server side image editing softwares are Imagemagick and GD.

It's a good idea to make a mirror of your complete site on a machine of your own, making sure that it is an exact copy of the web server, as much as possible.

Ax3l · 08-13-2012, 05:24 PM

Quote:

Originally Posted by DrDOS

You're going to need a lot more than HTML and CSS to do all this. You're project will need to be on a server, you need a server side language to handle all the scripts required, you almost surely need a database to handle all the links, comments and whatever other data is involved. You need server based image handling software to re-size the images and make thumbnails. The most popular server right now is Apache, and the most popular server side language is PhP, and the most commonly used server side image editing softwares are Imagemagick and GD.

It's a good idea to make a mirror of your complete site on a machine of your own, making sure that it is an exact copy of the web server, as much as possible.

Thank you for the reply. Yes, I figured I'd need PhP. I was looking into finding suggestions for just coding the image gallery minus the more complicated elements (user submitted and hyperlinks). I want to understand the actual logic needed to get the image layout correct.

DrDOS · 08-13-2012, 06:06 PM

If your thumbnail images are all more or less the same size you can just float them, either left for right, into some kind of container div. You may not even need to give them a class to do it, but it may help. I'm quite sure that's what being done on the examples.

Ax3l · 08-13-2012, 11:33 PM

Also, if anyone could help me with the sort of logic I should use to just get a rough gallery working that would help.