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.
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:
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:
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:
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.
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.
or you can simply:
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.
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.
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:
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.
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.