Code

Web Design Tips: Adding A Featured Section to Your Site Using jQuery and jFlow

Smooth content sliders are widgets that can show clickable product images, Adobe Flash, HTML, or other content, effectively creating a “featured section” in a small amount of space.

After researching several “easy” solutions (most of which did not work), I tried the jFlow plugin that has been available for nearly a year. The jFlow plugin is a lightweight (meaning fast-loading) JavaScript that allows site owners to easily integrate a fluid content slider. Kean Loong Tan, a California-based web developer, created the plugin, and in this edition of “Web Design Tips,” I’ll quickly show you how to use the jFlow plugin and potentially integrate it into your ecommerce site design. (Check out our demonstration site to see jFlow in action).

Video: Using jFlow

Built on jQuery

The jFlow plugin makes use of jQuery, an extremely concise JavaScript library that allows web developers to code less and do more. According to the official jQuery home page, the library “simplifies HTML document traversing, event handling, animating, and AJAX [Asynchronous JavaScript and XML] interactions for rapid web development.”

Four Files Required

To get jFlow to work you need four files. First, you will need to download a mini version of the jQuery library. In this demonstration, I used jQuery 1.3.2, which was the most current release available.

Next, you’ll need jFlow. I’ve included version 1.2 below, or you can get it directly from the source.

