Een variabeld product maken die samenwerkt met de bijgevoegde fotogallerij

Door Martin Lanting op 01-01-2024 20:05

1.794 views

Ik ben op zoek naar een oplossing om een variabeld product te maken die samenwerkt met de bijgevoegde fotogallerij.
We verkopen bolletjes wol met soms wel 100 verschillende kleuren.
Nu kan ik er wel een fotogallerij bij maken zodat er allemaal kleine fotootjes bij komen te staan.
Ik heb het variabel product aangemaakt met de de keuze op nummer te zoeken.
Deze nummers komen ook in de advertentie te staan.
Alleen nu werken de kleurnummers en de fotootjes niet samen met elkaar.

Als ik b.v.op het blauwe bolletje wol klik die nummer 5 heeft komt het blauwe bolletje wol wel in zicht.
Maar het nummer veranderd niet mee.

Hoe kan ik het zo maken dat dit met elkaar samen gaat werken ?
Ben hier al een poosje mee bezig. maar krijg het niet voor elkaar.

Hoop dat hier een oplossing voor is.

Alvast bedankt !

- Ariën -

01-01-2024 20:13

Zoiets in HTML:


  <a href="#" class="kleur-link" data-kleur="groen">Groen</a>
  <a href="#" class="kleur-link" data-kleur="blauw">Blauw</a>
  <a href="#" class="kleur-link" data-kleur="rood">Rood</a>

  <div>
    <img src="" id="foto" alt="Foto">
  </div>

Met de benodigde Javascript:


// Functie om de juiste foto te tonen
function toonFoto(kleur) {
  const fotoElement = document.getElementById('foto');
  fotoElement.src = `wol_${kleur}.jpg`;
}

// Event listener voor het klikken op de linkjes
document.querySelectorAll('.kleur-link').forEach(function(link) {
  link.addEventListener('click', function(event) {
    event.preventDefault();
    const gekozenKleur = this.getAttribute('data-kleur');
    toonFoto(gekozenKleur);
  });
});

Dit zorgt ervoor dat aan de hand van de data-kleur de juiste foto wordt opgeroepen aan de hand van: wol_${kleur}.jpg

M Martin Lanting

01-01-2024 20:25

Hallo.
Bedankt voor de snelle reaktie.

Met deze code wordt de foto van de fotogallerij aan het betreffende kleurnummer gelinkt?

Waar plaats ik deze code ?

Gr. Martin

- Ariën -

01-01-2024 20:58 gewijzigd op 01-01-2024 20:59

In je HTML en JavaScript-code moet je dit plaatsen.

In dit voorbeeld zie je linkjes met de kleuren, en als je erop klikt krijg je de juiste foto te zien.

? Onbekende gebruiker

02-01-2024 12:02

De functie "toonFoto()" gebruikt het element met de id "foto" om de juiste foto te tonen. De URL van de foto wordt samengesteld met de kleur van de link.

Reageren

Inloggen om te reageren