Use jQuery to create an easy-to-browse screencast library

Written on September 27, 2010 by Flo Preynat

In our daily life, we all tend to cut corners and take shortcuts before realizing we really need to get our act together and become more organized/consistent and hence more efficient. Things aren’t any different with our website organisation.

I remember when I started playing around with HTML, building sites for friends and relatives, I always encountered issues with old and renamed web pages or duplicated pictures. “Can’t remember which one is the correct one, need to check!” …and you end up wasting your time on useless tasks.
Use jQuery to create an easy-to-browse screencast library

Of course, with time and experience, things have improved. Pages are validated before being ftp’ed, pictures are centralized in one location, and obsolete files are removed or archived in a specified location/folder.

But lately, I have noticed that some people (including very much known people in the web design industry) often post a lot of very interesting and educational videos (typically called screencasts) on their sites but don’t have a centralized location where one would be able to retrieve quickly a particular subject.

Well, if you are a Copernicus/Camstudio or other screencast app addict, first of all thank you from all of us, we do appreciate the time you spend bringing all your experience and knowledge on those videos, it makes it so much more explicit for us. But if your video library is all over the place (ie screencast link posted on each blog post), maybe it is time to consider centralizing all those useful files (or at least shortcuts to them) in one location where your faithful and enthusisatic visitors would be able to retrieve them all easily.

There are many ways to get this organized, but if you consider using jQuery to do this, I suggest you take a look at Yoxview, which is a free (of course) lightbox-style image and video viewer for websites.

You are bound to love this little plugin, and its many features. Do give this one a go, you won’t be disappointed. I myself am a big fan of the skin: “top_menu” option, which allows your visitors to concentrate on the screencast only (by placing the rest of the site in a semi-darkness), while letting them skip to next/previous video and informing them on the screencast sequential info.

The Javascript

Nothing much fancy here. You just call the yoxview-init.js script and apply to all elements marked with the .yoxview class.

I let you check out the demo. As I don’t have personal screencasts to show, I took a few from Mr Jeffrey Way & co from Nettuts.

For more info on the plugin (including download files), please use the following link. And finally, for your info, Yoxview are also on Twitter.

Quick tip: use the backgroundColor settings to change the semi-dark background and make it consistent with the rest of your site.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Follow @shoogledesigns