<code>
       /* Copyright (c) 2008 Kean Loong Tan
       http://www.gimiti.com/kltan
       * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
       * jFlow
       * Version: 1.2 (July 7, 2008)
       * Requires: jQuery 1.2+
       */

       (function($) {

    $.fn.jFlow = function(options) {
        var opts = $.extend({}, $.fn.jFlow.defaults, options);
        var randNum = Math.floor(Math.random()*11);
        var jFC = opts.controller;
        var jFS =  opts.slideWrapper;
        var jSel = opts.selectedWrapper;

        var cur = 0;
        var maxi = $(jFC).length;
        // sliding function
        var slide = function (dur, i) {
            $(opts.slides).children().css({
                overflow:"hidden"
            });
            $(opts.slides + " iframe").hide().addClass("temp_hide");
            $(opts.slides).animate({
                marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")}, 
                opts.duration*(dur),
                opts.easing,
                function(){
                    $(opts.slides).children().css({
                        overflow:"auto"
                    });
                    $(".temp_hide").show();
                }
            );

        }
        $(this).find(jFC).each(function(i){
            $(this).click(function(){
                if ($(opts.slides).is(":not(:animated)")) {
                    $(jFC).removeClass(jSel);
                    $(this).addClass(jSel);
                    var dur = Math.abs(cur-i);
                    slide(dur,i);
                    cur = i;
                }
            });
        }); 

        $(opts.slides).before('<div id="'+jFS.substring(1, jFS.length)+'"></div>').appendTo(jFS);

        $(opts.slides).find("div").each(function(){
            $(this).before('<div class="jFlowSlideContainer"></div>').appendTo($(this).prev());
        });

        //initialize the controller
        $(jFC).eq(cur).addClass(jSel);

        var resize = function (x){
            $(jFS).css({
                position:"relative",
                width: opts.width,
                height: opts.height,
                overflow: "hidden"
            });
            //opts.slides or #mySlides container
            $(opts.slides).css({
                position:"relative",
                width: $(jFS).width()*$(jFC).length+"px",
                height: $(jFS).height()+"px",
                overflow: "hidden"
            });
            // jFlowSlideContainer
            $(opts.slides).children().css({
                position:"relative",
                width: $(jFS).width()+"px",
                height: $(jFS).height()+"px",
                "float":"left",
                overflow:"auto"
            });

            $(opts.slides).css({
                marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
            });
        }

        // sets initial size
        resize();

        // resets size
        $(window).resize(function(){
            resize();                         
        });

        $(opts.prev).click(function(){
            if ($(opts.slides).is(":not(:animated)")) {
                var dur = 1;
                if (cur > 0)
                    cur--;
                else {
                    cur = maxi -1;
                    dur = cur;
                }
                $(jFC).removeClass(jSel);
                slide(dur,cur);
                $(jFC).eq(cur).addClass(jSel);
            }
        });

        $(opts.next).click(function(){
            if ($(opts.slides).is(":not(:animated)")) {
                var dur = 1;
                if (cur < maxi - 1)
                    cur++;
                else {
                    cur = 0;
                    dur = maxi -1;
                }
                $(jFC).removeClass(jSel);
                slide(dur, cur);
                $(jFC).eq(cur).addClass(jSel);
            }
        });
    };

    $.fn.jFlow.defaults = {
        controller: ".jFlowControl", // must be class, use . sign
        slideWrapper : "#jFlowSlide", // must be id, use # sign
        selectedWrapper: "jFlowSelected",  // just pure text, no sign
        easing: "swing",
        duration: 400,
        width: "100%",
        prev: ".jFlowPrev", // must be class, use . sign
        next: ".jFlowNext" // must be class, use . sign
    };

          })(jQuery);


</code>

Third, you will need some HTML so that you can share the content with site visitors. Here is the HTML that I used in the video.

<code>      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
    &lt;title&gt;Practical j&lt;/title&gt;
    &lt;link href="grillstyle.css" rel="stylesheet" type="text/css" /&gt;
    &lt;script src="jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="jquery.flow.1.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script language="javascript"&gt;
    $(document).ready(function(){
    $("#myController").jFlow({
    slides: "#mySlides",
    width: "390px",
    height: "370px",
    duration: 100
      });
   });
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="wrapper"&gt;
&lt;div id="head"&gt;
&lt;h1&gt;Summer Product Specials&lt;/h1&gt;
    &lt;p&gt;Cool Deals for Hot Days&lt;/p&gt;
&lt;/div&gt;&lt;!--end head--&gt;   


  &lt;div id="myController"&gt;
   &lt;span class="jFlowControl"&gt;Genesis EP-310 Grill&lt;/span&gt;
   &lt;span class="jFlowControl"&gt;Q 140 Electric Grill&lt;/span&gt;
   &lt;span class="jFlowControl"&gt;22.5-Inch Cooker/Smoker &lt;/span&gt;
    &lt;span class="jFlowControl"&gt;Summit E-650 Gas Grill &lt;/span&gt;
   &lt;/div&gt;
   &lt;div id="mySlides"&gt;
   &lt;div&gt;&lt;img src="img/ep-310.png" alt="Weber Grill" /&gt;&lt;span&gt;&lt;p&gt;Weber Genesis EP-310 Grill&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/q-140.png" alt="Weber Grill" /&gt;&lt;span&gt;&lt;p&gt;Weber Q 140 Electric Grill&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/smoker.png" alt="Weber Grill" /&gt;&lt;span&gt;&lt;p&gt;Weber 22.5-inch Smokey Mountain Cooker&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/summit.png" alt="Weber Grill" /&gt;&lt;span&gt;&lt;p&gt;Weber Summit E-650 Gas Grill&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;span class="jFlowPrev"&gt;&lt;img src="img/prev.png" alt="previous" /&gt;&lt;/span&gt;
    &lt;span class="jFlowNext"&gt;&lt;img src="img/next.png" alt="next" /&gt;&lt;/span&gt;

&lt;/div&gt;&lt;!--end wrapper--&gt;
&lt;/body&gt;

    &lt;/html&gt;
</code>

Finally, you’ll want to style your content with a CSS (cascading style sheet) like this one.

<code> body {margin: auto; text-align: center; color: #000000; font-family: Arial; }
 #wrapper {text-align: center;}
 #head {}
 #jFlowSlide {margin: auto;}
 #myController {background: #3b1f11; line-height: 200%; color: #ffffff; cursor: pointer; }
 #myController span {padding: 1px 5px 1px 5px;}
 h1 {font-weight: bold; font-stretch: extra-expanded;}
 p {font-style: italic;}
 .jFlowPrev img {position: relative; float: left; margin-top: -200px; padding-left: 25%; cursor: pointer;}
 .jFlowNext img {position: relative; float: right; margin-top: -200px; padding-right: 25%; cursor: pointer; }
</code>

Resources

Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x