I’ve been doing a little research into jQuery and the many many plugins and tutorials available. Vaadin and GWT can be nice if you want to create a full-blown web application, but sometimes you just need something a little lighter that just gets the job done. For instance, in this post I take a look at the existing tutorials to create a “photo wall”, a big webpage consisting of photos that can be manipulated.
If there’s one reason you choose to work with jQuery it should be the massive and seemingly endless amount of documentation, tutorials and extensions. In fact, you might even be tempted to not choose jQuery because there’s a true risk of information overload. But if you get through that, jQuery is a great JavaScript library that will transform your JS code into something that is actually readable.
I want to dive a little deeper into jQuery with a small sample application. The main screen is going to be a wall of images. Loosely inspired by Amazon Windowshop (the site doesn’t work for me right now), but I don’t think I’m going to incorporate a 3rd dimension.
I started by Google-ing a bit and turned up 3 tutorials to get started. I think you’ll like them too.
Sliding Panel Photo Wall Gallery by Codrops
Is the most literal implementation of what I was looking for. It goes into the code necessary to show a thumbnail of a large number of images and click through for a dynamically loaded detail page. Interesting and clear code.
Sponsor Flip Wall by Tutorialzine
Another nice example of a slightly different interpretation. It has a neat card-turning effect to show details. Also lots of code and a nice demo. There is some PHP code, but it can be easily replaced, even if you don’t know PHP.
Use the Flickr API to Build a Photo Wall
This one adds integration with Flickr on top of the photo wall.