(JavaScript Tutorial - Counting Characters) Older »
Feb 14th 2008
MikeSmith3D.com
Mike Smith 3D site: http://www.mikesmith3d.com
My friend Mike asked me to help him with his portfolio site, I told him that it'd be my pleasure, then we got to it. (boring story huh?)
He already had a concept in mind; really simple, one page, image gallery, demo-reel video. Sounded pretty easy to me, so I got his Photoshop 'comp' that he threw together and created a super simple CSS layout out of it.
The next order of business was to figure out how he was going to reliably update the images without writing too much code. He's a 3D guy after all, and a good one at that... no time for code ;-)
He's pretty comfortable with FTP and suggested it, so I started there. I got to thinking about listing the files in the images folder, filtering out the acceptable image types and then placing them in the gallery. Seemed like a good plan to me and the PHP code took about 5 minutes to write.
The thumbnails on the page are automatically generated using some code I learned from http://php.net combined with some of my own code. The basic idea is that you upload the full sized image (as big as you want the image to appear after the thumbnail has been clicked) and then the web page automatically crops a square (or rectangular) image from the full sized image and displays it.
The image viewer in place is my favorite image viewer ever! It's the customizable, light-weight, feature-rich, wonderful HighSlide.js HighSlide is a JavaScript based image viewer that zooms a thumbnail up to full size in an intuitive manner and as you can tell from my last rant, I love it! - Oh and it's free for personal web sites, so there's no sense arguing with that price.