Door
Stan Ravensbergen
op 24-01-2016 14:39
gewijzigd op 24-01-2016 14:41
3.085 views
Hallo allemaal,
Ik ben bezig met een project waarbij ik een nieuwssysteem maak.
Een bericht maak je via een formuliertje in te vullen, de gegevens uit het formulier worden vervolgens in een database opgeslagen. Er kan ook een image worden upgeload, deze image word opgeslagen in een map en het path naar de map in de database zelf.
nu werkt alles prima dat op de nieuwspagina de berichten met titel en plaatje worden getoond zoals ik dat wil.
als 2e functie wou ik dat als je op een plaatje klikt op de nieuwspagina dat hij dan vergroot, dit is mij tot nu toe tot op zekere hoogte gelukt. het is mij gelukt om een standaard plaatje uit te vergroten en weer weg te klikken.
Alleen het gene wat mij nog niet lukt is om het juiste plaatje waar je op klikt om die te vergroten. Hij moet hem dus uit de database halen. Maar hoe doe ik dit? ik zat te denken om te kijken welk id het plaatje heeft en die dan te laten zien maar kom er toch niet helemaal uit.
// We pakken alle images met de class headerImage
var images = document.getElementsByClassName('headerImage');
for(var i = 0; i < images.length; i++)
{
// Dan loopen we door de array om er event listeners op te zetten.
images[i].addEventListener('click', function() {
// Als erop geklikt wordt veranderen we de src van de image in de wrapper
document.getElementById('headerImage').src = this.src;
// En hier open je de div
document.getElementById("full_screen_vieuw").style.display = "inline";
});
}
Ik heb hiervoor de image in de 'wrapper' een id gegeven.
En de foto's die je vergroot wilt hebben geef je dan de class naam 'headerImage', of iets naar keuze, en dan pas je dat aan in de javascript.
Bedankt voor je hulp maar, als ik dit nu invoer dan gebeurt er helemaal niks eigenlijk.
edit
met een kleine aanpassing werkt het nu wel!!
onwijs bedankt voor je hulp!!! :)
Ik heb van jou script een functie gemaakt en die alsnog met onclick aangeroepen. Alleen ik moet nu dus nog 2x klikken voordat de wrapper tevoorschijn komt haha
Dan heb je de eventListener in de functie staan, oftewel die wordt pas aangemaakt als de functie wordt aangeroepen ofzo.
Als je je code laat zien, dan kunnen we je verder helpen.
function showLargeImage(){
var images = document.getElementsByClassName('testImage');
for(var i = 0; i < images.length; i++)
{
images[i].addEventListener('click', function() {
document.getElementById('headerImage').src = this.src;
document.getElementById("full_screen_vieuw").style.display = "inline";
});
}
}
het gekke is dat als ik de functie weg laat en de onclick dan gebeurt er niks maar als ik de functie met onclick weer toevoeg dan doet hij het wel maar dan moet ik dus 2x klikken voor dat er iets gebeurt.
Waar heb je dat stukje js staan? Want de eventlosteners werken wel. Je hebt nu een functie gemaakt om de eventlisteners aan te maken. Als het daar nog niet staat, verplaats de js dan tussen <script> tags meteen voor de sluitende </body> tag.
