jQuery jFlow插件。我如何在单个页面上使用多个页面？

Question

我使用了一个名为jFlow的非常可爱又简单的插件，它为我提供了一个基本的内容滑块等。但是，我没有看到任何文档或有关如何在同一时间单独工作两个（或更多）从另一个。

目前，如果我设置了两个，它们几乎组合为一个，尽管彼此具有不同的配置。

任何帮助将是伟大的，谢谢。 Michael。

Answer 1

问题是，它没有设置为多个。

你不能有相同的ID两个元素，所以尽量将事情哪里找呢，使用类在可能的情况（

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

有许多很好的替代品这个脚本，它可能是值得。考虑的jCarousel，一个

http://sorgalla.com/jcarousel/

Answer 2

我刚才作战这个和蒂姆说，他们关键是使用类，独立的ID和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 3

我所做的就是创建另一个jquery.flow2.1.2文件，把它放在头部分：

并修改了必要的。下面是该脚本：

/*版权所有（C）2008基恩龙谭http://www.gimiti.com/kltan *麻省理工学院（http://www.opensource.org/licenses/mit-license.php） * jFlow 下许可*版本：1.2（2008年7月7日） *需要：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); 

它的工作，你有一个单页:)在尽可能多的滑块