jFlow Plus: Auto Slide and Pause Demo and Tips
29. Jul, 2010 
128 Comments
UPDATE: jFlow Plus has a new update and this article is no longer updated. Please go to jFlow Plus v2 to view the most recent version’s documentation, demo and download.
jQuery Sliders make a great addition to any website. The ideal slider should allow the user to flip through each slide and have a timer countdown for auto slide functionality. The jFlow plugin for jQuery is a good slider that is easy to implement, but unfortunately lacks an auto slide functionality. Let’s examine how we can extend this plugin to offer an improved jFlow slider with autoslide and pause functionality.
Introducing jFlow Plus
jFlow Plus is an extension of the original jFlow Slider to extend the original light-weight code for added functionality (auto-slide and pause functionality).
jFlow is great for loading quickly and having actual content within your slider such as headings and paragraphs for each individual slide. This is good for both user experience and search engine optimization.
jFlow Plus Demo
jFlow Plus is a free jQuery plugin that is a modified version of the popular jFlow plugin released in 2008. It is available from WordImpressed.com and also jQuery.com’s plugins sections.
Download the Demo Package
View the Demo
Visit the jQuery jFlow Plus Page
Please Note: This article does not pertain to implementing with WordPress. A future article will demonstrate how to effectively implement jFlow Plus on the WordPress platform.
Implementing jFlow Plus
Ready to implement jFlow Plus onto your website? Great! Open up your favorite IDE and let’s begin. For this tutorial, I will be using Dreamweaver.
Create the HTML Framework
Create a new HTML document and name it “index.html” and save it to your root directory. If you already have an existing website then skip this step.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jFlow Plus</title> </head> <body> <!-- jFlow content will eventually go here --> </body> </html>
Load the Script in your “Head”
Download the jFlow Plus scripts available in the packages above and upload them to the appropriate directory on your website.
Now let’s load our scripts in the between the head tags of our index.html file:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jFlow Plus</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="scripts/jflow.plus.js" type="text/javascript"></script> </head>
Do you Have 3 Slider Images?
Make sure that you have some images ready for you to use in the slider. In the jFlow Plus demo package available above there are 3 images of Yosemite that you can feel free to use.
Add the jFlow Slider Elements to the Page
Now that we are calling our JavaScript files and jQuery in the Head, let’s add the basic HTML framework we will will be working with to our file. Add the following right after the first opening
tag:<div id="container">
<div id="mySlides">
<div id="slide1"><img src="images/slide1.jpg" alt="Slide 1 jFlow Plus" />
<span><h3>Welcome to the First Slide!</h3><p>We hope you enjoy the jFlow Plus Slider - a light-weight slider for your web design needs. <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
<div id="slide2"><img src="images/slide2.jpg" alt="Slide 2 jFlow Plus" />
<span><h3>Hey you made it to the Second Slide!</h3><p>We Know you enjoy this plugin... it's not too hard to implement, right? <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
<div id="slide3"><img src="images/slide3.jpg" alt="Slide 3 jFlow Plus" />
<span><h3>Woah You're on the Third Slide</h3><p>You've completed quiet the journey! All the way from slide 1 to slide 3... congratulations! <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
</div>
<div id="myController">
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
</div>
<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>
</div>Notice that we are wrapping our content with span tags. We use span tags because if you used div tags it would interfere with jFlow Plus. Ok great, now that we have the scripts and HTML framework in place let’s fire up the jFlow.
Initialize the jFlow Slider
Now that we have the scripts in place for the jFlow slider to work we need to initialize the jFlow scripts once the DOM is ready. To do this we will add the following bit of code to our head right after the jQuery and jFlow scripts:
<script language="javascript"> $(document).ready(function(){ $("#myController").jFlow({ controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign slides: "#mySlides", // the div where all your sliding divs are nested in selectedWrapper: "jFlowSelected", // just pure text, no sign width: "800px", // this is the width for the content-slider height: "350px", // this is the height for the content-slider duration: 400, // time in miliseconds to transition one slide prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext", // must be class, use . sign auto: true // true or false }); }); </script>
Add the CSS to the Head
Cool, now we have out scripts importing on page load… the problem now is that it’s plain without and CSS magic. Let’s add a stylesheet to the head before the javascript and lay down some styles for our jFlow slider. To do this create a new directory called “styles” and add a new file called “style.css”:
Above is an image of how your website’s file structure should look now. Below is the code you will need to insert above the jFlow scripts in your head.
<link href="styles/jflow.plus.css" type="text/css" />
Let’s look into the jFlow Plus CSS Further
To develop an understanding of how our jFlow Plus slider is being styled let’s take a look into the style sheet and examine exactly how our markup is being styled. You’re going to be tweaking these styles heavily when you go to implement it on your own web project.
Let’s begin with the Container
The great thing about jFlow Plus is that it takes care of a lot of the CSS for you. For the most implementations, modifying the styles for the container elements is already taken care of. For our demonstration, let’s begin by setting their positioning (we will use absolute) and styling the content within each individual slide’s spans. Also, let’s give a nice transparent background for the content for visual appeal.
#slide1 span, #slide2 span, #slide3 span { background: url("../images/contentBg.png") repeat top left transparent; position: absolute; bottom: 20px; right: 20px; }
or you can simply:
.jFlowSlideContainer span { background: url("../images/contentBg.png") repeat top left transparent; position: absolute; bottom: 20px; right: 20px; padding: 10px; }
You can now see that the text is nicely place over our sliding image in the position we declared above. As well we have also provided a nice background that can be changed per slide. Also remember that you can change up the position of the content by moving it’s span via CSS. Very flexible!
Finish Styling the Slide Content
Let’s make sure that we give each span’s content some individual styles to please our users.
#slide1 h3, #slide2 h3, #slide3 h3 { font-family: Georgia, serif; color: #FFF; font-size: 35px; font-style: italic; margin: 0 0 10px 0; } #slide1 p, #slide2 p, #slide3 p { font-family: Georgia, serif; color: #FFF; margin: 0; }
Image showing a view of the demo jFlow Plus slider:
Please remember that this is just a demonstration and that you can style each content container much more individualistically than the CSS I’ve shown above.
Don’t forget the Links
Let’s add some quick style to our links to increase usability, click through rates and user experience.
.jFlowSlideContainer a { color: #F90; text-decoration: none; font-style: italic; } .jFlowSlideContainer a:hover { text-decoration: none; border-bottom: 1px dotted white; } .jFlowSlideContainer a:active { position: relative; top: 1px; }
First give the slider links some color, secondly a hover effect and finally, a little click effect that gives the user an impression that the link is being pressed.
Prettyify the Previous and Next Buttons
You may have noticed that the previous and next buttons aren’t styled yet. Let’s take care of that now using some cool arrows. First, let’s get rid of the “prev” and “next” text in the jFlowPrev and jFlowNext spans and replace them with empty divs:
<span class="jFlowPrev"><div></div></span> <span class="jFlowNext"><div></div></span>
Now let’s style the divs with our button bg and provide hover effects. We are using an image sprite for this to save load time.
/* your overall slider container */ #container { width: 800px; height: 350px; position: relative; /* css border on top and bottom */ border-top: 5px solid #999; border-bottom: 5px solid #999; } .jFlowNext div { background:url("../images/arrows.png") no-repeat scroll 0 -35px transparent; height:130px; position:absolute; top:110px; right: -50px; width:50px; cursor:pointer; } .jFlowPrev div { background:url("../images/arrows.png") no-repeat scroll -84px -35px transparent; height:130px; position:absolute; top:110px; left: -50px; width:50px; cursor:pointer; }
The CSS above first provides some style to our slider’s container element and some nice borders on the top and bottom. Next we are styling and positioning the previous and next buttons. Notice we are using cursor: pointer; so the user knows that this is in face a clickable button.
Previous and Next Hover Effects
Now that our slider and buttons are looking pretty good it’s time to add the hover effect. Since we are using an image sprite we can just use background-position on hover to move our background image up to reveal the hover image.
.jFlowPrev div:hover { background-position: -84px -235px; } .jFlowNext div:hover { background-position: 0px -235px; }
Final jFlow Plus Wrap-up
Now that you have seen some of the capabilities of jFlow Plus it’s time to go ahead and start tweaking with the demo and implementing the slider on your own websites. If you have any question please feel free to contact WordImpressed or leave a comment below!
No related posts.
Pingback: 20 Amazing and Fully Functional jQuery Slider Plugins - OurTuts.com
Pingback: 15 Plugins para Slider com jQuery | Blog da DlteC
Pingback: 20+Amazing and Fully Functional jQuery Slider Plugins | Free Development Resources
Pingback: Richard Choi » Blog Archive » Simple jQuery Slide
Pingback: 20 Amazing and Fully Functional jQuery Slider Plugins | kamranbhutto
Pingback: 190 + best! jQuery slider tools – Part (II) - Pixel2Pixel Design
Pingback: Jquery slider