krijg id van image als je er op klikt

Door Stan Ravensbergen op 24-01-2016 14:39 gewijzigd op 24-01-2016 14:41

3.086 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.

Weet iemand hoe ik dit het beste kan doen?

groeten Stan

Ariën

24-01-2016 14:47

Het vergroten kan je toch doen met iets van de FancyBox?
Ikzelf heb ook een systeen om plaatjes te uploaden bij nieuwsberichten, en ik genereer er diverse formaten van.

Stan Ravensbergen

24-01-2016 14:53

Ik heb voor het vergroten van de images een klein systeempje gemaakt dat het volgende doet:
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.

Ariën

24-01-2016 14:57

Elk plaatje waarvan je de koppeling in de database hebt opgeslagen, heeft een uniek ID.
met een simpele fetch_assoc() kan je deze gewoon oproepen.

Stan Ravensbergen

24-01-2016 15:04

aah okee, ik ga wat proberen, bedankt voor je hulp!

Ariën

24-01-2016 15:14

Okee, succes!

Stan Ravensbergen

24-01-2016 15:27 gewijzigd op 24-01-2016 15:28

hee,

ik heb tot nu toe dit gemaakt:


 <?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>

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?

Randy vsf

24-01-2016 16:50

Je kan iedere image een class geven, als voorbeeld noem ik het headerImage.


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.
    }
}

Thomas van den Heuvel

24-01-2016 16:55

Je hebt het id al ($row['id']), dit lijkt mij dus enkel een kwestie van het afdrukken hiervan?

Stan Ravensbergen

24-01-2016 17:04

Bedankt voor jullie hulp,

@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.

Ariën

24-01-2016 17:08

Je mist denk ik een WHERE-voorwaarde in je query. Elke afbeelding is toch gekoppeld aan een nieuwsbericht ID?

Reageren

Inloggen om te reageren