krijg id van image als je er op klikt
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.
Weet iemand hoe ik dit het beste kan doen?
groeten Stan
Gewijzigd op 24/01/2016 14:41:48 door Stan Ravensbergen
Ikzelf heb ook een systeen om plaatjes te uploaden bij nieuwsberichten, en ik genereer er diverse formaten van.
er is een div die het volledige scherm vult met daarin een foto, deze div staat standaard op display: none.
Als er op het plaatje geklikt word dan word er via een js functie de display: none op display: inline gezet waardoor de heel div dus te zien is.
met een simpele fetch_assoc() kan je deze gewoon oproepen.
ik heb tot nu toe dit gemaakt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
$username = "root";
$password = "";
$dbname = "trailen_met_hans";
//creat conection
$conn = mysqli_connect($servername, $username, $password, $dbname);
//check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT id, img_name FROM nieuwsbericht";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result);
?>
<div id="full_screen_vieuw">
<div class="full_screen_close_img_holder">
<img class="full_screen_close" onclick="closeLargeImg()" src="../img/close2.png">
<img class="full_screen_img" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
</div>
</div>
$username = "root";
$password = "";
$dbname = "trailen_met_hans";
//creat conection
$conn = mysqli_connect($servername, $username, $password, $dbname);
//check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT id, img_name FROM nieuwsbericht";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result);
?>
<div id="full_screen_vieuw">
<div class="full_screen_close_img_holder">
<img class="full_screen_close" onclick="closeLargeImg()" src="../img/close2.png">
<img class="full_screen_img" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
</div>
</div>
Ik heb nu 2 berichtjes geplaatst met beide een andere image, maar wat die nu doet is dat als ik op de image klik om hem te vergroten dat hij bij beide images alleen de image van het eerst geplaatst bericht laat zien.
Hoe zou ik dat eventueel kunnen oplossen?
Gewijzigd op 24/01/2016 15:28:36 door Stan Ravensbergen
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var images = document.getElementsByClassName('headerImage');
for(var i = 0; i < images.length; i++)
{
images[i].addEventListener('click', function() {
var ID = this.id; // Hier is je ID.
}
}
for(var i = 0; i < images.length; i++)
{
images[i].addEventListener('click', function() {
var ID = this.id; // Hier is je ID.
}
}
@Randy vsf: zelf ben ik nog niet super bekent met Javascript om dit goed toe te kunnen passen.
@Thomas van den Heuvel: als ik ipv $row['img_name'], $row['id'] invoer dan kan hij de image niet vinden omdat de url dan het nummer van de id word ipv de name van de image.
Je wilt alleen weten van welke je de display moet wijzigen, snap ik het dan goed?
Toevoeging op 24/01/2016 17:13:27:
De gebruiker blijft op de zelfde pagina ja, de foto word dan in een aparte div getoond. Het klopt dat ik alleen wil weten welke image er getoond moet worden.
Die zelfde counter kan je ook op het van de 'wrapper' zetten.
Zoiets als headerImage_1, wrapper_1. Bij ieder nieuwsbericht hoog je die op.
dan een klein stukje javascript die de juiste div weergeeft
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
var images = document.getElementsByClassName('headerImage');
for(var i = 0; i < images.length; i++)
{
images[i].addEventListener('click', function() {
var element = this.id.replace('headerImage', 'wrapper');
var el = document.getElementById(element);
el.style.display = el.style.display == 'none' || el.style.display == '' ? 'block' : 'none';
});
}
for(var i = 0; i < images.length; i++)
{
images[i].addEventListener('click', function() {
var element = this.id.replace('headerImage', 'wrapper');
var el = document.getElementById(element);
el.style.display = el.style.display == 'none' || el.style.display == '' ? 'block' : 'none';
});
}
is het misschien handig als ik wat van mij code's laat zien?
Ik neem aan dat het met een while loop gebeurd, als dat zo is zal je daar een counter bij moeten zetten.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<form method="POST" action="insert-nieuws.php" enctype="multipart/form-data" class="insert_bericht">
<fieldset>
<legend>Plaats een nieuw bericht</legend>
<ul class="list_insert_bericht">
<li><label>Titel:</label></li>
<li><input type="text" name="titel" class="form_titel" required></li>
<li><label>bericht:</label></li>
<li><textarea name="bericht" class="form_bericht" required></textarea></li>
<li><label>Voeg een foto toe:</label></li>
<li><input type="file" name="file_img" class="form_file" required></li>
<li><input type="submit" name="btn_upload" value="plaats bericht" class="form_submit"></li>
</ul>
</fieldset>
</form>
<?php
//form naar variabelen
if (isset($_POST['btn_upload'])) {
$titel = $_POST["titel"];
$bericht = $_POST["bericht"];
$filetmp = $_FILES["file_img"]["tmp_name"];
$filename = time()."_".$_FILES["file_img"]["name"];
$filetype = $_FILES["file_img"]["type"];
$filesize = $_FILES["file_img"]["size"];
$filepath = "../img/img_nieuws/".$filename;
//sql injection
$bericht = nl2br($bericht);
$titel = stripslashes($titel);
$bericht = stripslashes($bericht);
$titel = mysql_real_escape_string($titel);
$bericht = mysql_real_escape_string($bericht);
if ($filetmp == "") {
echo "Voeg een foto in a.u.b.";
}
else{
if ($filesize >= 2097152) {
echo "De afbeelding is groter dan 2mb, selecteer een kleiner formaat.";
}
else{
if ($filetype != "image/jpeg" && $filetype != "image/png" && $filetype != "image/gif") {
echo "selecteer a.u.b. een .jpg, .png of een .gif bestand.";
}
else{
move_uploaded_file($filetmp, $filepath);
$sql = "INSERT INTO nieuwsbericht (titel, bericht, img_name, img_path, img_type)
VALUES ('$titel', '$bericht', '$filename', '$filepath', '$filetype')";
$result = mysqli_query($conn, $sql);
if (!$result) { die('Error: ' . mysqli_error()); }
echo "Uw bericht is verwerkt.";
}
}
}
}
mysqli_close($conn);
?>
<fieldset>
<legend>Plaats een nieuw bericht</legend>
<ul class="list_insert_bericht">
<li><label>Titel:</label></li>
<li><input type="text" name="titel" class="form_titel" required></li>
<li><label>bericht:</label></li>
<li><textarea name="bericht" class="form_bericht" required></textarea></li>
<li><label>Voeg een foto toe:</label></li>
<li><input type="file" name="file_img" class="form_file" required></li>
<li><input type="submit" name="btn_upload" value="plaats bericht" class="form_submit"></li>
</ul>
</fieldset>
</form>
<?php
//form naar variabelen
if (isset($_POST['btn_upload'])) {
$titel = $_POST["titel"];
$bericht = $_POST["bericht"];
$filetmp = $_FILES["file_img"]["tmp_name"];
$filename = time()."_".$_FILES["file_img"]["name"];
$filetype = $_FILES["file_img"]["type"];
$filesize = $_FILES["file_img"]["size"];
$filepath = "../img/img_nieuws/".$filename;
//sql injection
$bericht = nl2br($bericht);
$titel = stripslashes($titel);
$bericht = stripslashes($bericht);
$titel = mysql_real_escape_string($titel);
$bericht = mysql_real_escape_string($bericht);
if ($filetmp == "") {
echo "Voeg een foto in a.u.b.";
}
else{
if ($filesize >= 2097152) {
echo "De afbeelding is groter dan 2mb, selecteer een kleiner formaat.";
}
else{
if ($filetype != "image/jpeg" && $filetype != "image/png" && $filetype != "image/gif") {
echo "selecteer a.u.b. een .jpg, .png of een .gif bestand.";
}
else{
move_uploaded_file($filetmp, $filepath);
$sql = "INSERT INTO nieuwsbericht (titel, bericht, img_name, img_path, img_type)
VALUES ('$titel', '$bericht', '$filename', '$filepath', '$filetype')";
$result = mysqli_query($conn, $sql);
if (!$result) { die('Error: ' . mysqli_error()); }
echo "Uw bericht is verwerkt.";
}
}
}
}
mysqli_close($conn);
?>
nu word het formulier naar de database over gezet.
vervolgens moet het bericht op de nieuws pagina weergegeven worden dat gebeurd inderdaad met een while loop:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
//select data uit database
$sql = "SELECT id, titel, bericht, DATE_FORMAT(datum, '%d-%m-%y') datum, img_name FROM nieuwsbericht ORDER BY id DESC";
$result = mysqli_query($conn, $sql);
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 onclick="showLargeImg()" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
<?php echo '<article>'. $row['bericht'] . '</aticle>';?>
</section>
</section> <?php
}
}else {
echo "Er zijn geen nieuwsberichten";
}
mysqli_close($conn);
?>
//select data uit database
$sql = "SELECT id, titel, bericht, DATE_FORMAT(datum, '%d-%m-%y') datum, img_name FROM nieuwsbericht ORDER BY id DESC";
$result = mysqli_query($conn, $sql);
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 onclick="showLargeImg()" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
<?php echo '<article>'. $row['bericht'] . '</aticle>';?>
</section>
</section> <?php
}
}else {
echo "Er zijn geen nieuwsberichten";
}
mysqli_close($conn);
?>
dit werkt allemaal perfect! :)
maar nu wil ik dus dat als je op een van de plaatjes klikt dat er dus een een scherm komt met het juiste plaatje er in. Tot nu toe heb ik dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
//creat conection
$conn = mysqli_connect($servername, $username, $password, $dbname);
//check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT id, img_name FROM nieuwsbericht";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result);
?>
<div id="full_screen_vieuw">
<div class="full_screen_close_img_holder">
<img class="full_screen_close" onclick="closeLargeImg()" src="../img/close2.png">
<img class="full_screen_img" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
</div>
</div>
//creat conection
$conn = mysqli_connect($servername, $username, $password, $dbname);
//check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT id, img_name FROM nieuwsbericht";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result);
?>
<div id="full_screen_vieuw">
<div class="full_screen_close_img_holder">
<img class="full_screen_close" onclick="closeLargeImg()" src="../img/close2.png">
<img class="full_screen_img" src="../img/img_nieuws/<?php echo $row['img_name'];?>">
</div>
</div>
js:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
function showLargeImg() {
document.getElementById("full_screen_vieuw").style.display = "inline";
}
function closeLargeImg(){
document.getElementById("full_screen_vieuw").style.display = "none";
}
document.getElementById("full_screen_vieuw").style.display = "inline";
}
function closeLargeImg(){
document.getElementById("full_screen_vieuw").style.display = "none";
}
css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#full_screen_vieuw{
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
top: 0px;
left: 0px;
display: none;
background: rgba(0, 0, 0, 0.7);
}
.full_screen_close_img_holder{
width: 810px;
height: 510px;
padding: 10px;
background-color: white;
position: fixed;
border: solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 2px 2px 1px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.full_screen_img{
width: 800px;
height: 500px;
padding: 5px;
position: fixed;
background-color: white;
}
.full_screen_close{
width: 25px;
position: absolute;
top: -0.7em;
right: -0.8em;
z-index: 999;
}
.full_screen_close:hover{
cursor: pointer;
}
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
top: 0px;
left: 0px;
display: none;
background: rgba(0, 0, 0, 0.7);
}
.full_screen_close_img_holder{
width: 810px;
height: 510px;
padding: 10px;
background-color: white;
position: fixed;
border: solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 2px 2px 1px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.full_screen_img{
width: 800px;
height: 500px;
padding: 5px;
position: fixed;
background-color: white;
}
.full_screen_close{
width: 25px;
position: absolute;
top: -0.7em;
right: -0.8em;
z-index: 999;
}
.full_screen_close:hover{
cursor: pointer;
}
Ik hoop dat jullie hier wat aan hebben.