Sunday, May 22, 2011

jFlow content slider with Joomla

jFlow is a cool content slider. Many jQuery slider only offers images to slide. Whereas jFlow helps us to slide any type of contents. Vacuum, the cool Joomla template, has jFlow for sliding the contents. It's pretty simple to integrate jFlow with joomla. See a live demo of jFlow with joomla on GrameenTheme.

Let's discuss a sample way to integrate jFlow with joomla:

photo

item->title;?>

item->introtext;?>

read more
Prev 1 2 3 4 5 Next

Then we added the jFlow script file.



We load the jFlow script.

jQuery(document).ready(function() {
jQuery("#myController").jFlow({
slides: "#slides",  
controller: ".jFlowControl", 
slideWrapper : "#jFlowSlide", 
selectedWrapper: "jFlowSelected",  
width: "1000px",  
height: "235px",  
duration: 400,  
prev: ".jFlowPrev", 
next: ".jFlowNext" 
});
});



Finally we add some styles to it.

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; padding: 10px;}
.slide-thumbnail img {max-width:300px; }
.slide-details { width:650px; float:right; margin: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; }
.article-info { border-bottom: 1px solid #F9A159; border-top: 1px solid #F9A159; background: #F9F1E0;}
.article-info dd{float: left; margin: 0px 5px;}


See the book OpenCart 1.4 Template Design Cookbook.
See the book Joomla Mobile Development Beginners Guide




List of my works:

Opencart Extensions:

  1. Product Based Quantity Wise Shipping: Find it here.
  2. OpenSSLCOMMERZ: integrate SSLCOMMERZ with opencart: Find it here.
  3. Fine Search v.1.0 - Improves Opencart search feature to find relevant: Find it here.
  4. Opensweetcaptcha - An easy way to generate attractive captcha for your system!: Find it here.
  5. Custom Field Product - add unlimited custom fields to the product form: Find it here.
  6. Formcaptcha - add captcha on the register page: Find it here.

My Books:

  1. OpenCart 1.4 Template Design Cookbook.
  2. Joomla Mobile Development Beginners Guide

No comments: