Software by tag 'jFlow'

There are a lot of free scripts to create a content slider. One of the example is SmoothGallery by JonDesign. But, if you are using jQuery and don’t want to install another JavaScript library, then you may need to consider jQuery slider plugin.

Today, i am going to provide a tutorial on using jFlow, a minimalist jQuery plugin to create a content slider. Readers are required to have basic XHTML/CSS and JavaScript skills. I will provide a download link after this tutorial. This is the first tutorial post on WebDesignBooth, and i will write more tutorials in future.

So, let’s start to create our content-slider now. Download both jQuery and jFlow before you proceed.

1. Create a style.css file, and insert the following code into the file:

   #jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
   #myController { font-family: Georgia; padding:2px 0;  width:610px; background:#3AB7FF; }
   #myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
   
   .slide-wrapper { padding: 5px; }
   .slide-thumbnail { width:300px; float:left; }
   .slide-thumbnail img {max-width:300px; }
   .slide-details { width:290px; float:right; margin-left:10px;}
   .slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
   .slide-details .description { margin-top:10px; }
   
   .jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
   .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

(more…)