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.

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

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.

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.

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.

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.

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.

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

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

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.

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.