A transmission from the deep south.
This plugin by Joel Sutherland simplifies the process of displaying public Flickr content on a website. It works by requesting a JSON feed from Flickr’s API and then transforming the returned data using a simple template syntax. (via Script & Style)
A jQuery plugin by Jacek Galanciak to reorder and filter items using animated transitions. (via Lee Majors)
Noah Kalina’s new portfolio site is big and beautiful. The full-screen slideshows are done in JavaScript; I really like the little touches such as the slide-off/slide-on effect when you reach the end of a gallery. Design and code by Patrick Moberg.
A jQuery plugin from Build Internet for full-screen slideshows using faux background images that retain their aspect ratio.
Highlights include siginificant performance improvements, per-property easing, better support for live events, and plenty of new methods (including a native delay()).
Steve Souders dissects the new code, which uses HTML5’s async flag to load the analytics JavaScript in parallel with other files:
It’s always hard to find the right spot on the complexibility curve. This async snippet hits it just right. It’s slightly more complex than the old pattern, but not by much. Besides the benefits highlighted here, this new pattern is able to support more advanced usage patterns, including pushing an array of commands and pushing functions.
Inky alerted me to a few extra customisation options for YouTube’s video player:
YouTube’s interface lets you choose one of nine colour schemes, adding two parameters to the embed code:
color1andcolor2. Once you select a theme, you can edit these parameters to use any colours you like.
His suggestion of using a solid white background behind the player controls improves the look of the player out of sight, so I remixed my Vimeo customisation script to do the same for YouTube embeds. Here’s the jQuery function:
$("object").each(function() {
if ($(this).find("param[value^='http://www.youtube.com']").length > 0) {
var parent = $(this).parent();
var youtubeCode = parent.html();
var params = "";
if (youtubeCode.toLowerCase().indexOf("<param") == -1) {
$("param", this).each(function() {
params += $(this).get(0).outerHTML;
});
}
var oldOpts = /rel=0/g;
var newOpts = "rel=0&hd=1&color1=0xFFFFFF&color2=0xFFFFFF";
youtubeCode = youtubeCode.replace(oldOpts, newOpts);
if (params != "") {
params = params.replace(oldOpts, newOpts);
youtubeCode = youtubeCode.replace(/<embed/i, params + "<embed");
}
parent.html(youtubeCode);
}
});
If you’re unfamiliar with such things, there’s a ready-to-install version that includes the jQuery directives to run the code as soon as the DOM has loaded. Let me know if you strike any problems. Here it is in action:
Update: on the suggestion of Billy Disney I’ve added the flag to force HD playback. I’m also investigating the possibility of allowing 16:9 embeds, at present Tumblr outputs all YouTube code at 4:3.
A clever jQuery plugin by Jason Feinstein that co-opts the <canvas> element to provide true text wrapping around irregularly-shaped images. (via CSS Beauty)
Slick single-serve site — with nice interface touches — for displaying a user’s platform, browser, screen and window size, Flash version, JavaScript/cookie status and more. Perfect for giving to clients while troubleshooting.
A very clever bookmarklet by Steve Souders that examines the background images on a page and automatically generates CSS sprites (and recomputes all background positions!) based on how the images are used in the page, and grouping by size. The interface displays a running tally of the number of HTTP requests saved as well as the reduction in filesize. My only (very minor) complaint is the manual work required to fold the changes back into the source CSS files, but this is genius. (via Tim Dawson)
Written and designed by Matthew Buchanan. Colophon. Please give credit. Email
