HV-Designs.co.uk

May 27th, 2009 in JQuery Tutorials by Richard Carpenter

jQuery & jFlow

• Share

Good evening everybody in todays tutorial we’ll be dabbling into some jquery. We’ll be intergrating a jQuery plugin called jFlow into a website.

Before we start this tutorial your going to need a few things:

- Jquery 1.2.6.Pack (download here).
- Jquery jFlow Plugin 1.0 (download here).
- A website ready template to add jflow into.

If you want to read up about the jflow plugin there website is HERE. If your asking yourself “why is he using jquery 1.2.6?” then the answer to your question is because i couldnt get jflow to work with the new libary. (just speaking from experience). Although i do believe there is a jflow 1.2 version which might work.

Once you have all your files open up your template in your code editor. Navigate to your templates main folder, create a new folder called “js” then copy and paste the jflow and jquery 1.2.6 file into the folder. Open up your index.html and link the two files in the head section by your style sheet.

<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.flow.1.1.min.js" type="text/javascript"></script>

Underneath the two linked js files add this chunk of javascript.

<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "900px",
height: "250px"
});
});
</script>

Without the chunk of code above your slides will not slide. The width and height are required, if you remove the height the slides will work in firefox but will not in internet explorer. The width of my slides on my template are 900px wide and 250px in height, you will have to adjust these 2 values according to your own design. Lets look at the code above in more deatil.

Firstly we have a div of #myController this is the div where all the controllers will be nested. we then have a div of #slides this is the div where all your sliding divs are nested in. we then have width this can be specified in px or % as is a required style. We then have height this can be specified in px and is also required.

Lets take alook at my featured area in which we’ll be placing the slides. Il be using the “Your PROject” template i made in a previous tutorial. The code looks like this.

<div id="featured"><!--FEATURED CONTENT STARTS-->
<div class="featured-text"><!--FEATURED TEXT STARTS-->
<h1 class="featured">featured text here 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod vel euismod tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae turpis augue. Nulla facilisi.  Continue Reading...</p>
</div><!--FEATURED TEXT ENDS-->

<div id="featured-image01"><!--FEATURED IMAGE STARTS-->
<div class="featured-buttons"><!--NEXT AND PREVIOUS BUTTONS STARTS-->
<div class="featured-btn">
<img src="images/next_btn.png" alt="Next"  />
<div class="featured-btn"><img src="images/prev_btn.png" alt="Previous" />
</div>
</div>
</div><!--NEXT AND PREVIOUS BUTTONS END-->
</div><!--FEATURED IMAGE ENDS-->

</div><!--FEATURED CONTENT ENDS-->

The mockup above looks like this.

Above the featured area DIV tag we need to add our jflow controllers copy and paste the code below, above your featured area code.

<div id="controller" class="hidden">
<span class="jFlowControl">No 1</span>
<span class="jFlowControl">No 2</span>
<span class="jFlowControl">No 3</span>
</div>

My main featured area has a main container called featured, rename this to slides. Also rename the style in the style sheet to slides. At the very bottom of your style sheet we need to add the style to hide our other two slides. We can do this by adding the style below.

.hidden {
	display: none; /*hides our 2nd and 3rd featured slides*/
}

In our featured area under the slides div we need to add a blank div. At the end of our featured content we need to close the div. The code looks like this.

<div id="slides"><!--FEATURED CONTENT STARTS-->

<div><!--STARTS SLIDE #1-->

<div class="featured-text"><!--FEATURED TEXT STARTS-->
<h1 class="featured">featured text here 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod vel euismod tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae turpis augue. Nulla facilisi.  Continue Reading...</p>
</div><!--FEATURED TEXT ENDS-->
<div id="featured-image01"><!--FEATURED IMAGE STARTS-->
<div class="featured-buttons"><!--NEXT AND PREVIOUS BUTTONS STARTS-->
<div class="featured-btn">
<img src="images/next_btn.png" alt="Next"  />
<div class="featured-btn"><img src="images/prev_btn.png" alt="Previous" />
</div>
</div>
</div><!--NEXT AND PREVIOUS BUTTONS END-->
</div><!--FEATURED IMAGE ENDS-->

</div><!--ENDS SLIDE #1-->

</div><!--FEATURED CONTENT ENDS-->

Your next two slides or how ever many you will have to being with another empty div and end with a div so for example your slides would look like this.

<div><!--STARTS SLIDE #1-->
FIRST SLIDE CONTENT
</div><!--ENDS SLIDE #1-->

<div><!--STARTS SLIDE #2-->
SECOND SLIDE CONTENT
</div><!--ENDS SLIDE #2-->

<div><!--STARTS SLIDE #3-->
THIRD SLIDE CONTENT
</div><!--ENDS SLIDE #3-->

Inside our featured content area we also have two images, the images are a left and right arrow.

<div class="featured-btn"><img src="images/next_btn.png" alt="Next"  /></div>
<div class="featured-btn"><img src="images/prev_btn.png" alt="Previous" /></div>

On each button we need to add a new class associated with jflow. The classes are.

class="jFlowNext"
class="jFlowPrev"

The jFlowNext classes will make the slide go left, the jFlowPrev will slide the content right. We have to add both classes into our featured area. The next class will go on our next button and the prev class will go on our previous button. Like this.

<div class="featured-btn"><img src="images/next_btn.png" alt="Next" class="jFlowNext"  /></div>
<div class="featured-btn"><img src="images/prev_btn.png" alt="Previous" class="jFlowPrev" /></div>

Once you’ve done that upload your template and see how it looks. If you wanted to make it slightly easier to read in your code you could place each slide in a php file then include them into your template. To view the finished product click the button below.

Thats all, hope you’ve enjoyed this tutorial any problems dont hesitate to ask. The template will be free to download soon so keep your eyes peeled.