Thumbnail through css command?

[McDuff]

I am not a professional designer but trying to use existing structures and what I find on the web to improve our non-profit websites. It should be able to “click and enlarge” some of the graphics into a new window, but we do not want only very small one-size thumbnails as starting point. I also do not want to reinvent the wheel, no time for that.

Regardless the size on the initial web page, clicked-on photos should show up in a new browser window or tab in a pre-defined size and background color. Clicking the enlarged picture again should close the window and return to the original page.

Enlarging small size pictures will also lose quality. It is no problem to start again and make a second image folder with the same pictures but in larger size and good quality. For example, the initial picture p1 is stored in the folder images, its enlarged version would be p1_large and stored in the folder images-large.

Would it be possible to add some css commands that regulated that clicking on pictures with a certain code, a new window would open up with the large picture? That would be easier than adding a link to each picture as way of doing this. How to do this?

Does this makes sense or am I making things too complicated and are there easier ways or more elegant scripts to do this.

Thanks for the help
McDuff

[Jarrod]

You cannot do all of this with CSS. The opening and closing of the seperate window would have to be done with Javascript. You could take a look at Lightbox JS (http://www.huddletogether.com/projects/lightbox/) for some prepared CSS and Javascript to help you along.

Jarrod

[Evoir]

Not exactly what you were looking for, but here goes....

Most CMS systems (ExpressionEngine, MovableType and I'm sure Mambo etc) have a built in feature that once you upload an image, it will automatically thumbnail the image, and provide code for the popup image. (based on how you set it up, of course) If you are trying to make your life easier running non profit websites, I highly encourage you to learn more about CMS software that will automate this work. EE and MT offer free licenses to non profits, and there are other open source options that are free. The only cost is your investment in learning it. I think you will find it is well worth it.

Also, on another note, some unrequested feedback: I would not create a separate directory for those larger images, but instead put them all in the same directory, but name them something like this:

p1.jpg
p1_thumb.jpg
p2.jpg
p2_thumb.jpg
etc

This way, all of your images are in the same directory, it is easy to see if you are missing a thumbnail image for one image... also, it looks like you are treating the thumbnail as the main image, adding a suffix to the large images. I've mainly seen it where the thumbnails are the ones with the suffix, and the larger images are treated as the main images, in terms of naming conventions.

Good luck with all this. :)