Een variabeld product 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 !
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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);
});
});
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
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
In dit voorbeeld zie je linkjes met de kleuren, en als je erop klikt krijg je de juiste foto te zien.
Gewijzigd op 01/01/2024 20:59:47 door - Ariën -