CODEWITHSUNDEEP
javascriptphpimagewhile-loop
Sang Tonsing
Sang Tonsing

Reputation: 147

How to display a particular clicked image from multiple image fetched from database using while loop in php, and javascript for displaying?

I tried to display a particular clicked image(full pop-up screen when clicking image in html page) fetched from database using while loop in php but I have trouble displaying that particular image since it is inside a while loop. The result I got is when I clicked the first image I could display the first image as I want but I couldn't display the rest of the image, what I guess is that the id that I gave in img tag is accessed only by the first image. Since its inside a while loop I thought it would be okay to give the id the same but I was wrong. How do I fix this problem? I tried incrementing $i variable inside the while loop but I couldn't implement the $i inside javascript. Or is there a better way? Heres my code.

    <!DOCTYPE html>
    <html>
    <head>
<title>Home</title>
<link rel = "stylesheet" type = "text/css" href = "accounts.css">
    </head>
    <body>
    <?php 
$servername = 'localhost';
$user = 'root';
$passwords = '';
$dbname = 'project';

$conn = new mysqli($servername, $user, $passwords, $dbname);

if($conn->connect_error)
{
    die("Could not connect... ".$conn->connect_error);
}

$sql = "SELECT photo_url FROM photo WHERE username = '$username'";
$result = $conn->query($sql);
if($result->num_rows > 0)
{
    while($row = $result->fetch_assoc())
    {
        echo "<span id = 'photos'>";
            echo "<img id = 'myProfile1' src = '".$row['photo_url']."' alt = 'photo' width = 190px' height = '200px' style = 'border: 1px solid #aaaaaa;'>";
        echo "</span>";
        echo "<div id = 'popUp1' class = 'pop'>";
            echo "<span class = 'close1'>&times;</span>";
            echo "<img class = 'pop-content' id = 'img02'>";
        echo "</div>";
    }
}
else
{
    echo "<p>You haven't uploaded any photo.</p>";
}
$conn->close();
    ?>
    <script>
var pop1 = document.getElementById('popUp1');
var img1 = document.getElementById('myProfile1');
var popImg1 = document.getElementById('img02');
img1.onclick = function()
{
    pop1.style.display = 'block';
    popImg1.src = this.src;
}
var span1 = document.getElementsByClassName('close1')[0];
span1.onclick = function()
{
    pop1.style.display = 'none';
}
    </script>
    </body>
    </html>

Thank You in advance.

Upvotes: 0

Views: 942

Answers (1)

Fantastisk
Fantastisk

Reputation: 488

I haven't tested this, since i haven't got a PHP setup running. But I think one way to solve this, could be something like this:

<!DOCTYPE html>
    <html>
    <head>
<title>Home</title>
<link rel = "stylesheet" type = "text/css" href = "accounts.css">
    </head>
    <body>
    <?php 
$servername = 'localhost';
$user = 'root';
$passwords = 'root';
$dbname = 'project';

$conn = new mysqli($servername, $user, $passwords, $dbname);

if($conn->connect_error)
{
    die("Could not connect... ".$conn->connect_error);
}

$sql = "SELECT photo_url FROM photo WHERE username = '$username'";
$result = $conn->query($sql);
if($result->num_rows > 0)
{
    $i=0;
    while($row = $result->fetch_assoc())
    {
        $i++;
        echo "<span id = 'photos'>";
        echo "<img onClick='showImage(" . $i . ")' id = 'myProfile" . $i . "' src = '".$row['photo_url']."' alt = 'photo' width = 190px' height = '200px' style = 'border: 1px solid #aaaaaa;'>";
        echo "</span>";
        echo "<div id = 'popUp" . $i . "' class = 'pop1'>";
        echo "<span class = 'close1' onClick='closeImage(" . $i . ")'>&times;</span>";
        echo "<img class = 'pop-content' id = 'img" . $i . "'>";
        echo "</div>";
    }
}
else
{
    echo "<p>You haven't uploaded any photo.</p>";
}
$conn->close();
    ?>
    <script>
    function showImage(intId) {
        var pop1 = document.getElementById('popUp'+intId);
        var img1 = document.getElementById('myProfile'+intId);
        var popImg1 = document.getElementById('img'+intId);
        pop1.style.display = 'block';
        popImg1.src = img1.src;
    }

    function closeImage(intId) {
        var pop1 = document.getElementById('popUp'+intId);
        pop1.style.display = 'none';
    }
    </script>
    </body>
    </html>

Upvotes: 1

Related Questions