Plugins

User login
Login/Register
Can't find a Plugin?

Can't find a Plugin you are looking for? Check out the jQuery Wiki page.

Are you a plugin developer? Please move your plugin over to this site.

Website Bug or Feature Request?

Found a bug on the new jQuery Plugin website? Have a feature request?

Submit it to the jQuery Plugin website issue queue to ensure it is noticed!

Releases for jFlow - The Ultra-lightweight Fluid Content Slider for jQuery


jFlow - The Ultra-lightweight Fluid Content Slider for jQuery 1

May 14, 2008 - 7:36pm — ktan
Download: jFlow.zip
Size: 17.9 KB
md5_file hash: ed0c7804a759febe726f4bf3b6015661
First released: May 14, 2008 - 7:36pm

jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 1.9kb minified!!!.

$("#myController").jFlow({
    slides: "#mySlides",
    width: "99%",
    height: "200px",
    duration: 400
});

Explanation:

#myController: the div where all the slide controller are nested in
slides:  the div where all your sliding divs are nested in (note: you can define classes for each div inside slides)
width: can be specified in px or % (required)
height: can be specified in px (required)
duration: time in miliseconds to transition one slide (optional, default is 400)

2 divs created by jFlow as containers, you can style them to your liking

#jFlowSlide: This is the container where all the slides reside
.jFlowSelected: This is the current activated controller

Special div definition
.jFlowPrev: Any element with this class will transition to previous slide upon clicking
.jFlowNext: Any element with this class will transition to next slide upon clicking
.jFlowControl: Any element inside the controlling div with this class will map to the corresponding slide

Example

<script language="javascript">
$(document).ready(function(){
    $("#myController").jFlow({
        slides: "#mySlides",
        width: "99%",
        height: "200px",
        duration: 400
    });
});
</script>

<div id="myController">
   <span class="jFlowControl">No 1 </span>
   <span class="jFlowControl">No 2 </span>
   <span class="jFlowControl">No 3 </span>
   <span class="jFlowControl">No 4 </span>
</div>

<div id="mySlides">
   <div>First Slide</div>
   <div>Second Slide </div>
   <div>Third Slide </div>
   <div>Fourth Slide </div>
</div>

<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>