jQuery slider
Op dit moment heb ik een jQuery image slider. Door op previous of next te klikken kan ik wisselen tussen de verschillende afbeeldingen.
Echter wil ik graag dat deze ook met de pijltjes toetsen te besturen te zijn, maar ik heb geen idee hoe ik dit kan inbouwen.
Dit is de functie die de prev en next aanstuurt:
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
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
_initEvents : function( options ) {
var instance = this;
instance.NavNext.bind('click.slicebox', function( event ) {
instance.navigate( 'next', options );
});
instance.NavPrev.bind('click.slicebox', function( event ) {
instance.navigate( 'prev', options );
});
instance.OptionPlay.bind('click.slicebox', function( event ) {
if( !instance.isSlideshowActive ) {
if( instance.animating ) return false;
instance.isSlideshowActive = true;
instance._slideshow( options, true );
instance.OptionPlay.addClass('rb-nav-pause').removeClass('sb-nav-play');
}
else {
instance._stopSlideshow();
}
});
instance.OptionInfo.bind('click.slicebox', function( event ) {
if( !instance.info ) {
instance._showInfo();
}
else {
instance._hideInfo();
}
});
},
var instance = this;
instance.NavNext.bind('click.slicebox', function( event ) {
instance.navigate( 'next', options );
});
instance.NavPrev.bind('click.slicebox', function( event ) {
instance.navigate( 'prev', options );
});
instance.OptionPlay.bind('click.slicebox', function( event ) {
if( !instance.isSlideshowActive ) {
if( instance.animating ) return false;
instance.isSlideshowActive = true;
instance._slideshow( options, true );
instance.OptionPlay.addClass('rb-nav-pause').removeClass('sb-nav-play');
}
else {
instance._stopSlideshow();
}
});
instance.OptionInfo.bind('click.slicebox', function( event ) {
if( !instance.info ) {
instance._showInfo();
}
else {
instance._hideInfo();
}
});
},
Iemand die mij kan helpen hiermee? Alvast heel erg bedankt!
Mvg,
Robin.
$(document).keydown(function(e){
if (e.keyCode == 37) {
alert( "left pressed" );
return false;
}
});
Character codes:
37 - left
38 - up
39 - right
40 - down
Het probleem is dat ik niet weet hoe ik dit in bovenstaande functie kan toevoegen.
als doe je wel moeilijk met die slide, en dit is niet alles?
http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/
En het voorbeeld dat ik gebruik is:
http://tympanus.net/Development/Slicebox/index4.html
initEvents : function( options ) {
$(document).keydown(function(e){
var instance = this;
if (e.keyCode == 39) {
instance.NavNext.bind('click.slicebox', function( event ) {
instance.navigate( 'next', options );
});
} elseif (e.keyCode == 37) {
instance.NavPrev.bind('click.slicebox', function( event ) {
instance.navigate( 'prev', options );
});
}
instance.OptionPlay.bind('click.slicebox', function( event ) {
if( !instance.isSlideshowActive ) {
if( instance.animating ) return false;
instance.isSlideshowActive = true;
instance._slideshow( options, true );
instance.OptionPlay.addClass('rb-nav-pause').removeClass('sb-nav-play');
}
else {
instance._stopSlideshow();
}
});
instance.OptionInfo.bind('click.slicebox', function( event ) {
if( !instance.info ) {
instance._showInfo();
}
else {
instance._hideInfo();
}
}
});
},
Daarmee trigger je een click op de juiste knop.
Dan lijkt het dus alsof je gewoon op die knop hebt gedrukt en kom je zo weinig mogelijk in aanvaring met de logica van de slicer
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
// slicebox aanmaken
$('#sb-slider').slicebox({
slicesCount : 5,
disperseFactor : 30,
sequentialRotation : true,
sequentialFactor : 100
});
// zorg er voor dat je, bij een keystroke een klik op de prev / next knop triggert
$(document).keydown(function(e) {
if (e.keyCode == 37 || e.keyCode == 38) { // left or up
e.preventDefault();
$('.sb-nav-prev').click();
}
if (e.keyCode == 39 || e.keyCode == 40) { // right or down
e.preventDefault();
$('.sb-nav-next').click();
}
});
// ...
});
// slicebox aanmaken
$('#sb-slider').slicebox({
slicesCount : 5,
disperseFactor : 30,
sequentialRotation : true,
sequentialFactor : 100
});
// zorg er voor dat je, bij een keystroke een klik op de prev / next knop triggert
$(document).keydown(function(e) {
if (e.keyCode == 37 || e.keyCode == 38) { // left or up
e.preventDefault();
$('.sb-nav-prev').click();
}
if (e.keyCode == 39 || e.keyCode == 40) { // right or down
e.preventDefault();
$('.sb-nav-next').click();
}
});
// ...
});
Heeft iemand enig idee hoe ik de beweging ook met de muis kan toevoegen? Dat als je de muisknop indrukt en naar rechts beweegt dat de slider naar rechts beweegt, en andersom?