Image carousel: a different type of movement control

This is the third tutorial in the series on using the Roundabout plugin for jQuery. It builds on code and concepts introduced in the first and second tutorials, so if you haven't gone through them already, I suggest you do so now, as I'm not going to explain those things again.

In this tutorial, I'll be walking you through a different way of controlling the movement of the image carousel, like in this example. Hovering over the various arrows causes the carousel to turn smoothly in different directions at different speeds.

Image carousel: controlling the movement

This tutorial is going to build on my last tutorial, where I showed you how to create an animated image carousel. I'm now going to show you how to add buttons that will control the movement of the carousel, like in this example. If you haven't gone through my previous tutorial, do that first, as I'm not going to go over the process of building the basic carousel again. If you've got the carousel from the last tutorial already made, then let's get going.

Image carousel: the basics

This is going to be a short post to introduce you to a useful jQuery plugin that goes by the name "Roundabout". This will be the first in a series of posts exploring what we can do with this plugin, and hopefully teaching a bit more about various aspects of JavaScript/jQuery along the way. The purpose of Roundabout is to create a 3D animated image carousel, like the one in this example (click on the images that aren't at the front to bring them to the front).

Animated drop-down menu

Drop-down menus are a common feature of site navigation, and having them slide up and down or animate in some other way adds a nice touch. It is, however, trickier than you might think to get them to behave as you think they should. In creating the example for this tutorial, I had, at various times, menus that wouldn't slide down, wouldn't slide back up, got stuck half-way, or bounced up and down like a yo-yo long after I'd moved my mouse off them. If you follow along with my tutorial, you should hopefully be able to avoid similar problems.

A fancier slideshow: thumbnails and a moving highlight

Two weeks ago I showed you how to create a simple image slideshow for your web pages. Last week, I showed you how to create an animated link highlight that responds to the mouse hovering over links. This week, I'm going to show you how to combine those two to create a fancier slideshow, like this example.

Hover animations and a sliding highlight

I said I would do a follow-up post on the Cycle plugin, and I will probably do that next. First, I want to explain how to do a graphical gimmick that I've used several times in conjunction with the Cycle plugin, as well as on its own. In the process, I'll try to show you how to do simple animations with jQuery.

Basically, I'll be showing you how to create a sliding highlight, like this example or the one on the navigation of my personal site. In either one, hover over the links to see the animation. Neat, huh? More interesting than just making the links change color or become underlined when you hover over them, and not too difficult to implement (or at least, it shouldn't be once you've gone through this tutorial).

Starting simple: a basic slideshow

A slideshow is a very common feature on web pages, and one that isn't hard to implement. For someone who's just starting out in the wonderful world of web design, though, trying to add something like this to your new site's home page could be daunting. Googling "web page slideshow" or something like that will return a massive number of results. There are probably hundreds of different ways to accomplish this goal, using a variety of different technologies. I'm going to show you one of the easiest.

A bit about me and this blog

"Give a man a fish, and you feed him for a day. Teach him to fish, and you feed him for life."

Hi, my name is Aaron Sherbeck. I'm an MK (missionary kid) who grew up in Pakistan and the Middle East, and I'm now a senior at Taylor University, majoring in Media Communication with an emphasis on the web.

I've always enjoyed working on creative graphical projects of one kind or another. In the past, videos and various 2D and 3D graphics held my interest—if you'd like to see some of my past projects, you can check out my website. More recently, my tastes have become more focused on web design, especially in the past few years.

The part of web design I find most enjoyable is coding and implementing various graphical gimmicks—for example, if you follow the link to my site above and hover over the items in the navigation bar, you should see the little "highlight" bar marking the current page change color and slide to align with the item you're hovering over (unless you have JavaScript disabled). I've also found that I enjoy showing and teaching others how to accomplish these visual tricks almost as much as figuring them out in the first place, and I've been told I do a good job of explaining them.

So that's what this blog is all about. I'll be posting examples of various visual tricks for websites that are fairly easy to implement and can give your website a bit of flair. However, I'll also try to take this one step further. On a lot of blogs of this sort, I've found that the bloggers tend to hand their readers a piece of code that creates some cool graphical gimmick, but with very little explanation of how or why it works, leaving that up to the readers to figure out. So if the readers don't already know CSS, JavaScript/jQuery, or whatever other web languages the examples may use, they are left incapable of modifying or customizing the example to fit it into the design scheme of their own site.

In these blog posts, I hope to avoid this problem. I'll show you how to create a variety of graphical gimmicks using CSS, jQuery, and a variety of useful jQuery plugins. However, I'll go one step further and try to explain a little about why I write the code the way I do, and how it works. I'll provide links to resources on other sites where appropriate, and try to make it possible for you to not only add some interesting bit of design to your site, but to further your understanding of web design in the process, so that some day you won't have to look up how to do this or that on a blog like this, because you'll be able to figure it out yourself.

If you've got any suggestions for graphical gimmicks that you'd like me to demonstrate and explain in future blog posts, comment and let me know!