jQuery плагин jFlow. Как я могу иметь более одного на одной странице?

Question

Я использую очень красивый и простой плагин, который называется jFlow, который дает мне базовый слайдер контента и т. Д. Однако я не вижу никакой документации или справки о том, как получить две (или более) на одной странице одновременно, работая отдельно друг от друга.

В настоящий момент, если я настрою два, они почти объединятся в одно, несмотря на то, что их конфигурация отличается от другой.

Любая помощь была бы отличной, спасибо. Майкл.

Answer 1

Я только что с этим боролся, и, как сказал Тим, ключом к этому является использование классов, отдельных идентификаторов и определение всего в каждом экземпляре jFlow, например:

$(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"
        });
    });

И ползунки выглядят примерно так:

<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>

Так что почти у всех после 1, 2 или 3, или сколько угодно слайдеров jFlow.

Если вы хотите, чтобы предыдущий и следующий работали, они будут определены одинаково, например так:

<!-- 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>

Answer 2

Я создал другой файл jquery.flow2.1.2 и поместил его в раздел head:

и внесены необходимые изменения. Вот скрипт:

/ * Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan * Лицензировано под MIT (http://www.opensource.org/licenses/mit-license.php) * jFlow * Версия: 1.2 (7 июля 2008 г.) * Требуется: jQuery 1.2+ * /

(функция ($) {

$.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);

Это сработало, и у вас есть столько ползунков на одной странице:)

Answer 3

Проблема в том, что он не настроен так, чтобы иметь более одного.

У вас не может быть двух элементов с одинаковым идентификатором, поэтому попробуйте преобразовать объекты в классы там, где вы их найдете, где это возможно (

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

Есть много хороших альтернатив этому сценарию, которые, вероятно, стоит рассмотреть. jCarousel, для одного.

http://sorgalla.com/jcarousel/