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!

 

 

Implementation

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

  1. <script type="javasript" src="js/jQuery1.2.6.js"></script>
  2. <script type="javascript" src="js/jFlow.js"></script>

* 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

  1. <div id="wrap">
  2. <div id="controller">
  3. <span class="jFlowControl">No 1 </span>
  4. <span class="jFlowControl">No 2 </span>
  5. <span class="jFlowControl">No 3 </span>
  6. </div>
  7. <div id="prevNext">
  8. <img src="images/prev.png" alt="Previous" class="jFlowPrev">
  9. <img src="images/next.png" alt="Next" class="jFlowNext">
  10. </div>
  11. <div id="slides">
  12. <div><img src="images/1.jpg">
  13. Here is a featured image. Nice!
  14. </div>
  15. <div><img src="images/2.jpg">
  16. Here is another neat featured image. Nice!
  17. </div>
  18. <div><img src="images/3.jpg">
  19. Here is one last very cool featured image. Nice!
  20. </div></div>
  21. </div>
  22. <!-- end wrap -->

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.

  1. $(function() {
  2. $("#controller").jFlow({
  3. slides: "#slides",
  4. width: "980px",
  5. height: "313px",
  6. duration: 600
  7. });
  8. }); 

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.

Download:mediafire.com/file/4q3e4mpexgxle7d/jFlowTutorial.zip

Leave a comment