jQuery image slider

Vaak zie je dit in webwinkels: een slider waarbij uit meerdere afbeeldingen gekozen kan worden, en bij het klikken dat er een grotere foto verschijnt. Dat gaan wij vandaag maken. Hierbij komt ook een stukje CSS aan te pas, er moet namelijk een ruimte gemaakt worden waar de miniatuur afbeeldingen getoond worden, en een waar de grote foto getoond wordt. Het resultaat zal er als volgt uitzien:

Css

De CSS is vrij standaard opgebouwd, maar er is 1 CSS element welke opvalt: white-space: nowrap;. Dit zorgt er voor dat alle thumbnails naast elkaar blijven staan, en niet op een nieuwe regel beginnen. Vervolgens zorg ik er met behulp van overflow: hidden voor dat de afbeeldingen niet in beeld zijn wanneer dat niet nodig is. De uiteindelijke CSS van het thumbnail overzicht ziet er zo uit:

  1. div#thumbnails {
  2.         white-space: nowrap; /* Alle afbeeldingen naast elkaar tonen */
  3.         overflow: hidden; /* De afbeeldingen die teveel zijn verbergen */
  4.         width: 160px; /* Breedte aangeven */
  5.         float: left; /* Dit zorgt er voor dat de links/rechts afbeeldingen naast het thumbnail overzicht komen. */
  6. }

De volledige CSS staat in de broncode van het voorbeeld, welke hier te vinden is: Bekijk voorbeeld

Het schuiven van de afbeeldingen

Het schuiven van de afbeeldingen is makkelijker dan het op het eerste gezicht misschien lijkt. Dit gebeurt vrij eenvoudig door gebruik te maken van scrollLeft. In de tutorial pagina scrollen met jQuery maakte ik al gebruik van de waarde scrollTop. Met deze waarde is het mogelijk om een element te laten schuiven naar het aantal opgegeven pixels. Wanneer dit gecombineerd wordt met een setInterval geeft dit het glij effect.

Een setInterval is bijna hetzelfde als een setTimeOut, met als verschil dat deze de actie blijft herhalen. Het is ook mogelijk om deze actie weer ongedaan te maken met de functie clearInterval. Om dit allemaal te combineren maak ik gebruik van de jQuery functie hover. De naam van de functie zegt het al: Deze wordt geactiveerd wanneer de gebruiker met de muis over het geselecteerde element gaat. Wanneer deze weer van het element afgaat met de muis, wordt de 2e functie geactiveerd, met daarin in ons geval clearInterval.

Het resultaat ziet er dan zo uit:

  1. /* Hover accepteert 2 functies: De eerste wordt geactiveer
  2. wanneer de gebruiker met zijn muis op het element staat,
  3. de 2e wanneer de gebruiker deze er weer vanaf haalt */
  4. $("div#left, div#right").hover( function () {
  5.         /* Omdat binnen de setInterval functie this naar iets anders verwijst,
  6.         sla ik daarom het id op. Aan de hand hiervan kijk ik of er naar links
  7.         of naar rechts geschoven moet gaan worden */
  8.         $side = $(this).attr('id');
  9.  
  10.         /* Deze functie doet het echte schuiven. Hier wordt de huidige
  11.         positie van het element gepakt, en daar 10 pixels bij opgeteld
  12.         of vanaf gehaald. Vervolgens wordt de huidige positie aangepast
  13.         naar de nieuwe positie. */
  14.         $timer = setInterval( function () {
  15.                 if($side == 'left') {
  16.                         $scroll = $("div#thumbnails").scrollLeft() - 10;
  17.                 } else {
  18.                         $scroll = $("div#thumbnails").scrollLeft() + 10;
  19.                 }
  20.                 $("div#thumbnails").scrollLeft( $scroll );
  21.         /* Deze 50 geeft aan na hoeveel microseconden de functie
  22.         opnieuw moet worden uitgevoerd. In ons geval dus na
  23.         50 microseconden. */
  24.         }, 50);
  25. }, function () {
  26.         /* Wanneer de gebruiker van het element af beweegt moet de
  27.         interval verwijderd worden. Omdat deze hierboven net in een
  28.         variabele is geplaatst, kan de interval weer verwijderd worden. */
  29.         clearInterval( $timer );
  30. });

Klikbaar maken

De volgende stap is om ervoor te zorgen dat er op de thumbnails geklikt kan worden en deze bij de grotere afbeelding zichtbaar wordt. Dat gebeurt als volgt:

  1. $("div#thumbnails img")
  2. .css('cursor', 'pointer') /* Verander de muis zodat het duidelijk is dat er op de afbeelding geklikt kan worden */
  3. .click( function () {
  4.         /* Sla de locatie van de afbeelding op */
  5.         $bigImageSrc = $(this).attr('src');
  6.        
  7.         /* Kijk of de huidige locatie hetzelfde is als de nieuwe
  8.         locatie. Dan hoeft er niks te gebeuren. return zorgt ervoor
  9.         dat de rest van de functie niet wordt uitgevoerd. */
  10.         if($("div#big-image img").attr('src') == $bigImageSrc)
  11.                 return;
  12.        
  13.         /* Hier wordt de afbeelding vervangen voor een nieuwe afbeelding
  14.         in combinatie met een fadeout/fadein effect */
  15.         $("div#big-image img").fadeOut(100, function () {
  16.                 $(this).attr('src', $bigImageSrc).fadeIn(100);
  17.         });
  18. });

Bekijk demo

Bekijk een online demo hiervan: Bekijk demo. De source code is als bijlage toegevoegd.

BijlageGrootte
jquery-image-rotator.zip87.94 KB