3D jQuery - actie toevoegen op keydown
Op dit moment heb ik een script welke een soort carousel/slider laat zien aan de hand van jQuery.
Zie voorbeeld hier:
http://rcsdesign.nl/ease/ease.html
Als je op het vlak links of rechts drukt dan roteert het object zich naar het goede vlak toe, dit werkt perfect op dit moment.
Nu wil ik graag dat deze actie ook op te roepen is door een toets op het toetsenbord in te drukken.
Dit is mijn Javascript code:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
$(document).ready(function() {
$('li')
.bind({
"reposition": function() {
var degrees = $(this).data('roundabout').degrees,
roundaboutBearing = $(this).parent().data('roundabout').bearing,
rotateY = Math.round(roundaboutBearing - degrees);
$(this).css({
"-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"transform": "perspective(2000) rotateY(" + rotateY + "deg)"
});
}
})
$('ul').roundabout({
minScale: 0.8,
easing: 'easeOutExpo',
shape: 'square',
duration: 800
});
});
</script>
$(document).ready(function() {
$('li')
.bind({
"reposition": function() {
var degrees = $(this).data('roundabout').degrees,
roundaboutBearing = $(this).parent().data('roundabout').bearing,
rotateY = Math.round(roundaboutBearing - degrees);
$(this).css({
"-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"transform": "perspective(2000) rotateY(" + rotateY + "deg)"
});
}
})
$('ul').roundabout({
minScale: 0.8,
easing: 'easeOutExpo',
shape: 'square',
duration: 800
});
});
</script>
Dit is de HTML van de slider/carousel:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<ul>
<li><span>Block 1</span></li>
<li><span>Block 2</span></li>
<li><span>Block 3</span></li>
<li><span>Block 4</span></li>
<li><span>Block 5</span></li>
</ul>
<li><span>Block 1</span></li>
<li><span>Block 2</span></li>
<li><span>Block 3</span></li>
<li><span>Block 4</span></li>
<li><span>Block 5</span></li>
</ul>
Heeft iemand enig idee hoe ik de keydown functie aan bovenstaand script kan toevoegen? Ik heb het volgende al gevonden maar weet niet precies hoe ik dit in kan bouwen:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).keydown(function(e) {
if (e.keyCode == 37 || e.keyCode == 38) { // left or up
// HIER DE ACTIE
}
if (e.keyCode == 39 || e.keyCode == 40) { // right or down
// HIER DE ACTIE
}
});
if (e.keyCode == 37 || e.keyCode == 38) { // left or up
// HIER DE ACTIE
}
if (e.keyCode == 39 || e.keyCode == 40) { // right or down
// HIER DE ACTIE
}
});
Alvast bedankt als iemand mij hiermee kan helpen!
Mvg,
Robin.
Drukken op de pijltjes triggert een click op de juiste <li>.
Een probleem dat zich nog stelt, is dat je niet te vlug mag klikken. Als je op een pijl drukt terwijl het draaien bezig is, reageert de carousel niet zoals het mijn bedoeling is.
Dat moet dus nog wat beter (checken op "idle" of zo ...).
Maar voorlopig ...
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
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
<script>
var li_index = 0;
var li_length = 0;
$(document).ready(function() {
li_length = $('ul li').length;
/**
* returns the index of the li within the ul. sets the new value to the global var
* @param (int) inc: the number of places you want to add to the index...
*/
function rangeIndex(inc) {
var index = (li_index + inc) % li_length;
if (index < 0) {
index += li_length;
}
li_index = index;
return index;
}
$(document).keydown(function(e) {
if (e.keyCode == 37 || e.keyCode == 38) { // left or up
// HIER DE ACTIE
$($('ul li')[rangeIndex(-1)]).click();
}
if (e.keyCode == 39 || e.keyCode == 40) { // right or down
// HIER DE ACTIE
$($('ul li')[rangeIndex(1)]).click();
}
});
$('li')
.bind({
"reposition": function() {
var degrees = $(this).data('roundabout').degrees,
roundaboutBearing = $(this).parent().data('roundabout').bearing,
rotateY = Math.round(roundaboutBearing - degrees);
$(this).css({
"-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"transform": "perspective(2000) rotateY(" + rotateY + "deg)"
});
}
})
$('ul').roundabout({
minScale: 0.8,
easing: 'easeOutExpo',
shape: 'square',
duration: 800
});
});
</script>
var li_index = 0;
var li_length = 0;
$(document).ready(function() {
li_length = $('ul li').length;
/**
* returns the index of the li within the ul. sets the new value to the global var
* @param (int) inc: the number of places you want to add to the index...
*/
function rangeIndex(inc) {
var index = (li_index + inc) % li_length;
if (index < 0) {
index += li_length;
}
li_index = index;
return index;
}
$(document).keydown(function(e) {
if (e.keyCode == 37 || e.keyCode == 38) { // left or up
// HIER DE ACTIE
$($('ul li')[rangeIndex(-1)]).click();
}
if (e.keyCode == 39 || e.keyCode == 40) { // right or down
// HIER DE ACTIE
$($('ul li')[rangeIndex(1)]).click();
}
});
$('li')
.bind({
"reposition": function() {
var degrees = $(this).data('roundabout').degrees,
roundaboutBearing = $(this).parent().data('roundabout').bearing,
rotateY = Math.round(roundaboutBearing - degrees);
$(this).css({
"-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"transform": "perspective(2000) rotateY(" + rotateY + "deg)"
});
}
})
$('ul').roundabout({
minScale: 0.8,
easing: 'easeOutExpo',
shape: 'square',
duration: 800
});
});
</script>
Enorm bedankt voor het helpen! Ik was ook erg blij met je vorige script :)
Ik heb je even doorgenomen en het ziet er erg logisch uit, echter wanneer ik het uitvoer werkt het niet meer:
http://rcsdesign.nl/ease/ease2.html
Zoals je ziet staan alle vlakken nu onder elkaar. Weet jij misschien wat dit is?
Geef de button een ID en voor en na de code op de website van de maker zet je een enable en disable van de button.
of is dat te kort door de bocht?
------
helemaal op het einde nog een });
Code (php)
1
2
3
4
2
3
4
...
duration: 800
});
</script>
duration: 800
});
</script>
moet
Code (php)
1
2
3
4
5
2
3
4
5
...
duration: 800
});
});
</script>
duration: 800
});
});
</script>
-------------------
Update
Fons Seesink op 31/05/2012 00:08:30:
Waarom geen normale button maken met een onclick event dat je koppelt ...
Ik heb even naar de code gekeken; roudabout geeft je inderdaad die mogelijkheid.
Dat wordt dan zoiets:
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
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
<!DOCTYPE html>
<html>
<head>
<script src="http://rcsdesign.nl/ease/mint/?js" type="text/javascript"></script>
<meta charset="utf-8" />
<title>3D</title>
<link href="http://rcsdesign.nl/ease/assets/projects/roundabout2/demos/demos.css" rel="stylesheet" />
<style>
ul {
list-style: none;
padding: 0;
margin: 0 auto;
width: 32em;
height: 24em;
z-index: 1;
}
li {
height: 20em;
width: 20em;
background-color: #ccc;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
li.roundabout-in-focus {
cursor: default;
}
span {
display: block;
padding-top: 6em;
}
#ipad {
background-image: url('http://rcsdesign.nl/ease/images/ipad2.png');
width: 523px;
height: 340px;
position: absolute;
z-index: 2;
top: 0px;
left: 50%;
margin-left: -265px;
margin-top: 28px;
display: none;
}
#btnPrev {
/* display: none; */
}
#btnNext {
/* display: none; */
}
</style>
</head>
<body>
<div id="ipad"></div>
<input type="button" id="btnPrev" value="prev">
<input type="button" id="btnNext" value="next">
<ul>
<li><span>Block 1</span></li>
<li><span>Block 2</span></li>
<li><span>Block 3</span></li>
<li><span>Block 4</span></li>
<li><span>Block 5</span></li>
<li><span>Block 6</span></li>
<li><span>Block 7</span></li>
</ul>
<script src="http://rcsdesign.nl/ease/script/jquery.js"></script>
<script src="http://rcsdesign.nl/ease/script/jquery.roundabout2.js"></script>
<script src="http://rcsdesign.nl/ease/script/jquery.easing.js"></script>
<script>
$(document).ready(function() {
$(document).keydown(function(e) {
if (e.keyCode == 37 || e.keyCode == 38) { // left or up
$('#btnPrev').click(); // trigger a click on the prev button
}
if (e.keyCode == 39 || e.keyCode == 40) { // right or down
$('#btnNext').click(); // trigger a click on the next button
}
});
$('li')
.bind({
"reposition": function() {
var degrees = $(this).data('roundabout').degrees,
roundaboutBearing = $(this).parent().data('roundabout').bearing,
rotateY = Math.round(roundaboutBearing - degrees);
$(this).css({
"-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"transform": "perspective(2000) rotateY(" + rotateY + "deg)"
});
}
})
$('ul').roundabout({
minScale: 0.8,
easing: 'easeOutExpo',
shape: 'square',
btnNext: '#btnNext',
btnPrev: '#btnPrev',
duration: 800
});
});
</script>
</body>
</html>
<html>
<head>
<script src="http://rcsdesign.nl/ease/mint/?js" type="text/javascript"></script>
<meta charset="utf-8" />
<title>3D</title>
<link href="http://rcsdesign.nl/ease/assets/projects/roundabout2/demos/demos.css" rel="stylesheet" />
<style>
ul {
list-style: none;
padding: 0;
margin: 0 auto;
width: 32em;
height: 24em;
z-index: 1;
}
li {
height: 20em;
width: 20em;
background-color: #ccc;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
li.roundabout-in-focus {
cursor: default;
}
span {
display: block;
padding-top: 6em;
}
#ipad {
background-image: url('http://rcsdesign.nl/ease/images/ipad2.png');
width: 523px;
height: 340px;
position: absolute;
z-index: 2;
top: 0px;
left: 50%;
margin-left: -265px;
margin-top: 28px;
display: none;
}
#btnPrev {
/* display: none; */
}
#btnNext {
/* display: none; */
}
</style>
</head>
<body>
<div id="ipad"></div>
<input type="button" id="btnPrev" value="prev">
<input type="button" id="btnNext" value="next">
<ul>
<li><span>Block 1</span></li>
<li><span>Block 2</span></li>
<li><span>Block 3</span></li>
<li><span>Block 4</span></li>
<li><span>Block 5</span></li>
<li><span>Block 6</span></li>
<li><span>Block 7</span></li>
</ul>
<script src="http://rcsdesign.nl/ease/script/jquery.js"></script>
<script src="http://rcsdesign.nl/ease/script/jquery.roundabout2.js"></script>
<script src="http://rcsdesign.nl/ease/script/jquery.easing.js"></script>
<script>
$(document).ready(function() {
$(document).keydown(function(e) {
if (e.keyCode == 37 || e.keyCode == 38) { // left or up
$('#btnPrev').click(); // trigger a click on the prev button
}
if (e.keyCode == 39 || e.keyCode == 40) { // right or down
$('#btnNext').click(); // trigger a click on the next button
}
});
$('li')
.bind({
"reposition": function() {
var degrees = $(this).data('roundabout').degrees,
roundaboutBearing = $(this).parent().data('roundabout').bearing,
rotateY = Math.round(roundaboutBearing - degrees);
$(this).css({
"-webkit-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"-moz-transform": "perspective(2000) rotateY(" + rotateY + "deg)",
"transform": "perspective(2000) rotateY(" + rotateY + "deg)"
});
}
})
$('ul').roundabout({
minScale: 0.8,
easing: 'easeOutExpo',
shape: 'square',
btnNext: '#btnNext',
btnPrev: '#btnPrev',
duration: 800
});
});
</script>
</body>
</html>
(ik heb de href's en src's een absoluut adres gegeven, zodat het zonder meer werkt...)
Je staat vrij om die buttons onzichtbaar te maken, zie css ...
Ik zou trouwens aanraden dat je die <ul> een specifieke class of id meegeeft, kwestie dat niet elke <ul> en <li> raar begint te doen.
iets als:
<ul class="roundabout">
...
en dan
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$('ul.roundabout li')
.bind({
....
$('ul.roundabout').roundabout({
...
.bind({
....
$('ul.roundabout').roundabout({
...
Gewijzigd op 31/05/2012 13:58:56 door Kris Peeters