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

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) 开发者_Python百科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.

I have just battled with this and as Tim said, they key is to use classes, separate IDs and define everything in each instance of jFlow, like this:

$(function() {
        $("#controller1").jFlow({
            controller: ".jFlowControl1",
            slides: "#slides1",
            slideWrapper : "#jFlowSlide1",
            width: "300px",
            height: "280px",
            prev: ".jFlowPrev1",
            next: ".jFlowNext1"
        });
        $("#controller2").jFlow({
            controller: ".jFlowControl2",
            slides: "#slides2",
            slideWrapper : "#jFlowSlide2",
            width: "300px",
            height: "280px",
            prev: ".jFlowPrev2",
            next: ".jFlowNext2"
        });
        $("#controller3").jFlow({
            controller: ".jFlowControl3",
            slides: "#slides3",
            slideWrapper : "#jFlowSlide3",
            width: "300px",
            height: "280px",
            prev: ".jFlowPrev3",
            next: ".jFlowNext3"
        });
    });

And the sliders look something like this:

<div id="controller1" class="hidden">
    <span class="jFlowControl1">No 1</span>
    <span class="jFlowControl1">No 2</span>
    <span class="jFlowControl1">No 3</span>
</div>
<div id="slides1">
        <img src="images/1.jpg" />
        <img src="images/2.jpg" />
        <img src="images/3.jpg" />
</div>

<!-- second controller and slides -->
<div id="controller2" class="hidden">
    <span class="jFlowControl2">No 1</span>
    <span class="jFlowControl2">No 2</span>
    <span class="jFlowControl2">No 3</span>
</div>
<div id="slides2">
    <img src="images/1.jpg" />
    <img src="images/2.jpg" />
    <img src="images/3.jpg" />
</div>

<!-- third controller and slides -->
<div id="controller3" class="hidden">
    <span class="jFlowControl3">No 1</span>
    <span class="jFlowControl3">No 2</span>
    <span class="jFlowControl3">No 3</span>
</div>
<div id="slides3">
    <img src="images/1.jpg" />
    <img src="images/2.jpg" />
    <img src="images/3.jpg" />
</div>

So pretty much everything has a 1, 2 or 3 after it, or however many jFlow sliders you want.

If you want the previous and next to work these would be defined in the same way, like so:

<!-- first slider -->
<span class="jFlowPrev1">&lt;</span>
<span class="jFlowNext1">&gt;</span>

<!-- second slider -->
<span class="jFlowPrev2">&lt;</span>
<span class="jFlowNext2">&gt;</span>

<!-- third slider -->
<span class="jFlowPrev3">&lt;</span>
<span class="jFlowNext3">&gt;</span>

What I did was create another jquery.flow2.1.2 file placed it in the head section:

and amended the necessary. Here is the script:

/* 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.jFlow2 = function(options) {
    var opts = $.extend({}, $.fn.jFlow2.defaults, options);
    var randNum = Math.floor(Math.random()*11);
    var jFC = opts.controller2;
    var jFS =  opts.slideWrapper2;
    var jSel = opts.selectedWrapper2;

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

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

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

    $(opts.slides2).find("div").each(function(){
        $(this).before('<div class="jFlowSlideContainer2"></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.slides2).css({
            position:"relative",
            width: $(jFS).width()*$(jFC).length+"px",
            height: $(jFS).height()+"px",
            overflow: "hidden"
        });
        // jFlowSlideContainer
        $(opts.slides2).children().css({
            position:"relative",
            width: $(jFS).width()+"px",
            height: $(jFS).height()+"px",
            "float":"left",
            overflow:"auto"
        });

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

    // sets initial size
    resize();

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

    $(opts.prev2).click(function(){
        if ($(opts.slides2).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.next2).click(function(){
        if ($(opts.slides2).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.jFlow2.defaults = {
    controller2: ".jFlowControl2", // must be class, use . sign
    slideWrapper2 : "#jFlowSlide2", // must be id, use # sign
    selectedWrapper2: "jFlowSelected2",  // just pure text, no sign
    easing: "swing",
    duration: 400,
    width: "100%",
    prev2: ".jFlowPrev2", // must be class, use . sign
    next2: ".jFlowNext2" // must be class, use . sign
};
})(jQuery);

It worked and you have as many sliders on a single page :)

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/