Slide 1 jFlow Plus

You Asked, jFlow Delivered

It's all about the Community and giving back. To keep with this tradition, jFlow Plus now has more of the features you want.

Slide 2 jFlow Plus

W3C Valid

Are you a stickler for writing valid code? So is jFlow. Run this puppy through W3C's validator to see it pass the test!

Slide 3 jFlow Plus

Frequent Code Updates

This slider is actively developed and used by thousands of websites. More features coming soon including more effects and options.

Slide 3 jFlow Plus

Notice the Slide Navigation?

That's a new feature. Click on the paging buttons in the top-right to quickly jump to any jFlow slide number.

Welcome to the jFlow Plus v2 Demo Page

jFlow is a elegant slider that compatible with all major browsers. The latest version of the slider, jFlow Plus v2, stays true to its roots with a revised down-to-the-basics approach that's not only visually appealing, but a breeze to setup. Keep it simple and compact; that's the jFlow way.

jFlow Plus v2 is a rewrite of the popular jFlow Plus slider released in 2009. The original jFlow slider was released in 2008 and has gained popularity for its ease of use and compact size. In this latest version there's a number of updates including effects, documentation and compatibility.

How to Setup jFlow

The following is a brief overview on how to setup jFlow for your web project. It is written for web developers with basic knowledge of DOM, jS and CSS.

Include the Scripts in your document head

The first step to setting up any jQuery plugin is ensuring you have your necessary stylesheets and javascript included in your document. The best place is the head of your document head to ensure that all necessary scripts are loaded first by the browser.

          
<head>

<link href="styles/jflow.style.css" type="text/css" rel="stylesheet"/>

<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>

<script type="text/javascript">

	$(document).ready(function(){

	    $("#myController").jFlow({

			controller: ".jFlowControl", // must be class, use . sign

			slideWrapper : "#jFlowSlider", // must be id, use # sign

			slides: "#mySlides",  // the div where all your sliding divs are nested in

			selectedWrapper: "jFlowSelected",  // just pure text, no sign
			
			effect: "flow", //this is the slide effect (rewind or flow)

			width: "940px",  // this is the width for the content-slider

			height: "300px",  // this is the height for the content-slider

			duration: 400,  // time in milliseconds to transition one slide
			
			pause: 5000, //time between transitions

			prev: ".jFlowPrev", // must be class, use . sign

			next: ".jFlowNext", // must be class, use . sign

			auto: true	

    });

});

</script>

</head>      
          
          

The jFlow DOM

Copy and paste the following markup within your body tags in the appropriate DOM zone.

          <div id="sliderContainer">

<div id="mySlides">

    <div id="slide1" class="slide">    

        <img src="images/jflow-sample-slide1.jpg" alt="Slide 1 jFlow Plus" />

        <div class="slideContent">
        	<h3>You Asked, jFlow Delivered</h3>
            <p>It's all about giving back to the development community.</p>
       
        </div>

	</div>    	

    <div id="slide2" class="slide">

        <img src="images/jflow-sample-slide2.jpg" alt="Slide 2 jFlow Plus" />

        <div class="slideContent">
        	<h3>W3C Valid</h3>
            <p>Are you a stickler for writing valid code?  So is jFlow.</p>
         </div>

    </div>   

	<div id="slide3" class="slide">

        <img src="images/jflow-sample-slide3.jpg" alt="Slide 3 jFlow Plus" />

        <div class="slideContent"><h3>Frequent Code Updates</h3>
        <p>This slider is actively developed and used by thousands of websites</p></div>

    </div>
    
    <div id="slide4" class="slide">

        <img src="images/jflow-sample-slide4.jpg" alt="Slide 3 jFlow Plus" />

        <div class="slideContent">
        	<h3>Notice the Pagination?</h3>
            <p>Click on the paging buttons below to navigate.</p>
        </div>

    </div>

</div>



<div id="myController">

   <span class="jFlowControl">1</span>

   <span class="jFlowControl">2</span>

   <span class="jFlowControl">3</span>
   
   <span class="jFlowControl">4</span>

</div>



<div class="jFlowPrev"></div>

<div class="jFlowNext"></div>

</div>
<!--end: sliderContainer -->

        

jFlow CSS

Either add the following styles to your main CSS file or create a separate jFlow CSS file like in the downloadable demo.

        	
#sliderContainer { width: 940px; height: 300px; position: relative; border-top: 5px solid #999; border-bottom: 5px solid #999; margin: 0 auto; }

.slideContent {  background:url("../images/contentBg.png") repeat scroll 0 0 transparent; position: absolute; bottom:0px; right:0px; padding: 10px; width: 920px; }

.slide h3 {  font: 26px/1em 'Rokkitt', serif; color: #FFF;  margin: 0 0 5px 0; }

.slide p { font-size: 14px; color: #FFF; margin: 0; }

.jFlowSlideContainer { overflow: hidden; }

.jFlowSlideContainer a { color: #F90; text-decoration: none; font-style: italic; }

.jFlowSlideContainer a:hover { text-decoration: none; }

.jFlowSlideContainer a:focus { position: relative; top: 1px; }

.jFlowNext { background:url("../images/arrows.png") no-repeat scroll 0 -35px transparent; height:130px; position:absolute; top:75px; right: -50px; width:50px; cursor:pointer; }

.jFlowPrev { background:url("../images/arrows.png") no-repeat scroll -84px -35px transparent; height:130px; position:absolute; top:75px; left: -50px; width:50px; cursor:pointer; }

.jFlowPrev:hover { background-position: -84px -235px; }

.jFlowNext:hover { background-position: 0px -235px; }


/* controller pagination */

#myController {position: absolute; top: 5px; right: 5px; }

.jFlowControl { background:url("../images/bullet.png") no-repeat scroll 0px 0px transparent;  float: left; width: 15px; height: 15px;}

.jFlowControl:hover { background-position: -32px 0px; cursor: pointer; }

.jFlowSelected, .jFlowSelected:hover {background-position: -15px 0px;   }
                
            
controller option must be class, use . sign
slideWrapper option Value must be id, not class
slides option The div where all your sliding divs are nested in
selectedWrapper option Just pure text, no class or id selector
effect option This is the slide effect: "rewind" or "flow"
width option This is the width for the content-slider
height option This is the height for the content-slider
duration number Time in miliseconds to transition one slide (1000 miliseconds = 1 second)
prev number Time in miliseconds to pause between slide transitions
next option Must be class, use . sign; default: ".jFlowPrev"
auto boolean Auto slide option: true or false

Coming Soon!

Coming Soon!