<aside> 💡

Als je klaar bent laat je de challenge aftekenen bij de docent

</aside>

<aside> 👉 Deze challenge kun je ook gebruiken voor de weekopdracht 2, de product-pagina met details van een product.

</aside>

Maak een fotogallery waarbij je 1 grote foto in beeld hebt, en daaronder of naast kleine thumbnails. Als je op een thumbnail klikt, krijg je daar een grote versie van te zien op de plek van de vorige grote foto.

Dit kan op verschillende manieren, met verschillende technieken

• met puur (vanilla) Javascript
• met jQuery
• met vanilla HTML/CSS

Wat suggesties voor een uitwerking met puur (vanilla) Javascript:

• je kunt checken of er op een thumbnail geklikt wordt met een eventlistener: gebruik daarvoor de functie addEventListener()
• je kunt de grote afbeelding veranderen door het attributuut ‘src’ van de grote afbeelding te veranderen. Zoek eerst de grote afbeelding met getElementById . Daarna pas je de source aan met iets als vergroting.src = "nieuwplaatje.png"
• je kunt een HTML-element extra gegevens meegeven met de data-attribute In dit geval kun je de thumbnails de link naar de vergroting meegeven, bijv. data-attribute="groot-plaatje1.jpg"

<aside> 👉 als je efficient wilt coderen, doe je bovenstaande niet voor elke thumbnail apart, maar

• geef je elke thumbnail dezelfde class.
• sla je alle thumbnails op in een array met behulp van de functie getElementsbyClassname() of querySelectorAll()
• loop over de array van thumbnails met een for-loop en gebruik in de loop de addEventListener en verander je de src van de vergroting </aside>