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.
* 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:
- Once ITUNES has loaded, clicked the “Advanced Tab”
- Choose “Subscribe to Podcast”
- 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.
-
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.
-
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.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
this is awesome and simple. Thanks a lot, really.
Such wonderful plugins, as always!
I like that stuff
great tutorial! simple and easy to integrate, am I able to add auto play functionality?
interesting tnx
This is great! I want to customise it to make it autoplay and when mouse over it stops. Can this be done?
Thanks for Great Help!
http://www.raghibsuleman.com/jquery-jflow-slideshow
Thanks for Tutorials and Download
http://www.raghibsuleman.com/jquery-jflow-slideshow
Very Cool! THX
Thank you! Very nice Slider.
very usefull for me
I am Website Designer in india
It is very Useful for me and i am also web developer in ahmedabad.
Life saving! Thanks a lot! Simple and practical.
Is there any way to add a fade effect for the slides rather than the default “swing” function?
can the images be auto-scrolling? How can i get this effects?
In ie7, the images are stacking on top of one another. Any reason why this happens?
Here is a link to what I’m talking about:
http://splitelementdesign.com/rejuva/v2.html
Hi there, great tutorial but could it possible for me to create two set of them in 1 page? i tried several times but it still wont works once i duplicate another set in the same page? but it works on 1 set…can u tell me how? thank you very much.
i really interested
thanks for share
How to use multiple content in one page?
Thanks
Nice thing …. Was looking for this … ;)
Regards,
H.
Thanx.. Gr8 tool .. ;)
How would I add a fade effect instead of slide?
i know this has been asked, but saw no answers. how can i put more that one slideshow on one page? thanx.
nice plugin : thanks 4 share that
Nice stuff and easy to implement…will use this
vamos a ver que locura sale!!!
gracias tio
saludos from peru
Oscar
I will definitely add it to my PHP Classifieds Script!
thank u for helpful points.
Congratulations. very Useful, thank you so much :)
thanks a lot
very nice & useful
Thanks for Tutorials :
you website was helpful for me
wonderful plugins as always
sure man!
Excellent plugin. Quick question: Is there a way to make the slider loop instead of traversing left to the first slide? Thanks in advance.
Hey guys,
great tutorial here. I’m following along and have got everything shown as is, however all I am getting is the stack of images as you have before the functionality is added. I’m using localhost. Is there possibly something that needs to be done to make this function on localhost?
scratch that. I wasn’t linking to jquery and jflow properly. works great. thanks a lot of the tutorial!
works perfect and its amazing!!!
Hi This post was so informative thanks for that
Good Luck to you
nice post
thanks 4 shared
thanks for the article
Bookmarked
Hell thanks!
very Useful, thank you so much :)
really interested
thanks for share
Hello!
I Really love this slider! I would like to have some help though.
I have not edited anything in the html code, just a little in the css..
Well,
I wanted it to be like this:
Left arrow on Left side
Right arrow on Right side
Picture slider in the middle.
But, the thing is, I can not get the picture in the middle =(
Could you help me out with that? Would greatly appriciate it!
This is how the slider looks for me;~
http://screensnapr.com/v/2IWHfl.png
I am able to make the picture go up and down, but not left / right “/
Nevermind! I fixed it haha!
Just had to add a few css statements (if you call them that)
Thanks for providing the jFlow on your side. The website you link to as the origin developer does not provide the jFlow plugin anymore.
Bye
Simon
links are broken
thx very very
There is a spelling error on line 1 in the implementation section, which prevented this from working for me for hours… :(
The best slider i ever tried! Thank you for sharing your work!
wooooooooooooa
this is greaat…….
tnxxxxxxxxxxxxxxxxxxxx
Thanks man
You are gooood!! Very nice and useful thank you!