Hey guys. I’ve got some great new code for you to download today. For a long time, Flash has dominated the online interactive UI landscape with technologies like PaperVision allowing developers to flex their creative muscles far and wide. Recently, JavaScript has come back into the Spotlight thanks to the Canvas element making impressive image effects finally possible. In this post, I’d like to share with you an amazing new jQuery 3D Wall Component for Webkit that’s compatible with Chrome and Safari.

The great thing about the wall (inspired by work by Charles Ying) is that it supports infinite-browsing (this means that as long as you hit the right-arrow, you’ll get brand new images populating the view through Ajax). The Component comes with out-of-the-box support for Flickr and YouTube Videos, which are relatively easy to configure and effects like reflection are automatically applied to the base of your images for you.

Interested in a neat image Search?. The component also comes complete with a really cool “Search and highlight” feature so you can see what images or videos in your view match the terms you’re typing in.

Would you like to hook it up to consume your own data or images? No problem at all. Here’s how YouTube videos are pulled into the plugin:

function youtube(callback)
{
    var url = "http://gdata.youtube.com/feeds/api/videos/-/Comedy?v=2&alt=json-in-script&start-index=" + startIndex + "&callback=?";

    jQuery.getJSON(url, function (data)
    {
        var images = jQuery.map(data.feed.entry, function (item)
        {
            return {
                title: item.title.$t,
                thumb: item.media$group.media$thumbnail[0].url,
                ytvideoid: item.media$group.yt$videoid.$t,
                videoloader: youtubevideo,
                link: item.link[0].href
            };
        });
        startIndex += images.length;
        callback(images);
    });
}

It essentially uses a JSON based callback to grab a set of parameters (such as the image location and the link to the original photo or video) through your data feed. You are then able to define how you would like your information to be handled (if you’ve got some extra features in mind), but thats about it – simply initialize the service you would like to use (in my case Flickr or YouTube) and then you’re done. Pagination of images is kept as basic as possible and you’ll be able to get up and running with the component in no time.

If you would like to check out a demo of the wall in action or would like to download it to play around with it yourself, please see the links below.

Demo | Download