How to open images in a separate window? - php

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 ' ';
} 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).

Answer 2

Assuming this question is how to open a link in a new tab.
Surround whatever you like, image in this case, with this.
<img src="/linktoimage.png" alt="my image">

Answer 3

Here is a sample of how this could be done. Just made edits to the inner "If else" loop
Replace YOUR_BASE_URL_FOR_IMAGES_HERE_ENDING_WITH_A_DASH with the directory path of the images on server.
if (empty($arrImageFile[$key])) {
echo ' ';
} else {
echo '<ul class="qandaul"><li>';
echo implode("</li>\n<li>", array_map(function($imgitem) {
return '' . htmlspecialchars($imgitem) . '';
}, $arrImageFile[$key]));
echo '</li></ul>';
}