Jquery slideshow met controls

Voor de website van Parket Van Vynckt hebben we een Jquery Slideshow gemaakt, op basis van een bestaande slideshow. (http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php)

Deze tutorial gaf ons al de meeste van de functies die we nodig hadden, maar we hadden er graag nog volgende functies bij gezien:

• een pauze knop, en bijgevolg ook een start knop
• mogelijkheid tot het selecteren van een bepaalde slide, adhv een thumb

Het is niet de bedoeling om alles te gaan herhalen, enkele de nieuwe functies worden in deze post besproken.

Verder moesten de knoppen ook aangepast worden zodat ze passen binnen het design van de website voor Van Vynckt.

Voor klant Van Vynckt (parketvloeren) maakten we deze slideshow.

Enkele aanpassingen

We gaan enkel de slideshow starten indien er meer dan 1 slide is:

if(numberOfSlides > 1) slideShowInterval = setInterval(changePosition, speed);

Afhandeling van de pauze knop:

	// pauzeer de slideshow met clearInterval
	$('#pauseNav').bind('click', function () {		
    				
		$('#pauseblock').hide();
		$('#playblock').show();		
		clearInterval(slideShowInterval);
		
	});

Bij het klikken op de pauze knop zullen we de timer stoppen (clearInterval), de pause knop verbergen en de play knop zichtbaar maken.

Afhandeling van de play knop:

	// ga verder na pauzeren
	$('#playNav').bind('click', function () {	

		$('#playblock').hide();
		$('#pauseblock').show();
		slideShowInterval = setInterval(changePosition, speed);
		
	});

Hier doen we het omgekeerde, we starten opnieuw de timer zodat de slideshow zal verdergezet worden, maken de play knop onzichtbaar en de pause knop zichtbaar.

Selecteren van een bepaalde slide/thumb

Het was ook de bedoeling om naast de slideshow een bepaalde thumb te kunnen selecteren, door op de foto te klikken.

Daartoe is er aan iedere thumb een REL-attribuut toegekend die overeenkwam met de positie van de slide.

	// toon de slide na klik op een bepaalde thumb
	$('.thumb').bind('click', function () {
		
		currentPosition = parseInt($(this).attr('rel'));		
		manageNav(currentPosition);
		moveSlide();		
		
	});

Deze REL-waarde wordt omgezet naar een integer en de huidige slide zal afgebeeld worden.

Demo

Een online demo kan je vinden op de website van Parket Van Vynckt: http://www.vanvynckt.be

Laat je het liever over aan ons? Neem contact met ons op!