Using a jQuery Gallery in a Photography Website
Written by Brian on April 10, 2010 – 7:17 pm -Recently, I’ve made a foray into the world of professional photography with one of my students. Olinda wants to pursue photography as a career, so she’s simultaneously pursuing a bachelor’s degree in photography and working on setting up a portfolio and client base.
To get things started, I took a stab at developing a website for her: olinda-gibbons.com.
I’m not 100% happy with the theme, but we kind of had to launch it under short notice so that we could post/sell images from a few events that she worked. I’ll probably re-vamp the theme over the summer when I have free time, but at the moment there are some really cool things in there that I want to show off.
Auto Portfolio with a jQuery Gallery
One feature I definitely wanted to have was a portfolio page with some kind of nifty jQuery functionality. I looked through some options on this list of jquery gallery plug-ins, and I liked the galleria plug-in. Although I think it might now be out of development, I was able to get it working to my satisfaction with a static html demo.
Of course, I wanted to be able to easily and automatically create and change portfolios with WordPress, and the NextGEN Gallery plug-in for WordPress made that possible. I created a custom template file to display a gallery with the mark-up necessary for the Galleria plug-in to work. Now all I have to do is upload the pictures to a gallery, insert a piece of short code, and instant portfolio page. Nice.
There are two samples on the site now: Olinda’s portrait portfolio and her events portfolio.
Integrating PayPal Web Payment
The second thing I needed to do was integrate PayPal’s web payment system so that we could accept payments and then print/ship pictures after events. Portrait sessions can be handled through invoicing and other payment methods, but PayPal makes it really convenient to handle larger groups of people more efficiently.
Again, this was made possible by the NextGen gallery plug-in. I marked up a custom template to include the html mark-up for the PayPal payment buttons. Now, I just upload the proof images to a gallery and with one piece of short-code I have an instant ordering page.
This is a place where I definitely want to work on a better design, but I was working under short notice and just wanted something functional…
Example: William Paterson Fashion Show proof album.
How Did I Do It?
I plan to write up some detailed guides to how I designed those pages. I’m not sure if I’ll post them here or start up a blog section on olinda-gibbons.com and post it there. Either way, I’ll post about the guides here because I think they’ll be valuable for anyone looking to develop a site for a photographer. The more I work with it, I’m really impressed with the combination of WordPress and the NextGen gallery plugin.
Posted in Nerds at Work, Web Design | 2 Comments »
Tags: Gallery, Javascript, jQuery, Photography
Find that post enjoyable or informative? Why don't you subscribe to the feed for Nerds at Work. Or, subscribe to the site-wide feed and catch up on all my antics.
1 Comments
1 Trackbacks/Pingbacks
-
Pingback:
Web Cash » Blog Archive » New Project: olinda-gibbons.com
April 10, 2010

I really like the way you laid out the website. I was wondering though how did you do it? I want to include pics in some postings – not all – and I would love to do it this way.
Care to share, PLEASE?
Thanks
IIO