<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jFlow Plus v2</title> <link href='http://fonts.googleapis.com/css?family=Rokkitt:700' rel='stylesheet' type='text/css'> <link href="styles/style.css" type="text/css" rel="stylesheet"/> <!-- ********************************* Start of necessary jFlow scripts: ********************************* --> <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> <body> <div id="container"> <div id="header"> <div id="logoWrap"> <h1>jFlow Plus v2 <span>By Devin Walker, WordImpressed</span></h1> </div> </div> <!-- ********************************************** Start of jFlow DOM ********************************************** --> <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 the Community and giving back. To keep with this tradition, jFlow Plus now has more of the features you want.</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. Run this puppy through W3C's validator to see it pass the test!</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. More features coming soon including more effects and options.</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 Slide Navigation?</h3> <p>That's a new feature. Click on the paging buttons in the top-right to quickly jump to any jFlow slide number.</p> </div> </div> </div> <div id="myController"> <span class="jFlowControl"></span> <span class="jFlowControl"></span> <span class="jFlowControl"></span> <span class="jFlowControl"></span> </div> <div class="jFlowPrev"></div> <div class="jFlowNext"></div> </div> <!--end: jFlow DOM --> <!-- ********************************************** YOU CAN IGNORE THE FOLLOWING HTML DEMO CONTENT: ************************************ --> <div id="content"> <div id="main"> <div id="intro"> <h2 class="intro-heading">Thanks for Downloading jFlow Plus!</h2> <p class="intro-p">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.</p> </div> <h2>About jFlow</h2> <p><strong>jFlow Plus v2</strong> 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.</p> <h3>How to Setup jFlow</h3> <p>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.</p> <h4>Include the Scripts in your document head</h4> <p>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.</p> <pre> <code> <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> </code> </pre> <h4>The jFlow DOM</h4> <p>Copy and paste the following markup within your body tags in the appropriate DOM zone.</p> <pre> <code> <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 --> </code> </pre> <h2>jFlow CSS</h2> <p>Either add the following styles to your main CSS file or create a separate jFlow CSS file like in the downloadable demo.</p> <pre> <code> #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; } </code> </pre> </div> <!--end: main --> <div id="sidebar"> <img src="images/demo-page/browsers.jpg" alt="jFlow has been tested on Internet Explorer, Chrome, Firefox, Safari and Opera" /> <div class="sidebar-widget"> <h3 class="widgettitle">jFlow's Resources</h3> <ul class="check-list"> <li><a href="http://www.wordimpressed.com/plugins/jflow-plus-v2-demo-documentation-download/" title="Visit the jFlow Article" target="_blank">Article on WordImpressed</a></li> <li><a href="http://www.wordimpressed.com/demos/jflowplus-v2/" title="Visit the jFlow Demo" target="_blank">Demo Page</a></li> <li><a href="http://www.jquery.com" title="jQuery">jQuery.com</a></li> </ul> </div> <!--end: widget --> <div class="sidebar-widget"> <h3 class="widgettitle">Bug Report</h3> <p>If you notice any bugs while using jFlow Plus please use the comments on the <a href="http://www.wordimpressed.com/plugins/jflow-plus-v2-demo-documentation-download/" title="Visit the jFlow Article" target="_blank">jFlow article page</a> which is monitored. Please explain the bug in full and if possible a link to an example.</p> </div> <!--end: widget --> <div class="sidebar-widget"> <h3 class="widgettitle">Code Contribution</h3> <p>Feel free to modify, enhance and hack this plugin to your hearts delight. If you are an experienced coder and want to help take jFlow into the future, all we ask is that you contrubute your enhancements to the community. </p> </div> <!--end: widget --> </div> <!--end: sidebar --> </div> <!--end: content --> </div> <!--end: container --> </body> </html>
