krijg id van image als je er op klikt
De wrapper:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="full_screen_vieuw">
<div class="full_screen_close_img_holder">
<img class="full_screen_close" onclick="closeLargeImg()" src="../img/close2.png">
<img id="headerImage" class="full_screen_img" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
</div>
</div>
<div class="full_screen_close_img_holder">
<img class="full_screen_close" onclick="closeLargeImg()" src="../img/close2.png">
<img id="headerImage" class="full_screen_img" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
</div>
</div>
Dan de javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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";
});
}
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.
Fiddle met werkend voorbeeld
Gewijzigd op 25/01/2016 20:20:07 door Randy vsf
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
Gewijzigd op 25/01/2016 22:12:31 door Stan Ravensbergen
Als je je code laat zien, dan kunnen we je verder helpen.
Gewijzigd op 25/01/2016 22:31:06 door Randy vsf
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
if (mysqli_num_rows($result) > 0) {
//ouput date van elke rij
while ($row = mysqli_fetch_array($result)) {
?>
<section class="nieuws">
<section class="blok">
<?php echo '<h1>'. $row['titel'] .'</h1>';?>
<?php echo '<p>'. $row['datum'] = substr($row['datum'], 0, 10) .'</p>';?>
<img class="testImage" onclick="showLargeImage()" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
<?php echo '<article>'. $row['bericht'] . '</aticle>';?>
</section>
</section> <?php
}
?>
if (mysqli_num_rows($result) > 0) {
//ouput date van elke rij
while ($row = mysqli_fetch_array($result)) {
?>
<section class="nieuws">
<section class="blok">
<?php echo '<h1>'. $row['titel'] .'</h1>';?>
<?php echo '<p>'. $row['datum'] = substr($row['datum'], 0, 10) .'</p>';?>
<img class="testImage" onclick="showLargeImage()" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
<?php echo '<article>'. $row['bericht'] . '</aticle>';?>
</section>
</section> <?php
}
?>
de vergrote foto:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="full_screen_vieuw">
<div class="full_screen_close_img_holder">
<img class="full_screen_close" onclick="closeLargeImg()" src="../img/close2.png">
<img id="headerImage" class="full_screen_img" src="#">
</div>
</div>
<div class="full_screen_close_img_holder">
<img class="full_screen_close" onclick="closeLargeImg()" src="../img/close2.png">
<img id="headerImage" class="full_screen_img" src="#">
</div>
</div>
js bestand:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
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";
});
}
}
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.
Gewijzigd op 26/01/2016 08:35:43 door - Ariën -
Super bedankt voor je hulp!!
Als je de verwijzing naar de file net voor de </body> tag zet is het geen probleem.
Ben blij dat het werkt, en geen probleem ^^