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.
[...] This post was mentioned on Twitter by Web Development News. Web Development News said: An Amazing jQuery 3D Wall for Webkit – YouTube Edition: Hey guys. I’ve got some great new code for you.. http://bit.ly/2yoxJQ [...]
[...] This post was mentioned on Twitter by Web Development News. Web Development News said: An Amazing jQuery 3D Wall for Webkit – YouTube Edition: Hey guys. I’ve got some great new code for you.. http://bit.ly/2yoxJQ [...]
it doesn't work with Firefox, that is a drag
it doesn't work with Firefox, that is a drag
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.
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.
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
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
[...] getting to see just what’s capable with it animation-wise. For anyone that enjoyed reading my 3D Wall post, this is going to be a [...]
[...] getting to see just what’s capable with it animation-wise. For anyone that enjoyed reading my 3D Wall post, this is going to be a [...]
Any news about FF and IE? Do you think it can be done? It looks beautiful in webkit browsers.
Any news about FF and IE? Do you think it can be done? It looks beautiful in webkit browsers.