Question

I have a table below where it lists each image(s) for each question.

    <table id="tableqanda" cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <th width="5%" class="questionno">Question No.</th>
            <th width="11%" class="image">Image</th>
        </tr>
        </thead>
        </table>
        <div id="tableqanda_onthefly_container">
        <table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
        <tbody>
            <?php
              foreach ($arrQuestionId as $key=>$question) {
            echo '<tr class="tableqandarow">'.PHP_EOL
echo '<td width="5%" class="questionno">'.htmlspecialchars($arrQuestionNo[$key]).'</td>' . PHP_EOL;
            echo '<td width="11%" class="imagetd">';
            if (empty($arrImageFile[$key])) {
                echo '&nbsp;';
            } else {
                echo '<ul class="qandaul"><li>';
                echo implode("</li>\n<li>", array_map(function($imgitem){
                return htmlspecialchars($imgitem);
            },  $arrImageFile[$key]));
                echo '</li></ul>';
            }
            echo '</td>';
            echo '</tr>'.PHP_EOL;
            }
    ?>
        </tbody>
        </table>
        </div>

Now at the moment it just lists the image file names in a bullet point list. But what I want to do is that I want to set each file as a hyperlink so that if the user clicks on an image link, it will display that image in a separate page (a separate window will open up) displaying the image itself

My question is how can this be done, what are the following steps I need to do? If somebody can show me how to code it step by step then I can use it for audios and videos as well.

Thanks

Answer 1

Okay, I’ve been thinking about what you want to do and I think you want to show a list of images as thumbnails or something, and then click an image and show it (within your layout) on a new page (previewimage.php).

You have a lot of options… but they all boil down to passing some information through the URL (example.com/previewimage.php).

First, let’s examine 2 typical ways to pass information through an URL

$_GET Request

Sometimes you’ll see a website pass add information to a URL, like

example.com/previewimage.php?var=xxx

This allows you to pass some information to your PHP script via the $_GET superglobal.

Htaccess

If you want to get kind of fancy, you can use htaccess to make a clean URL

RewriteRule ^([a-zA-Z0-9]+)/$ previewimage.php?var=$1

This will let you have an URL like example.com/xxx and the server will act like you went to example.com/previewimage.php?var=xxx.

Now that you know how to hand information off to the url, we can look into some methods for using the $_GET[‘var’] to show the image.

The easiest approach is to simply pass the name of the file… for this example let’s call it example.png.

If you’re using the basic $_GET Request method above, you would have an URL like example.com/previewimage.php?var=example.png.

Then, in previewimage.php, you simply do something like

<img src="<?php echo $_GET['var'] ?>"/>

This will output

<img src="example.png"/>

However, this is not a very safe method, as anyone can load anything they want. A better option might be using an array or a database, and then passing a key of some sort and retrieving the filename.

I think this will set you on the right path (and I hope it answers your question).