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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Vince September 24th
Nice article! Simpler but still seems a little heavy on the markup and doesn’t make sense if javascript is off. Just whining
( )Stefan September 24th
Vince, what do you mean doesn’t make sense if javascript turned off? Displaying all the images at once along with their descriptions is enough for a worst case scenario.
( )Marty September 24th
Nice tutorial…
The link under resources to ThemeForest 404s… And should probably link straight to Justin’s theme anyway seeing as it was the inspiration for this tutorial…
( )insic September 24th
really nice screencast and nice app. thanks for this article.
( )Vince September 24th
@Stefan What I meant to say is #controller and #prevNext have no semantic meaning without the use of javascript, I would have them either disabled in the markup and change the css properties to display with jQuery… or just have jQuery append the elements to the markup if javascript is enabled.
( )rodney_viper September 24th
Really interesting and the effect is beautifull
( )Mark September 24th
This is cool. I did something similar on an HP website but I used MooTools. I used Fx.Scroll to do it.
( )Craigsnedeker September 24th
That’s pretty shweeet!
( )Stephen Coley September 24th
I’m gonna be looking forward to Wednesdays now! Thanks Nettuts!
( )Nate September 24th
Awesome stuff! This will be pretty helpful. I like the video player =)
( )Ben Griffiths September 24th
Excellent, thanks - and screencasts FTW
( )Jeffrey Way September 24th
@Vince - Yeah, it’s not ideal with Javascript turned off. It wouldn’t be too difficult to compensate. It would probably be a good idea to add those buttons dynamically with Javascript. That way, if it is turned off, the buttons won’t be showing.
( )Evan September 24th
For degradability on things like this I often just fall back to overflow:auto so that users can still see all of the content using a scroll bar.
Another little trick I like to use is to apply a class “has-script” to the body when the page loads and that way I can easily target users who do/don’t have javascript in my css.
In this example if I wanted to hide the arrows for non javascript users (since they become useless) I would set up my css like this:
#prev-next{
( )display:none;
/* other styles here */
}
.has-script #prev-next{ display:block; }
Jeffrey Way September 24th
@Evan - Ahh. Very good point.
( )Shane September 24th
Good stuff - I like the screencast.
This type of thing is being used quite a bit on portfolio sites, so thanks for posting a little overview here.
( )Lamin Barrow September 24th
Neat effect. kind of lightboxy but great tut nevertheless. Thanks.
( )diego gomes September 24th
Where is rails?
( )the new tutorial was discontinued?
SpyesX September 24th
Thank you for this tutorial I’ve integrated it in the news version of my personnal website.
( )Robin September 24th
Jeffrey,
What software are you doing this with? Camtasia?
Thanks.
( )Justin Scheetz September 24th
Hello, it’s Justin! Thanks so much for featuring my theme on Nettuts, that’s so exciting to see!
Also, I just wanted to point out that the “You can view and purchase Justin’s theme here.” link doesn’t work.
Thanks again.
( )Jeffrey Way September 24th
@Robin - Yep. Recording with Camtasia.
Html editor is Visual Studio.
( )enhancedmedia September 24th
so i have been racking my brains for ages on this, and it took me a while just to pinpoint my problem,
i am putting a contact form within one of the slides, everything works great, right up until i put a normal textarea tags in for the message input part of my form, even normal inputs for say the name and email for example are fine, but its just when in inserting a textarea.
the problem is that normally there should be no horizontal scrollbar and the adjacent slides over all width does not affect the browser right, however, put a textarea in a slide and it now gives the browser a horrible long scrollbar!!
please try this out and see if you can find a fix, argggh im tearing my hair out over this.
( )mr. tunes September 24th
great tutorial + video. i’m planning a system where i have something of this sort to feature new music releases that also have flash music players on each slide. is this a good tool for this?
also what would you use if say you wanted to change the photos in the above example without having to do any code or ftp work. do you have to write a plugin for your CMS to pull that off?
( )Elliott Cost September 24th
Very nice tutorial! What is the name of the add-on you use to edit css within Firefox?
( )Jeffrey Way September 24th
@Elliott - It’s Chris Pederick’s Web Developer toolbar. : https://addons.mozilla.org/en-US/firefox/addon/60
( )Furley September 24th
@Evan Great advice.
( )Tom9 September 25th
From a usability perspective it would be good to have the appropriate scroll arrow greyed out/inactive when you reach then first or last image (and with no action enabled). Seems a bit counter-intuitive going BACK when you reach the last image and click next …
( )Otherwise, nice - thanks, I shall be using this (albeit modified!).
Tim September 25th
I like that stuff
( )Robin September 25th
@enhanced
If the form tag that wraps your textfields etc doesn’t have the css: form {display:inline} you can have whacky results. Try that first. Without seeing the code it’s hard to debug.
( )Addison Kowalski September 25th
I’m having a problem positioning the prevNext div over the sliding portion. I’m trying to get it in the middle right of the main slider div. Anyone know how to do this? I currently have it working for everything, but IE, of course.
Here is the URL that is bugged:
( )http://dev.stratosrenewables.com/
Rahul September 29th
Cool stuff. like it. have downloaded the source code. Thanks.
( )Jodi October 1st
Thank you very much, that was a very useful and well put together tutorial.
( )It’s a really neat tool. Does anyone know if it’s possible to get a fading transition between images?
Ian October 4th
Hi, I was wondering how I could have the wrapper div expand in height once the current tab is in view. Is this possible with Jflow or should I just use another script?
( )Syeef October 6th
Hey, I wanted to know if it was possible to have more links within a “slide” div that also use the jFlow plugin? I mean could it be done, if so, could you show an example, because I’ve been trying for the past two days, and still can’t get my head around it.
( )Mat October 8th
Hey! Nice tut. But it doesn’t work in Opera. Pictures are smaller then should be and show on screen at once. Their prev/next behaviour is also strange.
( )Jeffrey Way October 8th
@Mat - I just looked at the demo on Opera. It works perfectly.
( )Jad Graphics October 9th
Another great photo gallery that I can use!
( )Jarod Taylor October 9th
Is there ANY way to use jFlow with content that’s added dynamically? For instance, with coda-slider when ever you add a div, it automatically creates the links/tabs to go with it, but unfortunately it doesn’t support 100% width like jFlow does. Any suggestions??
( )Matt October 9th
Guys,
This is the best TUT place that I have been to. I just want to say thank you and I hope that I can do my part to give back a little love.
Great job guys in making these techniques seem so easy and actually make them easy!
Great looking site, clean, easy to get around, and very helpful.
( )Matt October 10th
Question?
Can the script allow for fading in and out when going to the next slide? and when the slider gets to the end does it have to show the slides going back to the start?
Any help would do.
Thanks!
( )Jeffrey Way October 10th
@Matt - I don’t think so.
Yes, it has to show the slides moving back…but I kind of like that feature.
( )Matt October 10th
@Jeffrey Way
Is there another script that you would recommend using to achieve those types of effects. The slides showing as they go back to the first one won’t work in what i’m trying to do.
Thanks in advance
( )Mat October 12th
@Jeffrey Way
So I suppose it doesn’t work on MY Opera. That’s shame.
( )Dustin October 20th
@ Matt
You can just edit the code and take out the else statements for prev and next functions in the js file
( )Robert October 24th
The tuts on this site are great! I was wondering if it was possible to make the slides autoplay when the page loads and how would you do that?
( )awake November 1st
which one is better JFlow or Coda-Slider
JFlow http://www.gimiti.com/kltan/demo/jFlow/
Coda-Slider http://www.ndoherty.com/demos/coda-slider/1.1/
( )shaun November 19th
Is there a way to bring the content in for the slides dynamically so that when Javascript is turned off it only shows the first slide? Kind of like on the homepage of woothemes?
( )Shannon November 22nd
I’m using jflow as a wrapper for my main content, but when I have more content on page 2 than on page 1, my page 1 won’t shrink to fit.
(By pages I mean the seperate mySlides divs)
Anyone got any ideas?
( )owain Llewellyn January 14th
Does anyone know how to have more than one jflow sliding content area on a web page?
the site im working on has two on the same page, Im yet to change the div classes of the second one so that the prev and next buttons target the second sliding content area as opposed to the first content slide.
and example can be found at
http://www.icomcreative.co.uk/print.html
if anyone can help that would be great…
been stuck with this problem for a few days now.
( )owain January 14th
sorry the link should be
http://www.icomcreative.co.uk/print_portfolio.html
( )owain Llewellyn January 21st
does anyone know of a way round this?
Im struggling to get anything to work..
thanks
( )aGoosmann February 10th
@Jeffrey Way
Hi, great tut, can you please add “Safari” when you test the sites, Mac users would appreciate.
Thanks.
( )Aaron Arnett February 17th
First this is a great tut, and I am learning a lot. I am having some trouble using jflow with a lightbox however. Alone, each work fine. When added together only one will work. PLEASE HELP!
( )Brett March 2nd
I would like to add thumbnails to the bottom so that you don’t have to click through, you can just click on the thumbnail and it scrolls automatically to your div. Anyone have any ideas?
Thanks,
( )Brett
Prabin Karmacharya March 19th
Great Code to use
( )Willem May 4th
Hi, great plugin! Is it also possible to fade in/out the content instead of sliding it?
( )Shallem May 14th
Hey,
Need some help.. =S
Is it possible to put a php form inside a jflow?
( )Ryan Evasn May 15th
i’m very impressed with these tutorials. you guys explain thing very well and make it all seem so simple. thank you.
( )Crs May 24th
How can change the pictures without click? I mean I want to Auto Jflow.
Thanks
( )Monit May 25th
Hi Jeffrey
I liked this one very much, Infact I integrated two effects in one just now. Can I make a tutorial of it for the nettuts blog.
I will be making template for theme forest as well using same effect.
Let me know if I can submit it as a tutorial. Also tell me the guidelines how the tutorial should be etc.
Best Regards
Monit
( )sciphan May 25th
Is there anyway to add links to the scrolling pictures. I tried including the link href command within each slide’s div container, but no luck. I’m using the slider to display categories of merchandise and upon clicking will expand on that category.
ie, clicking on the scrolling t shirt icon will take you to the tshirt page
Thanks in advance.
( )Angel June 5th
The video wont play/show
( )jeremy June 11th
is there a way to use jflow inside another jflow?
say your site is using jflow as the 3 pages to slide through. Say on your “photo” page you want to use jflow for scrolling throught the photos.
How could this be performed? I tried setting it inside one another, but when that is done, the slides are competing against each other and the sript doesnt work the three divs set for the “pages” but yet flows the “slide content 1-3″ slides.
( )this make sense? sorry.
alelacayip June 12th
nice tutorial
thanks
( )Web Design Mumbai July 1st
wow, this is such a great script. very useful. thanks a lot for the lovely tutorial as well. thanks
( )