Advertisement
News

Using the Wonderful jFlow Plugin

by

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?).

Description

Implementation

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


* 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
Previous Next

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.

Final Simple Product

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

  • How jquery Works

    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.net

    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

    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.


Related Posts
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    JavaScript & AJAX
    Ember Components: A Deep DiveEmber components retina preview
    Ember.js is a JavaScript MVC framework that allows developers to create ambitious web applications. Although pure MVC allows a developer to separate concerns, it does not provide you with all the tools and your application will need other constructs. Today, I'm going to talk about one of those constructs. Ember components are essentially sandboxed re-usable chunks of UI. If you are not familiar with Ember, please check out Getting Started With Ember.js or the Let's Learn Ember Course. In this tutorial, we will cover the Web Components specification, learn how to write a component in Ember, talk about composition, explain the difference between an Ember view and an Ember component, and practice integrating plugins with Ember components.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Creative Coding
    Using Selector-Query for Responsive, Column-Driven LayoutsSelector query 400
    We've all heard about media queries. We've used them extensively in our themes to make them responsive. They're great for most purposes, but when it comes to column-driven layouts, we sometimes need more control to make our designs stand out. In this article, you will learn about the Selector-Query jQuery plugin, and how to use it in your WordPress themes.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: Progress, Alerts, Tooltips and the Elusive Mega DropFoundation mega retina
    Let's add to our Foundation skill set by learning how to make use of progress bars, alerts, tooltips and the mega drop which Zurb make use of on their site, but isn't actually in Foundation. We'll look at adding all of these components into the contact form from the previous tutorial, using a touch of custom jQuery so you can get an idea of how these elements could work in your own projects. Let's get started.Read More…