How to display pictures to a Gallery from references of filenames with PHP

I must be doing something wrong here. It doesn't work like it should but its a simple task that serves only one purpose, display the photos from my ./images and ./thumbnails folder to my PHP web form. It is not fully finished but I would just like to get the functionality of being able to see my displayed photos on my page.

Image name are the same in both folders, size is different. Here are some sample photo names in the two folders. IMG786_3, IMG3413, IMG31.

Here is the query to my database in which it retrieves all the title, description, and file name of all photos stored in my database. I put them into an array so I can access them based on an index.

$imgQuery = "SELECT FileName, Title, Description FROM PICTURE WHERE OwnerID='$id' LIMIT 0,7";   
if($imgResult = mysqli_query($link, $imgQuery))
{
while($imgRow = mysqli_fetch_row($imgResult))
{
    $filename[] = $imgRow[0];
    $title[] = $imgRow[1];
    $description[] = $imgRow[2];
}
}

Below is the code that is supposed to display these strings of photos from the two folders I have. When I click on a thumbnail, it is suppose to bring that full size image from the ./images folder and the entire index of the filename, description, and title will change.

print <<<photo
<body>
<span> <?php echo $error; ?> </span>
<form action='MyAlbum.php' method='post'>
    <table>
        <tr><td colspan='7' ><h2 align='center'>$name's Album</h2></td>
        </tr>
        <tr><td colspan='7' >$title[$i]</td>
        </tr>
        <tr><td colspan='5' ><img src="./images/$filename[$i]" /></td><td colspan='2'>$description[$i] </td>
        </tr>
        <tr>
            <td><img src="./thumbnails/$filename[0]" /></td> <td><img src="./thumbnails/$filename[1]" /></td> <td><img src="./thumbnails/$filename[2]" /></td> 
            <td><img src="./thumbnails/$filename[3]" /></td><td><img src="./thumbnails/$filename[4]" /></td> <td><img src="./thumbnails/$filename[5]" /></td> 
            <td><img src="./thumbnails/$filename[6]" /></td> 
        </tr>
    </table>
</form>
</body>
</html>

photo;

Solution

Your heredoc is wrong. 1st - You should iterate over file name to get the thumbnails. 2nd - you are getting images with variable $i which looks like an iterator but no for loop present.

I have modified the heredoc into html which works. You will still need javascript/jquery(i prefer) to achieve your image replacement to work. By default when the page loads the first image is displayed.

<html>
<body>
<span> <?php //echo $error; ?> </span>
<form action='MyAlbum.php' method='post'>
    <table border="1">
        <tr><td colspan='7' ><h2 align='center'><?php echo $name ?>'s Album</h2></td>
        </tr>
        <tr><td colspan='7' >
            <?php echo $title[0]; ?></td>
        </tr>
        <tr>
            <td colspan='5' ><img src="./images/<?php echo $filename[0] ?>" /></td>
            <td colspan='2' ><?php echo $description[0]; ?></td>
        </tr>
        <tr>
         <?php foreach($filename as $f): ?>   
            <td><img src="./thumbnails/<?php echo $f ?>" /></td>
         <?php endforeach; ?>
        </tr>
    </table>
</form>
</body>
</html>

One more thing. using 3 different arrays is not efficient. 1 associative array can achieve this work fine. Lemme know if you have doubts.

Dins