저는 jFlow라는 매우 사랑스럽고 간단한 플러그인을 사용하고 있습니다. 기본 컨텐트 슬라이더 등을 제공합니다. 그러나 한 페이지에서 두 개 (또는 그 이상)를 동시에 얻는 방법에 대한 문서 나 도움말은 볼 수 없습니다. 서로로부터.jQuery jFlow 플러그인. 한 페이지에 여러 페이지를 표시하려면 어떻게합니까?
현재 두 세트를 설정하면 서로 다른 구성을 가지고 있음에도 불구하고 거의 하나로 결합됩니다.
도움을 주시면 감사하겠습니다. 마이클.
문제는 두 개 이상으로 설정되어 있지 않다는 것입니다.
동일한 ID로 두 가지 요소가있다, 그래서 당신이 그들을 찾을 경우 클래스를 사용하는 일을 변환하지 수있는 수 (아마 가치가이 스크립트에 대한 많은 좋은 대안이있다
$(function() {
$("div#controller").jFlow({
slides: "#slides", <-- try this as .slides
width: "980px",
height: "313px"
});
});
.. 하나 jCarousel을 고려
난 그냥이 함께 앓은하고 팀 말한대로, 그들은 키 같이, 클래스, 별도의 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 슬라이더를 가지고있다.
당신이 원하는 경우 이전 등이 마음에 들면 동일한 방법으로 정의 될 일을 다음 : 다른 jquery.flow2.1.2 파일을 작성했다 내가했던
<!-- first slider -->
<span class="jFlowPrev1"><</span>
<span class="jFlowNext1">></span>
<!-- second slider -->
<span class="jFlowPrev2"><</span>
<span class="jFlowNext2">></span>
<!-- third slider -->
<span class="jFlowPrev3"><</span>
<span class="jFlowNext3">></span>
는 헤드 섹션에 배치 :
및 필요한 사항을 수정합니다.
/* 저작권 (C) 2008 킨 룽 탄 http://www.gimiti.com/kltan * MIT의 (http://www.opensource.org/licenses/mit-license.php) * jFlow 을 아래에 라이센스 * 다음은 스크립트입니다 버전 : 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);
그것은 일을 jQuery를 당신은 한 페이지 :)에 많은 슬라이더를 가지고 : 1.2 (2008 년 7 월 7 일) *가 필요합니다
나는 오늘 밤 이것을 시도 할 것이다. 그러나 jFlow는 "ID이어야한다"는 등의 사실에 상당히 제한적으로 보인다. 내 사이트에서 구현하기 전에이 한계를 알고 있었으면 좋겠다. 오 잘. 바라기를 당신의 해결책은 효과적 일 것입니다. 많은 감사. – Michael