permalink

22

An Amazing jQuery 3D Wall for Webkit – YouTube Edition

 

webkitwall

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.

 

web2

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

22 Comments

  1. Pingback: Tweets that mention An Amazing jQuery 3D Wall for Webkit – YouTube Edition | AddyOsmani.com | Where Web Businesses Grow -- Topsy.com

  2. Pingback: Tweets that mention An Amazing jQuery 3D Wall for Webkit – YouTube Edition | AddyOsmani.com | Where Web Businesses Grow -- Topsy.com

  3. Hi Caro. Unfortunately for the moment this demo is specific to any browser that uses the WebKit Rendering engine. If I get some more time I'll try to find out what would be involved in making it cross-browser compatible as its essentially an infinite jquery carousel with reflections.

  4. Hi Caro. Unfortunately for the moment this demo is specific to any browser that uses the WebKit Rendering engine. If I get some more time I'll try to find out what would be involved in making it cross-browser compatible as its essentially an infinite jquery carousel with reflections.

  5. Great tutorial, as always. What is it that keeps it from working with non-Webkit browsers? Doesn't Firefox support the Canvas element?

    Also — I wanted to comment that I love how you periodically change the subject in the puddle in your header. At first, I thought it was a really cute Twitter link, but then soon realized that it changes every other time I come here or so. That's a nice, subtle touch :)

    • FireFox does indeed support the Canvas element, but this particular demo uses some WebKit specific hacks to make the 3D view function correctly. I have a lot more demos like this to show people and I'm glad you enjoyed it!.

      Thanks for the compliment on the header – I thought it might be nice to include a little easter egg up there :)

    • FireFox does indeed support the Canvas element, but this particular demo uses some WebKit specific hacks to make the 3D view function correctly. I have a lot more demos like this to show people and I'm glad you enjoyed it!.

      Thanks for the compliment on the header – I thought it might be nice to include a little easter egg up there :)

  6. Great tutorial, as always. What is it that keeps it from working with non-Webkit browsers? Doesn't Firefox support the Canvas element?

    Also — I wanted to comment that I love how you periodically change the subject in the puddle in your header. At first, I thought it was a really cute Twitter link, but then soon realized that it changes every other time I come here or so. That's a nice, subtle touch :)

  7. Pingback: How to create impressive animations using Webkit CSS and JavaScript | AddyOsmani.com | Where Web Businesses Grow

  8. Pingback: How to create impressive animations using Webkit CSS and JavaScript | AddyOsmani.com | Where Web Businesses Grow

  9. Pingback: App Zone! - Games, apps, musics! » Blog Archive » 3 boyutlu muhte?em jquery örnekleri ve aç?klamalar?

  10. Pingback: 3 boyutlu muhte?em jquery örnekleri ve aç?klamalar? | bildirgec.org * bildiri * çok tutulanlar * soru & cevap * tümü Tuttum 3 boyutlu muhte?em jquery örnekleri ve aç?klamalar? « Bay Bedava – Netten Ba?l?klar

    • There seem to be some heavy load issues on my server at the moment, but if you download the sources (note that this will only work in Webkit browsers) it should render fine.

  11. Pingback: Interactive Web design « Steve Sedlock

Leave a Reply

Required fields are marked *.

*