GalleryView continue functie
Ik ben een gallery aan het opzetten. Ik wil ervoor zorgen dat wanneer er geen input van de gebruiker gedetecteerd wordt, de gallery gewoon loopt. Wanneer er met de muis bewogen wordt, dan stopt de gallery zodat de gebruiker op zn gemak kan klikken.
Het stoppen heb ik voor elkaar. Ik krijg alleen het automatisch verder gaan niet aan de praat.
Om user-input te meten gebruik ik:
http://paulirish.com/2009/jquery-idletimer-plugin/
GalleryView: http://spaceforaname.com/galleryview
Overigens, met deze funtie kan ik middels een start knop de gallery weer 'aan' zetten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$('#start').click(function(){
$(document).stopTime("animation_pause");
if(paused) {
showNextItem();
$(document).everyTime(opts.transition_interval,"transition",function(){
showNextItem();
});
paused = false;
$("#start").fadeOut(600);
$("#stop").fadeIn(600);
}
});
$(document).stopTime("animation_pause");
if(paused) {
showNextItem();
$(document).everyTime(opts.transition_interval,"transition",function(){
showNextItem();
});
paused = false;
$("#start").fadeOut(600);
$("#stop").fadeIn(600);
}
});
Maar ik wil eigelijk dat deze functie na x seconden automatisch wordt uitgevoerd.
BvD.
Gewijzigd op 16/06/2010 21:31:23 door Meddiecap B
// function you want to fire when the user becomes active again
});
Dat gewoon gebruiken?
Dan geeft hij aan dat hij showNextItem(); niet kent.
Ik heb het nu zo:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
(function($){
var timeout = 2000;
$(document).bind("active.idleTimer", function(){
stopSlideshow();
});
$(document).bind("idle.idleTimer", function(){
startSlideshow();
});
$.idleTimer(timeout);
})(jQuery);
var timeout = 2000;
$(document).bind("active.idleTimer", function(){
stopSlideshow();
});
$(document).bind("idle.idleTimer", function(){
startSlideshow();
});
$.idleTimer(timeout);
})(jQuery);
Waarbij stopSlideshow(); dit is:
Code (php)
1
2
3
4
2
3
4
$(document).oneTime(500,"animation_pause",function(){
$(document).stopTime("transition");
paused=true;
});
$(document).stopTime("transition");
paused=true;
});
Gewijzigd op 16/06/2010 21:37:42 door Meddiecap B
En niet die twee dingen die je nu aan elkaar probeert te knopen.
Het is gemaakt voor fullscreen en 1920x1200px. Dus het kan er een beetje vreemd uitzien.
Links boven staat een start/stop knopje.
Maar het gaat niet om die knoppen he. Ik wil het m.b.v. Idle Timer automatisch laten doen. Stoppen is blijkbaar vrij simpel, ik kan alleen niet de juiste code krijgen voor het verder gaan van de animatie.