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.

Thanks for Downloading jFlow Plus!

Congratulations, you are now ready to get started using jFlow Plus on your next project. Using this file and the demo page on wordimpressed.com your first steps should be to setup the scripts, DOM and styles.

About jFlow

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.min.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;   }