"Doorspoelen"
Maargoed: ik heb een leuk design, en daarin een script. Het probleem is nu dat je steeds op een pijl moet klikken om het volgende stuk info te laten zien. Voor het werkende voorbeeld klik je hier.
Code's:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
easing: "swing",
width: "900px",
height: "225px",
duration: 400,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
easing: "swing",
width: "900px",
height: "225px",
duration: 400,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
custom.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/* 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({}, $.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 maxi = $(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:"auto"
});
$(".temp_hide").show();
}
);
}
$(this).find(jFC).each(function(i){
$(this).click(function(){
if ($(opts.slides).is(":not(:animated)")) {
$(jFC).removeClass(jSel);
$(this).addClass(jSel);
var dur = Math.abs(cur-i);
slide(dur,i);
cur = i;
}
});
});
$(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
$(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:"auto"
});
$(opts.slides).css({
marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
});
}
// sets initial size
resize();
// resets size
$(window).resize(function(){
resize();
});
$(opts.prev).click(function(){
if ($(opts.slides).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.next).click(function(){
if ($(opts.slides).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.jFlow.defaults = {
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
easing: "swing",
duration: 400,
width: "100%",
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
};
})(jQuery);
* 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({}, $.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 maxi = $(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:"auto"
});
$(".temp_hide").show();
}
);
}
$(this).find(jFC).each(function(i){
$(this).click(function(){
if ($(opts.slides).is(":not(:animated)")) {
$(jFC).removeClass(jSel);
$(this).addClass(jSel);
var dur = Math.abs(cur-i);
slide(dur,i);
cur = i;
}
});
});
$(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
$(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:"auto"
});
$(opts.slides).css({
marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
});
}
// sets initial size
resize();
// resets size
$(window).resize(function(){
resize();
});
$(opts.prev).click(function(){
if ($(opts.slides).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.next).click(function(){
if ($(opts.slides).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.jFlow.defaults = {
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
easing: "swing",
duration: 400,
width: "100%",
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
};
})(jQuery);
jquery.flow.1.2.jsSorry voor het lange stuk, weet niet wat het belangrijkste is =)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="slides-container">
<div id="slides">
<div>
<div class="slide-image"><img src="images/logo_1.png" alt="welkom!" /></div>
<div class="slide-text">
<h2>..</h2>
<p>...</p>
</div>
</div>
</div></div>
</div>
<div class="controls"><span class="jFlowNext"><span>Next</span></span><span class="jFlowPrev"><span>Prev</span></span></div>
<div id="myController" class="hidden"><span class="jFlowControl"></span><span class="jFlowControl"></span><span class="jFlowControl"></span></div>
</div>
</div>
<div id="slides">
<div>
<div class="slide-image"><img src="images/logo_1.png" alt="welkom!" /></div>
<div class="slide-text">
<h2>..</h2>
<p>...</p>
</div>
</div>
</div></div>
</div>
<div class="controls"><span class="jFlowNext"><span>Next</span></span><span class="jFlowPrev"><span>Prev</span></span></div>
<div id="myController" class="hidden"><span class="jFlowControl"></span><span class="jFlowControl"></span><span class="jFlowControl"></span></div>
</div>
</div>
Stuk van de pagina
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* front page slider styles */
div#jFlowSlide {
margin:0 auto;
}
div#slides-container {
height:240px;
}
div#slides-container div#jFlowSlide {
height: 225px;
padding-top: 15px;
}
div#slides-container div.jFlowSlideContainer img {
margin:auto;
display:block;
border:4px solid #313D45;
}
div#slides-container div.jFlowSlideContainer div {
}
div#slides-container div.jFlowSlideContainer div.slide-image {
float:left;
width:322px;
padding-top:10px;
}
span.jFlowPrev, span.jFlowNext {
background-image:url('images/slide-prev.gif');
background-repeat:no-repeat;
display:block;
height:25px;
width:25px;
float:left;
margin:0;
cursor:pointer;
}
span.jFlowPrev span, span.jFlowNext span { display:none; }
span.jFlowNext {
background-image:url('images/slide-next.gif');
float:right;
}
div#slides-container div.controls {
position:relative;
top:-125px;
width:960px;
margin:0 auto;
}
div.slide-text {
padding-top: 10px;
}
.hidden { display:none; }
div#jFlowSlide {
margin:0 auto;
}
div#slides-container {
height:240px;
}
div#slides-container div#jFlowSlide {
height: 225px;
padding-top: 15px;
}
div#slides-container div.jFlowSlideContainer img {
margin:auto;
display:block;
border:4px solid #313D45;
}
div#slides-container div.jFlowSlideContainer div {
}
div#slides-container div.jFlowSlideContainer div.slide-image {
float:left;
width:322px;
padding-top:10px;
}
span.jFlowPrev, span.jFlowNext {
background-image:url('images/slide-prev.gif');
background-repeat:no-repeat;
display:block;
height:25px;
width:25px;
float:left;
margin:0;
cursor:pointer;
}
span.jFlowPrev span, span.jFlowNext span { display:none; }
span.jFlowNext {
background-image:url('images/slide-next.gif');
float:right;
}
div#slides-container div.controls {
position:relative;
top:-125px;
width:960px;
margin:0 auto;
}
div.slide-text {
padding-top: 10px;
}
.hidden { display:none; }
Style
Ik weet dat het veel code is. Ik zal eens kijken of ik de onbelangrijke stukken er even uit kan vissen.
De bedoeling is dat er om de zoveel seconde het volgende stuk tekst laten zien word.
Gewijzigd op 17/01/2011 16:02:21 door Jurrian Nijland
http://plugins.jquery.com/project/timers
Gewijzigd op 17/01/2011 16:04:27 door Yea Rupie