Using the Wonderful jFlow Plugin

It seems that the obsession of the web design industry right now is the ability to create a “featured section”. While it once may have required a great deal of skill, that is no longer the case. In this screencast, I’ll show you how to easily create a scrollable featured section using one of Theme Forest’s popular themes as a reference. Let’s get into it!

* Sorry about the less than perfect audio quality. I meant to pick up a condenser microphone this week, but I’ve been super busy. I promise to get that taken care of ASAP. Also, if you’re interested in creating video tutorials for us, email me at nettutsblog@gmail.com.

You can view and purchase Justin’s theme here.

Download The Plugin

As always with a new plugin, the first step is to visit the creator’s website and download the plugin. All that you’ll need is a tiny Javascript file – and of course a copy of the jQuery core library. While you’re at the site, take a few moments to go over the concepts. You’ll be amazed at how simple the implementation is, relatively speaking (or typing?).

Implementation

After you’ve saved the Javascript file to your hard drive, import into a new web application like so.

%MINIFYHTMLc94538bcb1e561fa1eaa8f9f945d99709%%MINIFYHTMLc94538bcb1e561fa1eaa8f9f945d997010%

* Note that you should be importing the core library before jFlow. Otherwise, you’ll get some obvious errors!

To use the jFlow plugin, you’ll need to understand the function of some ids and classes.

• div#controller: This element will serve as our “hook” when calling our jQuery.
• .jFlowControl: These spans will be children of the #controller div. For as many slides as you have, you must create associated span tags with this class. For example, if I had five slides, I must have five tags with a class of .jFlowControl. You’ll understand this more by example, shortly.
• div#slides: Within the slides div, you need to nest additional divs that contain your desired content for each “slide”. More on this later.
• .jFlowPrev, .jFlowNext: These two classes allow you to continue to the next slide, or vice versa.

Sample HTML Document

    

       No 1 
       No 2 
       No 3 
    

    

    
    
    

    

       
Here is a featured image. Nice!
       
Here is another neat featured image. Nice!
       
Here is one last very cool featured image. Nice!
    

Let’s go over this a bit.

• As with most pages, we’ve wrapped our entire contents in a “wrap” element. This is purely for aesthetic reasons. It’s not required.
• In my controller div (which is the hook for jFlow), I’ve added three span tags with a class of “jFlowControl”. Think of these spans as tabs. If you click “No 3″, it will quickly cycle to the third associated “slide”. Remember, the number of span tags that you have must be equal to the number of divs within your “slide” div. Note that both have three.
• Moving along, we now come to a div with an id of “prevNext”. This isn’t a key id, I could have named it Rick if I had wanted. It’s simply a wrapper div so that I can control where my “Next” and “Previous” buttons go on the page. The class name of the images are important however: ‘jFlowPrev’, ‘jFlowNext’.
• Last, we come to the “slides” div. Within this div, we’ll place children divs. Each of these children will serve to be one “tab”. Once again, note that if I wanted to add a fourth image, I would also need to an additional “jFlowControl” span tag within the controller div.

jQuery

The code that we have to write is quite simple. First, review the final script, and then I’ll go over each line.

$(function() {
    $("#controller").jFlow({
        slides: "#slides",
        width: "980px",
        height: "313px",
        duration: 600
    });
});

That’s it!. First, we’re waiting for when the document is ready to be traversed. Then, we grab our controller div and call the “jFlow” method. There are many parameters available to us, but we’ll just use a few.

• Slides: It’s asking, “What is the name of the div element that contains each slide – or tab? We’ll associate it with the appropriate “slides” div that I created earlier. But, you can change it if you like.
• Width, Height: These are required. In this example, I’m only using images. As a result, I’ve set the width and height values equal to those of the images.
• Duration: In milliseconds, how long do you want the transition from slide to slide take? I’ve set 600 – which is about one half of a second.

You’re Finished

The only other thing that you’ll want to implement is some CSS styling. However, jFlow will work perfectly without it. That would obviously only be for aesthetic reasons. If you desire more information, I go over the styling a bit more in the screencast.

The only other thing that you’ll want to implement is some CSS styling. However, jFlow will work perfectly without it. That would obviously only be for aesthetic reasons. If you desire more information, I go over the styling a bit more in the screencast.

The layout that see above is intentionally simple. I’ll leave it to you to imagine all of the different uses!

A few weeks ago, Chris Coyier created a tutorial on a similar plugin – “codaSlider”. I’ve personally used the plugin in a couple of projects, however, I’ve found that jFlow is much simpler and easier to use. Either way, both are powerful plugins. Use them wisely.

Subscribe to the Weekly Screencasts

You can add our RSS feed to your ITUNES podcasts by doing the following:

1. Once ITUNES has loaded, clicked the “Advanced Tab”
2. Choose “Subscribe to Podcast”
3. Enter “http://feeds.feedburner.com/NETTUTSVideos”

That should do it! The screencast will also be searchable on ITUNES in the next twenty four hours.

Additional Resources

• 

  jFlow Plugin

  This is the home site of the jFlow plugin. It’ll get you started with the Javascript file along with some helpful examples.

  Visit Website

• 

  ThemeForest

  If you’re looking to learn more, or to simply make some extra money, make sure that you pay a visit to ThemeForest.net.

  Visit Website

• 

  Dynamic Fun with Simple Pie and jQuery – Coda slider tutorial

  Check out another jQuery plugin that performs a similar function. In this tutorial, Chris Coyier will show you how you can implement the coda slider plugin to create a beautiful blogroll.

  Read Article

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.