jQuery jFlow plugin. How can I have more than one on a single page?

Question

Hi,

I'm using a very lovely and simple plugin called jFlow that gives me a basic content slider etc. However, I can see no documentation or help on how to get two (or more) on one page at the same time working seperately from one another.

At the moment, if I set two up, they almost combine as one, despite having a different configuration from one another.

Any help would be great, thanks. Michael.

Answer 1

The problem is that it's not set up to have more than one.

You can't have two elements with the same ID, so try converting things to use classes where you find them, where possible (

$(function() {
    $("div#controller").jFlow({
        slides: "#slides", <-- try this as .slides
        width: "980px",
        height: "313px"
    });
});

There are many good alternatives to this script that it's probably worth considering. jCarousel, for one.

http://sorgalla.com/jcarousel/

Answer 2

/* 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({self: this}, $.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 timer;
    var maxi = $(this).find(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:"hidden"
                });
                $(".temp_hide").show();
            }
        );

    };

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

    $(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
    $(this).find(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:"hidden"
        });

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

    // sets initial size
    resize();

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

    $(this).find(opts.prev).click(function(){
        dotimer();
        doprev();
        if ($.isFunction(opts.onChange)) { opts.onChange(cur); }
        return false;
    });

    $(this).find(opts.next).click(function(){
        dotimer();
        donext();
        if ($.isFunction(opts.onChange)) { opts.onChange(cur); }
        return false;
    });

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

    var donext = function (x){
        if ($(opts.slides).is(":not(:animated)")) {
            var dur = 1;
            if (cur < maxi - 1)
                cur++;
            else {
                cur = 0;
                dur = maxi -1;
            }
            $(opts.self).find(jFC).removeClass(jSel);
            //$(jFS).fadeOut("fast");
            slide(dur, cur);
            //$(jFS).fadeIn("fast");
            $(opts.self).find(jFC).eq(cur).addClass(jSel);
        }
    };

    var dotimer = function (x){
        if((opts.auto) == true) {
            if(timer != null) 
                clearInterval(timer);

            timer = setInterval(function() {
                    $(opts.self).find(opts.next).click();
                    }, 3000);
        }
    };

    dotimer();
};

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

})(jQuery);