jFlow Slider with WordPress
Hundreds of jQuery plug-in we use for sliding images in web pages. One of them is jFlow. Distinction for this plug-in is while other plug-in’s let you slide only images, jFlow offers other contents like iframe, flash etc. I use this plug-in for one of my project recently. It is easy to integrate with CMS like wordpress or drupal. Here is example to Integration process for wordpress. So let’s get started.
First create the container for the slides. Select the contents and link it to the div element.
|
<div id=”slides”><div ><div><img src=”/templates/images/blog.jpg” alt=”photo”> </div><div ><h2><!–?php echo $this—>item->title;?></h2><div ><p><!–?php echo $this—>item->introtext;?></p><a href=”"> read more</a> </div></div><div ></div></div></div><div id=”myController”><span >Prev</span> <span >1</span> <span >2</span> <span>3</span> <span >4</span> <span >5</span> <span >Next</span> </div><div ></div>
|
Download jFlow script and save it to the root directory. Add it to the head section of template.
<script type="text/javascript" src="/templates/js/jquery.flow.1.2.js"></script>
|
Then load it to the .js file.
jQuery(document).ready(function() {
jQuery("#myController").jFlow({
slides: "#slides", controller: ".jFlowControl", slideWrapper : "#jFlowSlide", selectedWrapper: "jFlowSelected", width: "1000px", height: "250px", duration: 400, prev: ".jFlowPrev", next: ".jFlowNext" }); });
|
You are almost complete. You can make it more convenient by adding some CSS properties. It’s all up to you.
.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;}
|
So that’s it. Quite easy for everyone.
Related posts:
No Comments
No comments yet.
RSS feed for comments on this post.
Sorry, the comment form is closed at this time.
